RuhNetConsulting
/
Adminator-admin-dashboard
mirror of https://github.com/puikinsh/Adminator-admin-dashboard
1
0
Fork 0
Code Issues 0 Projects 0 Releases 16 Wiki Activity
Browse Source

Merge pull request #170 from puikinsh/master 

Merge pull request #168 from puikinsh/Datatable_bug_fix_and_package_u…
Datatable_bug_fix_and_package_update
Aigars Silkalns 2 years ago
committed by GitHub
parent
d0bbbeb929 6389368ded
commit
e0e254eee9
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
58 changed files with 21989 additions and 724 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -9
      .babelrc
  2. +56
    -0
      .eslintrc.json
  3. +0
    -66
      .eslintrc.yml
  4. +35
    -0
      .github/workflows/merge.yml
  5. +50
    -0
      .github/workflows/release.yml
  6. +1
    -1
      .gitignore
  7. +1
    -0
      .nvmrc
  8. +9
    -0
      .stylelintrc.json
  9. +0
    -7
      .stylelintrc.yml
  10. +16
    -2
      CHANGELOG.md
  11. +7
    -5
      README.md
  12. +11
    -1
      browserslist
  13. +1
    -0
      ci/getVersion.sh
  14. +9
    -0
      ci/verifyVersion.sh
  15. +66
    -66
      forms.php
  16. +20946
    -0
      package-lock.json
  17. +60
    -49
      package.json
  18. +3
    -2
      src/assets/scripts/charts/chartJS/index.js
  19. +80
    -54
      src/assets/scripts/fullcalendar/index.js
  20. +4
    -2
      src/assets/scripts/index.js
  21. +10
    -4
      src/assets/scripts/popover/index.js
  22. +1
    -1
      src/assets/styles/index.scss
  23. +2
    -2
      src/assets/styles/spec/components/topbar.scss
  24. +18
    -0
      src/assets/styles/spec/generic/base.scss
  25. +1
    -1
      src/assets/styles/spec/settings/index.scss
  26. +1
    -1
      src/assets/styles/spec/settings/materialColors.scss
  27. +10
    -10
      src/assets/styles/spec/utils/colors.scss
  28. +62
    -60
      src/assets/styles/spec/utils/layout/utils/gap.scss
  29. +1
    -1
      src/assets/styles/vendor/index.scss
  30. +8
    -8
      src/basic-table.html
  31. +8
    -8
      src/blank.html
  32. +5
    -5
      src/buttons.html
  33. +21
    -21
      src/calendar.html
  34. +4
    -4
      src/charts.html
  35. +5
    -5
      src/chat.html
  36. +18
    -18
      src/compose.html
  37. +4
    -4
      src/datatable.html
  38. +26
    -26
      src/email.html
  39. +59
    -59
      src/forms.html
  40. +4
    -4
      src/google-maps.html
  41. +28
    -28
      src/index.html
  42. +7
    -7
      src/signin.html
  43. +10
    -10
      src/signup.html
  44. +96
    -0
      src/test.html
  45. +53
    -55
      src/ui.html
  46. +4
    -4
      src/vector-maps.html
  47. +25
    -12
      webpack/config.js
  48. +28
    -22
      webpack/devServer.js
  49. +4
    -3
      webpack/manifest.js
  50. +4
    -2
      webpack/plugins/copyPlugin.js
  51. +2
    -2
      webpack/plugins/extractPlugin.js
  52. +21
    -7
      webpack/plugins/htmlPlugin.js
  53. +2
    -1
      webpack/plugins/index.js
  54. +41
    -40
      webpack/plugins/internal.js
  55. +5
    -5
      webpack/rules/css.js
  56. +2
    -2
      webpack/rules/fonts.js
  57. +1
    -1
      webpack/rules/images.js
  58. +29
    -17
      webpack/rules/sass.js

+ 4
- 9
.babelrc View File

@ -1,12 +1,7 @@
{ {
"presets": ["@babel/preset-env"],
"plugins": [ "plugins": [
"transform-class-properties",
"transform-object-rest-spread"
],
"presets": [
["env", {
"modules": false
}],
"stage-0"
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread"
] ]
}
}

+ 56
- 0
.eslintrc.json View File

@ -0,0 +1,56 @@
{
"extends": "airbnb-base",
"parser": "@babel/eslint-parser",
"settings": {
"ecmascript": 7
},
"parserOptions": {
"ecmaVersion": 2018,
"ecmaFeatures": {
"modules": true,
"destructuring": true,
"classes": true,
"forOf": true,
"blockBindings": true,
"arrowFunctions": true
}
},
"env": {
"browser": true
},
"rules": {
"arrow-body-style": 0,
"prefer-arrow-callback": 0,
"arrow-parens": 0,
"no-param-reassign": 0,
"no-new": 0,
"consistent-return": 0,
"key-spacing": 0,
"no-multi-spaces": 0,
"no-underscore-dangle": 0,
"one-var": 0,
"global-require": 0,
"class-methods-use-this": 0,
"comma-dangle": ["error", {
"arrays": "always-multiline",
"objects": "always-multiline",
"imports": "always-multiline",
"exports": "always-multiline",
"functions": "never"
}],
"func-names": 0,
"function-paren-newline": 0,
"indent": 2,
"new-cap": 0,
"no-plusplus": 0,
"no-return-assign": 0,
"quote-props": 0,
"template-curly-spacing": 0,
"no-unused-expressions": 0,
"import/extensions": 0,
"import/no-extraneous-dependencies": 0,
"import/no-unresolved": 0,
"import/prefer-default-export": 0,
"linebreak-style": ["error", "windows"]
}
}

+ 0
- 66
.eslintrc.yml View File

@ -1,66 +0,0 @@
---
extends:
airbnb-base
parser:
babel-eslint
settings:
ecmascript: 7
parserOptions:
ecmaFeatures:
modules: true
destructuring: true
experimentalObjectRestSpread: true
classes: true
forOf: true
blockBindings: true
arrowFunctions: true
env:
browser: true
rules:
# -------------
# General Rules
# -------------
arrow-body-style: 0
prefer-arrow-callback: 0
arrow-parens: 0
no-param-reassign: 0
no-new: 0
consistent-return: 0
key-spacing: 0
no-multi-spaces: 0
no-underscore-dangle: 0
one-var: 0
global-require: 0
class-methods-use-this: 0
comma-dangle: ["error", {
"arrays": "always-multiline",
"objects": "always-multiline",
"imports": "always-multiline",
"exports": "always-multiline",
"functions": "never"
}]
func-names: 0
function-paren-newline: 0
indent: 2
new-cap: 0
no-plusplus: 0
no-return-assign: 0
quote-props: 0
template-curly-spacing: 0
no-unused-expressions: 0
# ------------
# Import Rules
# ------------
import/extensions: 0
import/no-extraneous-dependencies: 0
import/no-unresolved: 0
import/prefer-default-export: 0

+ 35
- 0
.github/workflows/merge.yml View File

@ -0,0 +1,35 @@
name: Merge checks
on:
pull_request:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20.x]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Build
run: |
npm install
npm run build
- name: Get version
run: echo "::set-output name=version::v$(./ci/getVersion.sh)"
id: version
- name: Verify version
run: |
./ci/verifyVersion.sh ${{ steps.version.outputs.version }}

+ 50
- 0
.github/workflows/release.yml View File

@ -0,0 +1,50 @@
name: NodeJS with Webpack
on:
push:
branches: [ "master" ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20.x]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Build
run: |
npm install
npm run release:minified
zip -r -j static_minified.zip dist/*
npm run release:unminified
zip -r -j static_unminified.zip dist/*
- name: Get version
run: echo "::set-output name=version::v$(./ci/getVersion.sh)"
id: version
- name: Verify version
run: |
./ci/verifyVersion.sh ${{ steps.version.outputs.version }}
# Verify changelog has entry with new version
- name: Release
uses: softprops/action-gh-release@v1
with:
name: ${{ steps.version.outputs.version }}
tag_name: ${{ steps.version.outputs.version }}
files: |
static_minified.zip
static_unminified.zip
fail_on_unmatched_files: true
prerelease: false
draft: false

+ 1
- 1
.gitignore View File

@ -23,10 +23,10 @@ logs
npm-debug.log* npm-debug.log*
node_modules node_modules
yarn.lock yarn.lock
package-lock.json
# ---------------------------- # ----------------------------
# Project Folders # Project Folders
# ---------------------------- # ----------------------------
build/ build/
dist/

+ 1
- 0
.nvmrc View File

@ -0,0 +1 @@
20

+ 9
- 0
.stylelintrc.json View File

@ -0,0 +1,9 @@
{
"extends": "stylelint-config-standard",
"rules": {
"at-rule-no-unknown": null,
"at-rule-empty-line-before": null,
"selector-list-comma-newline-after": null,
"block-opening-brace-space-before": null
}
}

+ 0
- 7
.stylelintrc.yml View File

@ -1,7 +0,0 @@
---
extends: stylelint-config-standard
rules:
at-rule-no-unknown: null
at-rule-empty-line-before: null
selector-list-comma-newline-after: null
block-opening-brace-space-before: null

+ 16
- 2
CHANGELOG.md View File

@ -1,5 +1,19 @@
### Changelog
# Changelog
#### 1.0.0
## [2.1.0]
- Upgraded all dependencies
## [2.0.0]
### Changed
- Upgrade to Bootstrap 5
## [1.1.0]
### Changed
- Upgrade to webpack 5
## [1.0.0]
### Added
- Intial release - Intial release

+ 7
- 5
README.md View File

@ -1,5 +1,5 @@
# Adminator HTML5 Admin Template
**Adminator** is a responsive Bootstrap 4 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
# Adminator Bootstrap 5 Admin Template
**Adminator** is a responsive Bootstrap 5 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
# Preview # Preview
@ -13,6 +13,7 @@
- [Getting Started](#getting-started) - [Getting Started](#getting-started)
- [Prerequisites](#prerequisites) - [Prerequisites](#prerequisites)
- [Installing & Local Development](#installing--local-development) - [Installing & Local Development](#installing--local-development)
- [Adminator for other platforms and frameworks](#adminator-for-other-platforms-and-frameworks)
- [Files/Folder Structure](#filesfolders-structure) - [Files/Folder Structure](#filesfolders-structure)
- [Deployment](#deployment) - [Deployment](#deployment)
- [Built With](#built-with) - [Built With](#built-with)
@ -22,10 +23,10 @@
## Getting Started ## Getting Started
In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below.
In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below. Prebuilt static assets can be found under [releases](https://github.com/puikinsh/Adminator-admin-dashboard/releases).
#### Prerequisites #### Prerequisites
- Node.js
- Node.js 14+
- Yarn or NPM - Yarn or NPM
- Git - Git
- libpng-dev *linux only* - libpng-dev *linux only*
@ -39,7 +40,8 @@ Start by typing the following commands in your terminal in order to get **Admina
> npm install > npm install
> npm run dev > npm run dev
``` ```
## Adminator for other platforms and frameworks
* [Adminator right to left](https://github.com/mortezakarimi/Adminator-admin-dashboard-rtl) Adminator modified to work with right to left languages like Persian and Arabic
## Files/Folders Structure ## Files/Folders Structure
Here is a brief explanation of the template folder structure and some of its main files usage: Here is a brief explanation of the template folder structure and some of its main files usage:


+ 11
- 1
browserslist View File

@ -1 +1,11 @@
Last 3 versions
# https://github.com/browserslist/browserslist#readme
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11

+ 1
- 0
ci/getVersion.sh View File

@ -0,0 +1 @@
echo $(sed 's/.*"version": "\(.*\)".*/\1/;t;d' ./package.json)

+ 9
- 0
ci/verifyVersion.sh View File

@ -0,0 +1,9 @@
VERSION=$1
TAG_EXISTS=$(git ls-remote --tags origin $VERSION | wc -l)
if [ $TAG_EXISTS -eq "1" ]; then
echo "The tag '$VERSION' already exists. Please update version in package.json.";
exit 1;
fi
echo "The tag '$VERSION' does not exist - success.";

+ 66
- 66
forms.php View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -325,7 +325,7 @@
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm"> <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -342,7 +342,7 @@
</li> </li>
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -359,7 +359,7 @@
</li> </li>
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -378,14 +378,14 @@
</li> </li>
<li class="pX-20 pY-15 ta-c bdT"> <li class="pX-20 pY-15 ta-c bdT">
<span> <span>
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs ms-10"></i></a>
</span> </span>
</li> </li>
</ul> </ul>
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -398,7 +398,7 @@
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm"> <ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -420,7 +420,7 @@
</li> </li>
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -442,7 +442,7 @@
</li> </li>
<li> <li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'> <a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<div class="peer me-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt=""> <img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div> </div>
<div class="peer peer-greed"> <div class="peer peer-greed">
@ -466,14 +466,14 @@
</li> </li>
<li class="pX-20 pY-15 ta-c bdT"> <li class="pX-20 pY-15 ta-c bdT">
<span> <span>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right ms-10"></i></a>
</span> </span>
</li> </li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<div class="peer mR-10">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer me-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
<div class="peer"> <div class="peer">
@ -483,26 +483,26 @@
<ul class="dropdown-menu fsz-sm"> <ul class="dropdown-menu fsz-sm">
<li> <li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-settings mR-10"></i>
<i class="ti-settings me-10"></i>
<span>Setting</span> <span>Setting</span>
</a> </a>
</li> </li>
<li> <li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-user mR-10"></i>
<i class="ti-user me-10"></i>
<span>Profile</span> <span>Profile</span>
</a> </a>
</li> </li>
<li> <li>
<a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-email mR-10"></i>
<i class="ti-email me-10"></i>
<span>Messages</span> <span>Messages</span>
</a> </a>
</li> </li>
<li role="separator" class="divider"></li> <li role="separator" class="divider"></li>
<li> <li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-power-off mR-10"></i>
<i class="ti-power-off me-10"></i>
<span>Logout</span> <span>Logout</span>
</a> </a>
</li> </li>
@ -522,18 +522,18 @@
<h6 class="c-grey-900">Basic Form</h6> <h6 class="c-grey-900">Basic Form</h6>
<div class="mT-30"> <div class="mT-30">
<form action="" method="POST"> <form action="" method="POST">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<div class="mb-3">
<label class="form-label" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <input type="email" class="form-control" name="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
</div> </div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="mb-3">
<label class="form-label" for="exampleInputPassword1">Password</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div> </div>
<div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15"> <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
@ -564,47 +564,47 @@
<h6 class="c-grey-900">Complex Form Layout</h6> <h6 class="c-grey-900">Complex Form Layout</h6>
<div class="mT-30"> <div class="mT-30">
<form action="" method="POST"> <form action="" method="POST">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<div class="row">
<div class="mb-3 col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email"> <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div> </div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<div class="mb-3 col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password"> <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div> </div>
</div> </div>
<div class="form-group">
<label for="inputAddress">Address</label>
<div class="mb-3">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div> </div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<div class="mb-3">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div> </div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<div class="row">
<div class="mb-3 col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity"> <input type="text" class="form-control" id="inputCity">
</div> </div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<div class="mb-3 col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-control"> <select id="inputState" class="form-control">
<option selected>Choose...</option> <option selected>Choose...</option>
<option>...</option> <option>...</option>
</select> </select>
</div> </div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<div class="mb-3 col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip"> <input type="text" class="form-control" id="inputZip">
</div> </div>
</div> </div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="fw-500">Birthdate</label>
<div class="timepicker-input input-icon form-group">
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label" class="fw-500">Birthdate</label>
<div class="timepicker-input input-icon mb-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<div class="input-group-text bgc-white bd bdwR-0">
<i class="ti-calendar"></i> <i class="ti-calendar"></i>
</div> </div>
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker"> <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
@ -612,10 +612,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group">
<div class="mb-3">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
<label for="inputCall2" class=" peers peer-greed js-sb ai-c">
<label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
@ -630,36 +630,36 @@
<h6 class="c-grey-900">Horizontal Form</h6> <h6 class="c-grey-900">Horizontal Form</h6>
<div class="mT-30"> <div class="mT-30">
<form> <form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="mb-3 row">
<label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div> </div>
</div> </div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="mb-3 row">
<label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div> </div>
</div> </div>
<fieldset class="form-group">
<fieldset class="mb-3">
<div class="row"> <div class="row">
<legend class="col-form-legend col-sm-2">Radios</legend> <legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-check-label form-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great Option one is this and that&mdash;be sure to include why it's great
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-check-label form-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
Option two can be something else and selecting it will deselect option one Option two can be something else and selecting it will deselect option one
</label> </label>
</div> </div>
<div class="form-check disabled"> <div class="form-check disabled">
<label class="form-check-label">
<label class="form-check-label form-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
Option three is disabled Option three is disabled
</label> </label>
@ -667,17 +667,17 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
<div class="form-group row">
<div class="mb-3 row">
<div class="col-sm-2">Checkbox</div> <div class="col-sm-2">Checkbox</div>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-check-label form-label">
<input class="form-check-input" type="checkbox"> Check me out <input class="form-check-input" type="checkbox"> Check me out
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row">
<div class="mb-3 row">
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button> <button type="submit" class="btn btn-primary">Sign in</button>
</div> </div>
@ -692,18 +692,18 @@
<div class="mT-30"> <div class="mT-30">
<form> <form>
<fieldset disabled> <fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div> </div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<div class="mb-3">
<label for="disabledSelect" class="form-label">Disabled select menu</label>
<select id="disabledSelect" class="form-control"> <select id="disabledSelect" class="form-control">
<option>Disabled select</option> <option>Disabled select</option>
</select> </select>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-check-label" class="form-label">
<input class="form-check-input" type="checkbox"> Can't check this <input class="form-check-input" type="checkbox"> Can't check this
</label> </label>
</div> </div>
@ -720,31 +720,31 @@
<form class="container" id="needs-validation" novalidate> <form class="container" id="needs-validation" novalidate>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required> <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
</div> </div>
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required> <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required> <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid city. Please provide a valid city.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<label for="validationCustom04" class="form-label">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required> <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid state. Please provide a valid state.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required> <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid zip. Please provide a valid zip.


+ 20946
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 60
- 49
package.json View File

@ -1,69 +1,80 @@
{ {
"name": "adminator", "name": "adminator",
"version": "1.0.0",
"version": "2.1.0",
"private": true, "private": true,
"description": "HTML Admin Template", "description": "HTML Admin Template",
"scripts": { "scripts": {
"start": "webpack-dev-server",
"dev": "webpack-dashboard -t 'Project' -- webpack-dev-server",
"clean": "shx rm -rf ./build",
"build": "npm run clean && cross-env NODE_ENV=\"production\" webpack",
"preview": "cross-env NODE_ENV=\"production\" webpack-dev-server",
"start": "webpack server",
"dev": "webpack-dashboard -t 'Project' -- webpack server",
"clean": "shx rm -rf ./dist",
"build": "npm run clean && cross-env webpack",
"release:minified": "npm run clean && NODE_ENV=production MINIFY=true cross-env webpack",
"release:unminified": "npm run clean && NODE_ENV=production MINIFY=false cross-env webpack",
"preview": "cross-env webpack server",
"lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx", "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
"lint:scss": "stylelint ./src/**/*.scss --syntax scss", "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
"lint": "npm run lint:js && npm run lint:scss" "lint": "npm run lint:js && npm run lint:scss"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"@babel/core": "^7.24.5",
"@babel/eslint-parser": "^7.24.5",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
"@babel/plugin-transform-runtime": "^7.24.3",
"@babel/preset-env": "^7.24.5",
"@babel/runtime": "^7.24.5",
"babel-core": "^6.26.3",
"babel-loader": "^9.1.3",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1", "babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"case-sensitive-paths-webpack-plugin": "^2.1.1",
"copy-webpack-plugin": "^4.2.0",
"cross-env": "^5.1.0",
"css-loader": "^0.28.7",
"eslint": "^4.9.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "2.7.0",
"extract-text-webpack-plugin": "^3.0.1",
"html-webpack-plugin": "^2.30.1",
"imagemin-webpack-plugin": "^1.6.1",
"node-sass": "^4.13.0",
"postcss-cssnext": "^3.0.2",
"postcss-loader": "^2.0.8",
"sass-loader": "^6.0.6",
"shx": "^0.2.2",
"style-loader": "^0.19.0",
"stylelint": "^8.2.0",
"stylelint-config-standard": "^17.0.0",
"webpack": "^3.8.1",
"webpack-dashboard": "^1.0.0",
"webpack-dev-server": "^2.9.3"
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"copy-webpack-plugin": "^12.0.2",
"cross-env": "^7.0.3",
"css-loader": "^7.1.1",
"css-minimizer-webpack-plugin": "^7.0.0",
"eslint": "^8.55.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.29.1",
"html-webpack-plugin": "^5.6.0",
"imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^2.9.0",
"postcss": "^8.4.38",
"postcss-loader": "^8.1.1",
"postcss-preset-env": "^9.5.13",
"sass": "^1.77.1",
"sass-loader": "^14.2.1",
"shx": "^0.3.3",
"style-loader": "^4.0.0",
"stylelint": "^16.5.0",
"stylelint-config-standard": "^36.0.0",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-dashboard": "^3.3.1",
"webpack-dev-server": "^5.0.4"
}, },
"dependencies": { "dependencies": {
"@fullcalendar/core": "^6.1.11",
"@fullcalendar/daygrid": "^6.1.11",
"@fullcalendar/interaction": "^6.1.11",
"@fullcalendar/list": "^6.1.11",
"@fullcalendar/timegrid": "^6.1.11",
"@popperjs/core": "^2.11.6",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"bootstrap": "^4.0.0",
"bootstrap-datepicker": "^1.7.1",
"brand-colors": "^2.0.1",
"chart.js": "^2.9.2",
"datatables": "^1.10.13",
"bootstrap": "^5.3.3",
"bootstrap-datepicker": "^1.9.0",
"brand-colors": "^2.1.1",
"chart.js": "^4.4.2",
"datatables": "^1.10.18",
"easy-pie-chart": "^2.1.7", "easy-pie-chart": "^2.1.7",
"file-loader": "^1.1.5",
"fullcalendar": "^3.6.2",
"jquery": "^3.2.1",
"file-loader": "^6.2.0",
"jquery": "^3.6.0",
"jquery-sparkline": "^2.4.0", "jquery-sparkline": "^2.4.0",
"jvectormap": "^2.0.4", "jvectormap": "^2.0.4",
"load-google-maps-api": "^1.0.0",
"lodash": "^4.17.4",
"masonry-layout": "^4.2.0",
"moment": "^2.19.1",
"perfect-scrollbar": "^1.1.0",
"popper.js": "^1.12.6",
"load-google-maps-api": "^2.0.2",
"lodash": "^4.17.21",
"masonry-layout": "^4.2.2",
"moment": "^2.30.1",
"perfect-scrollbar": "^1.5.1",
"skycons": "^1.0.0" "skycons": "^1.0.0"
} }
} }

+ 3
- 2
src/assets/scripts/charts/chartJS/index.js View File

@ -1,4 +1,4 @@
import Chart from 'chart.js';
import Chart from 'chart.js/auto';
import { COLORS } from '../../constants/colors'; import { COLORS } from '../../constants/colors';
export default (function () { export default (function () {
@ -112,7 +112,8 @@ export default (function () {
if (scatterChartBox) { if (scatterChartBox) {
const scatterCtx = scatterChartBox.getContext('2d'); const scatterCtx = scatterChartBox.getContext('2d');
Chart.Scatter(scatterCtx, {
new Chart(scatterCtx, {
type: 'scatter',
data: { data: {
datasets: [{ datasets: [{
label : 'My First dataset', label : 'My First dataset',


+ 80
- 54
src/assets/scripts/fullcalendar/index.js View File

@ -1,59 +1,85 @@
import * as $ from 'jquery';
import 'fullcalendar/dist/fullcalendar.min.js';
import 'fullcalendar/dist/fullcalendar.min.css';
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
export default (function () {
const date = new Date();
const d = date.getDate();
const m = date.getMonth();
const y = date.getFullYear();
document.addEventListener('DOMContentLoaded', function () {
const calendarEl = document.getElementById('calendar');
const events = [{
title : 'All Day Event',
start : new Date(y, m, 1),
desc : 'Meetings',
bullet : 'success',
}, {
title : 'Long Event',
start : new Date(y, m, d - 5),
end : new Date(y, m, d - 2),
desc : 'Hangouts',
bullet : 'success',
}, {
title : 'Repeating Event',
start : new Date(y, m, d - 3, 16, 0),
allDay : false,
desc : 'Product Checkup',
bullet : 'warning',
}, {
title : 'Repeating Event',
start : new Date(y, m, d + 4, 16, 0),
allDay : false,
desc : 'Conference',
bullet : 'danger',
}, {
title : 'Birthday Party',
start : new Date(y, m, d + 1, 19, 0),
end : new Date(y, m, d + 1, 22, 30),
allDay : false,
desc : 'Gathering',
}, {
title : 'Click for Google',
start : new Date(y, m, 28),
end : new Date(y, m, 29),
url : 'http ://google.com/',
desc : 'Google',
bullet : 'success',
}];
// element found in dom ?
if (calendarEl == null) {
return;
}
$('#full-calendar').fullCalendar({
events,
height : 800,
editable : true,
header: {
left : 'month,agendaWeek,agendaDay',
center : 'title',
right : 'today prev,next',
const calendar = new Calendar(calendarEl, {
plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
}, },
initialDate: '2024-01-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2024-01-01',
},
{
title: 'Long Event',
start: '2024-01-07',
end: '2024-01-10',
},
{
groupId: 999,
title: 'Repeating Event',
start: '2024-01-09T16:00:00',
},
{
groupId: 999,
title: 'Repeating Event',
start: '2024-01-16T16:00:00',
},
{
title: 'Conference',
start: '2024-01-11',
end: '2024-01-13',
},
{
title: 'Meeting',
start: '2024-01-12T10:30:00',
end: '2024-01-12T12:30:00',
},
{
title: 'Lunch',
start: '2024-01-12T12:00:00',
},
{
title: 'Meeting',
start: '2024-01-12T14:30:00',
},
{
title: 'Happy Hour',
start: '2024-01-12T17:30:00',
},
{
title: 'Dinner',
start: '2024-01-12T20:00:00',
},
{
title: 'Birthday Party',
start: '2024-01-13T07:00:00',
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2024-01-28',
},
],
}); });
}())
calendar.render();
});

+ 4
- 2
src/assets/scripts/index.js View File

@ -1,5 +1,8 @@
import '../styles/index.scss';
// import "@popperjs/core";
import bootstrap from 'bootstrap';
import '../styles/index.scss';
import './fullcalendar';
import './masonry'; import './masonry';
import './charts'; import './charts';
import './popover'; import './popover';
@ -12,6 +15,5 @@ import './chat';
import './datatable'; import './datatable';
import './datepicker'; import './datepicker';
import './email'; import './email';
import './fullcalendar';
import './googleMaps'; import './googleMaps';
import './utils'; import './utils';

+ 10
- 4
src/assets/scripts/popover/index.js View File

@ -1,16 +1,22 @@
import * as $ from 'jquery';
import 'bootstrap';
// import * as $ from 'jquery';
import * as bootstrap from 'bootstrap'
export default (function () { export default (function () {
// ------------------------------------------------------ // ------------------------------------------------------
// @Popover // @Popover
// ------------------------------------------------------ // ------------------------------------------------------
$('[data-toggle="popover"]').popover();
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
// ------------------------------------------------------ // ------------------------------------------------------
// @Tooltips // @Tooltips
// ------------------------------------------------------ // ------------------------------------------------------
$('[data-toggle="tooltip"]').tooltip();
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
}()); }());

+ 1
- 1
src/assets/styles/index.scss View File

@ -1,6 +1,6 @@
@import 'spec/settings/index'; @import 'spec/settings/index';
@import 'spec/tools/index'; @import 'spec/tools/index';
@import "~bootstrap/scss/bootstrap";
@import "bootstrap/scss/bootstrap";
@import 'spec/index'; @import 'spec/index';
@import 'vendor/index'; @import 'vendor/index';

+ 2
- 2
src/assets/styles/spec/components/topbar.scss View File

@ -93,10 +93,10 @@
} }
.dropdown-menu { .dropdown-menu {
display: block;
// display: block;
margin: 0; margin: 0;
transform-origin: top right; transform-origin: top right;
transform: scale(0, 0);
// transform: scale(0, 0);
transition: transform 0.15s ease-out; transition: transform 0.15s ease-out;
.divider { .divider {


+ 18
- 0
src/assets/styles/spec/generic/base.scss View File

@ -4,6 +4,7 @@ html, html a, body {
a { a {
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
text-decoration: none;
} }
body { body {
@ -77,3 +78,20 @@ a {
hr { hr {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
a.btn {
color:#fff;
}
a.btn:hover {
color:#fff;
}
.btn-color {
color:#fff;
}
.btn-color:hover {
color:#fff;
}

+ 1
- 1
src/assets/styles/spec/settings/index.scss View File

@ -1,6 +1,6 @@
@import 'breakpoints'; @import 'breakpoints';
@import 'fonts'; @import 'fonts';
@import '~brand-colors/dist/latest/scss/brand-colors.latest.scss';
@import 'brand-colors/dist/latest/scss/brand-colors.latest.scss';
@import 'materialColors'; @import 'materialColors';
@import 'baseColors'; @import 'baseColors';
@import 'borders'; @import 'borders';

+ 1
- 1
src/assets/styles/spec/settings/materialColors.scss View File

@ -547,4 +547,4 @@ $md-colors: (
blue-grey-700 : #455a64, blue-grey-700 : #455a64,
blue-grey-800 : #37474f, blue-grey-800 : #37474f,
blue-grey-900 : #263238, blue-grey-900 : #263238,
) !global;
);

+ 10
- 10
src/assets/styles/spec/utils/colors.scss View File

@ -10,11 +10,11 @@
// --------------------------------------------------------- // ---------------------------------------------------------
@each $item, $color in $md-colors { @each $item, $color in $md-colors {
.c-#{$item}, .cH-#{$item}:hover { color: $color !important; }
.bgc-#{$item}, .bgcH-#{$item}:hover { background-color: $color !important; }
.bdc-#{$item}, .bdcH-#{$item}:hover { border-color: $color !important; }
.fill-#{$item}, .fillH-#{$item}:hover { fill: $color !important; }
.str-#{$item}, .strH-#{$item}:hover { stroke: $color !important; }
.c-#{"" + $item}, .cH-#{"" + $item}:hover { color: $color !important; }
.bgc-#{"" + $item}, .bgcH-#{"" + $item}:hover { background-color: $color !important; }
.bdc-#{"" + $item}, .bdcH-#{"" + $item}:hover { border-color: $color !important; }
.fill-#{"" + $item}, .fillH-#{"" + $item}:hover { fill: $color !important; }
.str-#{"" + $item}, .strH-#{"" + $item}:hover { stroke: $color !important; }
} }
// --------------------------------------------------------- // ---------------------------------------------------------
@ -22,9 +22,9 @@
// --------------------------------------------------------- // ---------------------------------------------------------
@each $item, $color in $grey-colors-alt { @each $item, $color in $grey-colors-alt {
.c-#{$item}, .cH-#{$item}:hover { color: $color !important; }
.bgc-#{$item}, .bgcH-#{$item}:hover { background-color: $color !important; }
.bdc-#{$item}, .bdcH-#{$item}:hover { border-color: $color !important; }
.fill-#{$item}, .fillH-#{$item}:hover { fill: $color !important; }
.str-#{$item}, .strH-#{$item}:hover { stroke: $color !important; }
.c-#{"" + $item}, .cH-#{"" + $item}:hover { color: $color !important; }
.bgc-#{"" + $item}, .bgcH-#{"" + $item}:hover { background-color: $color !important; }
.bdc-#{"" + $item}, .bdcH-#{"" + $item}:hover { border-color: $color !important; }
.fill-#{"" + $item}, .fillH-#{"" + $item}:hover { fill: $color !important; }
.str-#{"" + $item}, .strH-#{"" + $item}:hover { stroke: $color !important; }
} }

+ 62
- 60
src/assets/styles/spec/utils/layout/utils/gap.scss View File

@ -1,3 +1,5 @@
@use "sass:math";
// --------------------------------------------------------- // ---------------------------------------------------------
// @TOC // @TOC
// --------------------------------------------------------- // ---------------------------------------------------------
@ -29,60 +31,60 @@ $responsive: true;
@for $i from 0 through 4 { @for $i from 0 through 4 {
.gapX-#{$i} { .gapX-#{$i} {
margin-left: #{($i / -2)}px !important;
margin-right: #{($i / -2)}px !important;
margin-left: #{math.div($i, -2)}px !important;
margin-right: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-left: #{($i / 2)}px !important;
padding-right: #{($i / 2)}px !important;
padding-left: #{math.div($i, 2)}px !important;
padding-right: #{math.div($i, 2)}px !important;
} }
} }
.gapY-#{$i} { .gapY-#{$i} {
margin-top: #{($i / -2)}px !important;
margin-bottom: #{($i / -2)}px !important;
margin-top: #{math.div($i, -2)}px !important;
margin-bottom: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-top: #{($i / 2)}px !important;
padding-bottom: #{($i / 2)}px !important;
padding-top: #{math.div($i, 2)}px !important;
padding-bottom: #{math.div($i, 2)}px !important;
} }
} }
.gap-#{$i} { .gap-#{$i} {
margin: #{($i / -2)}px !important;
margin: #{math.div($i, -2)}px !important;
& > * { & > * {
padding: #{($i / 2)}px !important;
padding: #{math.div($i, 2)}px !important;
} }
} }
@if ($responsive == true) { @if ($responsive == true) {
@include generateResponsive() { @include generateResponsive() {
.gapX-#{$i}\@#{$breakpointAlias} { .gapX-#{$i}\@#{$breakpointAlias} {
margin-left: #{($i / -2)}px !important;
margin-right: #{($i / -2)}px !important;
margin-left: #{math.div($i, -2)}px !important;
margin-right: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-left: #{($i / 2)}px !important;
padding-right: #{($i / 2)}px !important;
padding-left: #{math.div($i, 2)}px !important;
padding-right: #{math.div($i, 2)}px !important;
} }
} }
.gapY-#{$i}\@#{$breakpointAlias} { .gapY-#{$i}\@#{$breakpointAlias} {
margin-top: #{($i / -2)}px !important;
margin-bottom: #{($i / -2)}px !important;
margin-top: #{math.div($i, -2)}px !important;
margin-bottom: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-top: #{($i / 2)}px !important;
padding-bottom: #{($i / 2)}px !important;
padding-top: #{math.div($i, 2)}px !important;
padding-bottom: #{math.div($i, 2)}px !important;
} }
} }
.gap-#{$i}\@#{$breakpointAlias} { .gap-#{$i}\@#{$breakpointAlias} {
margin: #{($i / -2)}px !important;
margin: #{math.div($i, -2)}px !important;
& > * { & > * {
padding: #{($i / 2)}px !important;
padding: #{math.div($i, 2)}px !important;
} }
} }
} }
@ -96,60 +98,60 @@ $responsive: true;
@for $i from 5 through 35 { @for $i from 5 through 35 {
@if $i % 5 == 0 { @if $i % 5 == 0 {
.gapX-#{$i} { .gapX-#{$i} {
margin-left: #{($i / -2)}px !important;
margin-right: #{($i / -2)}px !important;
margin-left: #{math.div($i, -2)}px !important;
margin-right: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-left: #{($i / 2)}px !important;
padding-right: #{($i / 2)}px !important;
padding-left: #{math.div($i, 2)}px !important;
padding-right: #{math.div($i, 2)}px !important;
} }
} }
.gapY-#{$i} { .gapY-#{$i} {
margin-top: #{($i / -2)}px !important;
margin-bottom: #{($i / -2)}px !important;
margin-top: #{math.div($i, -2)}px !important;
margin-bottom: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-top: #{($i / 2)}px !important;
padding-bottom: #{($i / 2)}px !important;
padding-top: #{math.div($i, 2)}px !important;
padding-bottom: #{math.div($i, 2)}px !important;
} }
} }
.gap-#{$i} { .gap-#{$i} {
margin: #{($i / -2)}px !important;
margin: #{math.div($i, -2)}px !important;
& > * { & > * {
padding: #{($i / 2)}px !important;
padding: #{math.div($i, 2)}px !important;
} }
} }
@if ($responsive == true) { @if ($responsive == true) {
@include generateResponsive() { @include generateResponsive() {
.gapX-#{$i}\@#{$breakpointAlias} { .gapX-#{$i}\@#{$breakpointAlias} {
margin-left: #{($i / -2)}px !important;
margin-right: #{($i / -2)}px !important;
margin-left: #{math.div($i, -2)}px !important;
margin-right: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-left: #{($i / 2)}px !important;
padding-right: #{($i / 2)}px !important;
padding-left: #{math.div($i, 2)}px !important;
padding-right: #{math.div($i, 2)}px !important;
} }
} }
.gapY-#{$i}\@#{$breakpointAlias} { .gapY-#{$i}\@#{$breakpointAlias} {
margin-top: #{($i / -2)}px !important;
margin-bottom: #{($i / -2)}px !important;
margin-top: #{math.div($i, -2)}px !important;
margin-bottom: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-top: #{($i / 2)}px !important;
padding-bottom: #{($i / 2)}px !important;
padding-top: #{math.div($i, 2)}px !important;
padding-bottom: #{math.div($i, 2)}px !important;
} }
} }
.gap-#{$i}\@#{$breakpointAlias} { .gap-#{$i}\@#{$breakpointAlias} {
margin: #{($i / -2)}px !important;
margin: #{math.div($i, -2)}px !important;
& > * { & > * {
padding: #{($i / 2)}px !important;
padding: #{math.div($i, 2)}px !important;
} }
} }
} }
@ -164,60 +166,60 @@ $responsive: true;
@for $i from 40 through 160 { @for $i from 40 through 160 {
@if $i % 10 == 0 { @if $i % 10 == 0 {
.gapX-#{$i} { .gapX-#{$i} {
margin-left: #{($i / -2)}px !important;
margin-right: #{($i / -2)}px !important;
margin-left: #{math.div($i, -2)}px !important;
margin-right: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-left: #{($i / 2)}px !important;
padding-right: #{($i / 2)}px !important;
padding-left: #{math.div($i, 2)}px !important;
padding-right: #{math.div($i, 2)}px !important;
} }
} }
.gapY-#{$i} { .gapY-#{$i} {
margin-top: #{($i / -2)}px !important;
margin-bottom: #{($i / -2)}px !important;
margin-top: #{math.div($i, -2)}px !important;
margin-bottom: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-top: #{($i / 2)}px !important;
padding-bottom: #{($i / 2)}px !important;
padding-top: #{math.div($i, 2)}px !important;
padding-bottom: #{math.div($i, 2)}px !important;
} }
} }
.gap-#{$i} { .gap-#{$i} {
margin: #{($i / -2)}px !important;
margin: #{math.div($i, -2)}px !important;
& > * { & > * {
padding: #{($i / 2)}px !important;
padding: #{math.div($i, 2)}px !important;
} }
} }
@if ($responsive == true) { @if ($responsive == true) {
@include generateResponsive() { @include generateResponsive() {
.gapX-#{$i}\@#{$breakpointAlias} { .gapX-#{$i}\@#{$breakpointAlias} {
margin-left: #{($i / -2)}px !important;
margin-right: #{($i / -2)}px !important;
margin-left: #{math.div($i, -2)}px !important;
margin-right: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-left: #{($i / 2)}px !important;
padding-right: #{($i / 2)}px !important;
padding-left: #{math.div($i, 2)}px !important;
padding-right: #{math.div($i, 2)}px !important;
} }
} }
.gapY-#{$i}\@#{$breakpointAlias} { .gapY-#{$i}\@#{$breakpointAlias} {
margin-top: #{($i / -2)}px !important;
margin-bottom: #{($i / -2)}px !important;
margin-top: #{math.div($i, -2)}px !important;
margin-bottom: #{math.div($i, -2)}px !important;
& > * { & > * {
padding-top: #{($i / 2)}px !important;
padding-bottom: #{($i / 2)}px !important;
padding-top: #{math.div($i, 2)}px !important;
padding-bottom: #{math.div($i, 2)}px !important;
} }
} }
.gap-#{$i}\@#{$breakpointAlias} { .gap-#{$i}\@#{$breakpointAlias} {
margin: #{($i / -2)}px !important;
margin: #{math.div($i, -2)}px !important;
& > * { & > * {
padding: #{($i / 2)}px !important;
padding: #{math.div($i, 2)}px !important;
} }
} }
} }


+ 1
- 1
src/assets/styles/vendor/index.scss View File

@ -1,4 +1,4 @@
@import '~perfect-scrollbar/css/perfect-scrollbar';
@import 'perfect-scrollbar/css/perfect-scrollbar';
@import 'themify-icons'; @import 'themify-icons';
@import 'font-awesome'; @import 'font-awesome';
@import 'perfectScrollbar'; @import 'perfectScrollbar';


+ 8
- 8
src/basic-table.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -466,13 +466,13 @@
</li> </li>
<li class="pX-20 pY-15 ta-c bdT"> <li class="pX-20 pY-15 ta-c bdT">
<span> <span>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right ms-10"></i></a>
</span> </span>
</li> </li>
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -521,7 +521,7 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="bgc-white bd bdrs-3 p-20 mB-20"> <div class="bgc-white bd bdrs-3 p-20 mB-20">
<h4 class="c-grey-900 mB-20">Simple Table</h4> <h4 class="c-grey-900 mB-20">Simple Table</h4>
<p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 4</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
<p>Using the most basic table markup, here’s how <code class="highlighter-rouge">.table</code>-based tables look in Bootstrap. <strong>All table styles are inherited in Bootstrap 5</strong>, meaning any nested tables will be styled in the same manner as the parent.</p>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -559,9 +559,9 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="bgc-white bd bdrs-3 p-20 mB-20"> <div class="bgc-white bd bdrs-3 p-20 mB-20">
<h4 class="c-grey-900 mB-20">Table head options</h4> <h4 class="c-grey-900 mB-20">Table head options</h4>
<p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.thead-light</code> or <code class="highlighter-rouge">.thead-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
<p>Similar to tables and dark tables, use the modifier classes <code class="highlighter-rouge">.table-light</code> or <code class="highlighter-rouge">.table-dark</code> to make <code class="highlighter-rouge">&lt;thead&gt;</code>s appear light or dark gray.</p>
<table class="table"> <table class="table">
<thead class="thead-dark">
<thead class="table-dark">
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First Name</th> <th scope="col">First Name</th>
@ -717,7 +717,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 8
- 8
src/blank.html View File

@ -176,7 +176,7 @@
<span class="title">Forms</span> <span class="title">Forms</span>
</a> </a>
</li> </li>
<li class="nav-item dropdown">
<li class="nav-item">
<a class="sidebar-link" href="ui.html"> <a class="sidebar-link" href="ui.html">
<span class="icon-holder"> <span class="icon-holder">
<i class="c-pink-500 ti-palette"></i> <i class="c-pink-500 ti-palette"></i>
@ -312,11 +312,11 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="pX-20 pY-15 bdB"> <li class="pX-20 pY-15 bdB">
<i class="ti-bell pR-10"></i> <i class="ti-bell pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Notifications</span> <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
@ -385,11 +385,11 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li class="pX-20 pY-15 bdB"> <li class="pX-20 pY-15 bdB">
<i class="ti-email pR-10"></i> <i class="ti-email pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Emails</span> <span class="fsz-sm fw-600 c-grey-900">Emails</span>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -480,7 +480,7 @@
<span class="fsz-sm c-grey-900">John Doe</span> <span class="fsz-sm c-grey-900">John Doe</span>
</div> </div>
</a> </a>
<ul class="dropdown-menu fsz-sm">
<ul class="dropdown-menu fsz-sm" aria-labelledby="dropdownMenuLink">
<li> <li>
<a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"> <a href="" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700">
<i class="ti-settings mR-10"></i> <i class="ti-settings mR-10"></i>
@ -524,7 +524,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 5
- 5
src/buttons.html View File

@ -262,7 +262,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -335,7 +335,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -422,8 +422,8 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<div class="peer mR-10">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer me-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
<div class="peer"> <div class="peer">
@ -469,7 +469,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 21
- 21
src/calendar.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -529,7 +529,7 @@
</button> </button>
<ul class="m-0 p-0 mT-20"> <ul class="m-0 p-0 mT-20">
<li class="bdB peers ai-c jc-sb fxw-nw"> <li class="bdB peers ai-c jc-sb fxw-nw">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
<a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
<div class="peer mR-15"> <div class="peer mR-15">
<i class="fa fa-fw fa-clock-o c-red-500"></i> <i class="fa fa-fw fa-clock-o c-red-500"></i>
</div> </div>
@ -555,7 +555,7 @@
</div> </div>
</li> </li>
<li class="bdB peers ai-c jc-sb fxw-nw"> <li class="bdB peers ai-c jc-sb fxw-nw">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
<a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
<div class="peer mR-15"> <div class="peer mR-15">
<i class="fa fa-fw fa-clock-o c-blue-500"></i> <i class="fa fa-fw fa-clock-o c-blue-500"></i>
</div> </div>
@ -581,7 +581,7 @@
</div> </div>
</li> </li>
<li class="bdB peers ai-c jc-sb fxw-nw"> <li class="bdB peers ai-c jc-sb fxw-nw">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
<div class="peer mR-15"> <div class="peer mR-15">
<i class="fa fa-fw fa-clock-o c-indigo-500"></i> <i class="fa fa-fw fa-clock-o c-indigo-500"></i>
</div> </div>
@ -607,7 +607,7 @@
</div> </div>
</li> </li>
<li class="bdB peers ai-c jc-sb fxw-nw"> <li class="bdB peers ai-c jc-sb fxw-nw">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-toggle="modal" data-target="#calendar-edit">
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
<div class="peer mR-15"> <div class="peer mR-15">
<i class="fa fa-fw fa-clock-o c-green-500"></i> <i class="fa fa-fw fa-clock-o c-green-500"></i>
</div> </div>
@ -637,7 +637,7 @@
</div> </div>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<div id='full-calendar'></div>
<div id='calendar'></div>
</div> </div>
</div> </div>
<div class="modal fade" id="calendar-edit"> <div class="modal fade" id="calendar-edit">
@ -648,16 +648,16 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form>
<div class="form-group">
<label class="fw-500">Event title</label>
<div class="mb-3">
<label class="form-label fw-500">Event title</label>
<input class="form-control bdc-grey-200"> <input class="form-control bdc-grey-200">
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<label class="fw-500">Start</label>
<div class="timepicker-input input-icon form-group">
<label class="fw-500 form-label">Start</label>
<div class="timepicker-input input-icon mb-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<div class="input-group-text bgc-white bd bdwR-0">
<i class="ti-calendar"></i> <i class="ti-calendar"></i>
</div> </div>
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker"> <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
@ -665,10 +665,10 @@
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label class="fw-500">End</label>
<div class="timepicker-input input-icon form-group">
<label class="fw-500 form-label">End</label>
<div class="timepicker-input input-icon mb-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<div class="input-group-text bgc-white bd bdwR-0">
<i class="ti-calendar"></i> <i class="ti-calendar"></i>
</div> </div>
<input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker"> <input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker">
@ -676,12 +676,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group">
<label class="fw-500">Event title</label>
<div class="mb-3">
<label class="fw-500 form-label">Event title</label>
<textarea class="form-control bdc-grey-200" rows='5'></textarea> <textarea class="form-control bdc-grey-200" rows='5'></textarea>
</div> </div>
<div class="text-right">
<button class="btn btn-primary cur-p" data-dismiss="modal">Done</button>
<div class="text-end">
<button class="btn btn-primary cur-p btn-color" data-dismiss="modal">Done</button>
</div> </div>
</form> </form>
</div> </div>
@ -694,7 +694,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 4
- 4
src/charts.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -643,7 +643,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 5
- 5
src/chat.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -717,7 +717,7 @@
<div class="p-20 bdT bgc-white"> <div class="p-20 bdT bgc-white">
<div class="pos-r"> <div class="pos-r">
<input type="text" class="form-control bdrs-10em m-0" placeholder="Say something..."> <input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
<button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1">
<button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1 btn-color">
<i class="fa fa-paper-plane-o"></i> <i class="fa fa-paper-plane-o"></i>
</button> </button>
</div> </div>
@ -732,7 +732,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 18
- 18
src/compose.html View File

@ -235,7 +235,7 @@
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <li>
<a class='sidebar-link' href="blank.html">Blank</a> <a class='sidebar-link' href="blank.html">Blank</a>
</li>
</li>
<li> <li>
<a class='sidebar-link' href="404.html">404</a> <a class='sidebar-link' href="404.html">404</a>
</li> </li>
@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -520,7 +520,7 @@
<div class="email-side-nav remain-height ov-h"> <div class="email-side-nav remain-height ov-h">
<div class="h-100 layers"> <div class="h-100 layers">
<div class="p-20 bgc-grey-100 layer w-100"> <div class="p-20 bgc-grey-100 layer w-100">
<a href="/compose" class="btn btn-danger btn-block">New Message</a>
<a href="compose.html" class="btn btn-danger d-grid">New Message</a>
</div> </div>
<div class="scrollable pos-r bdT layer w-100 fxg-1"> <div class="scrollable pos-r bdT layer w-100 fxg-1">
<ul class="p-20 nav flex-column"> <ul class="p-20 nav flex-column">
@ -532,7 +532,7 @@
<span>Inbox</span> <span>Inbox</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
<span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
</div> </div>
</div> </div>
</a> </a>
@ -545,7 +545,7 @@
<span>Sent</span> <span>Sent</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-green-50 c-green-700">12</span>
<span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
</div> </div>
</div> </div>
</a> </a>
@ -558,7 +558,7 @@
<span>Important</span> <span>Important</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
<span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
</div> </div>
</div> </div>
</a> </a>
@ -571,7 +571,7 @@
<span>Drafts</span> <span>Drafts</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
<span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
</div> </div>
</div> </div>
</a> </a>
@ -584,7 +584,7 @@
<span>Spam</span> <span>Spam</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-red-50 c-red-700">1</span>
<span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
</div> </div>
</div> </div>
</a> </a>
@ -597,7 +597,7 @@
<span>Trash</span> <span>Trash</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
<span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
</div> </div>
</div> </div>
</a> </a>
@ -617,22 +617,22 @@
<form class="email-compose-body"> <form class="email-compose-body">
<h4 class="c-grey-900 mB-20">Send Message</h4> <h4 class="c-grey-900 mB-20">Send Message</h4>
<div class="send-header"> <div class="send-header">
<div class="form-group">
<div class="mb-3">
<input type="text" class='form-control' placeholder="To"> <input type="text" class='form-control' placeholder="To">
</div> </div>
<div class="form-group">
<div class="mb-3">
<input type="text" class='form-control' placeholder="CC"> <input type="text" class='form-control' placeholder="CC">
</div> </div>
<div class="form-group">
<div class="mb-3">
<input class="form-control" placeholder="Email Subject"> <input class="form-control" placeholder="Email Subject">
</div> </div>
<div class="form-group">
<div class="mb-3">
<textarea name="compose" class="form-control" placeholder="Say Hi..." rows='10'></textarea> <textarea name="compose" class="form-control" placeholder="Say Hi..." rows='10'></textarea>
</div> </div>
</div> </div>
<div id="compose-area"></div> <div id="compose-area"></div>
<div class="text-right mrg-top-30">
<button class="btn btn-danger">Send</button>
<div class="text-end mrg-top-30">
<button class="btn btn-danger btn-color">Send</button>
</div> </div>
</form> </form>
</div> </div>
@ -645,7 +645,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 4
- 4
src/datatable.html View File

@ -313,7 +313,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -386,7 +386,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -473,7 +473,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -1011,7 +1011,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 26
- 26
src/email.html View File

@ -235,7 +235,7 @@
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <li>
<a class='sidebar-link' href="blank.html">Blank</a> <a class='sidebar-link' href="blank.html">Blank</a>
</li>
</li>
<li> <li>
<a class='sidebar-link' href="404.html">404</a> <a class='sidebar-link' href="404.html">404</a>
</li> </li>
@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -520,7 +520,7 @@
<div class="email-side-nav remain-height ov-h"> <div class="email-side-nav remain-height ov-h">
<div class="h-100 layers"> <div class="h-100 layers">
<div class="p-20 bgc-grey-100 layer w-100"> <div class="p-20 bgc-grey-100 layer w-100">
<a href="/compose" class="btn btn-danger btn-block">New Message</a>
<a href="compose.html" class="btn btn-danger d-grid">New Message</a>
</div> </div>
<div class="scrollable pos-r bdT layer w-100 fxg-1"> <div class="scrollable pos-r bdT layer w-100 fxg-1">
<ul class="p-20 nav flex-column"> <ul class="p-20 nav flex-column">
@ -532,7 +532,7 @@
<span>Inbox</span> <span>Inbox</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
<span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
</div> </div>
</div> </div>
</a> </a>
@ -545,7 +545,7 @@
<span>Sent</span> <span>Sent</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-green-50 c-green-700">12</span>
<span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
</div> </div>
</div> </div>
</a> </a>
@ -558,7 +558,7 @@
<span>Important</span> <span>Important</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-blue-50 c-blue-700">3</span>
<span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
</div> </div>
</div> </div>
</a> </a>
@ -571,7 +571,7 @@
<span>Drafts</span> <span>Drafts</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-amber-50 c-amber-700">5</span>
<span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
</div> </div>
</div> </div>
</a> </a>
@ -584,7 +584,7 @@
<span>Spam</span> <span>Spam</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-red-50 c-red-700">1</span>
<span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
</div> </div>
</div> </div>
</a> </a>
@ -597,7 +597,7 @@
<span>Trash</span> <span>Trash</span>
</div> </div>
<div class="peer"> <div class="peer">
<span class="badge badge-pill bgc-red-50 c-red-700">+99</span>
<span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
</div> </div>
</div> </div>
</a> </a>
@ -622,7 +622,7 @@
<i class="ti-tag"></i> <i class="ti-tag"></i>
</button> </button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ti-more-alt"></i> <i class="ti-more-alt"></i>
</button> </button>
<ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1"> <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
@ -671,7 +671,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -691,7 +691,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -711,7 +711,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -731,7 +731,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -751,7 +751,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -771,7 +771,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -791,7 +791,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -811,7 +811,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -831,7 +831,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -851,7 +851,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -871,7 +871,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -891,7 +891,7 @@
<div class="peer mR-10"> <div class="peer mR-10">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c"></label>
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c"></label>
</div> </div>
</div> </div>
<div class="peer peer-greed ov-h"> <div class="peer peer-greed ov-h">
@ -925,7 +925,7 @@
<i class="ti-tag"></i> <i class="ti-tag"></i>
</button> </button>
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button id="btnGroupDrop1" type="button" class="btn cur-p bgc-white no-after dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ti-more-alt"></i> <i class="ti-more-alt"></i>
</button> </button>
<ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1"> <ul class="dropdown-menu fsz-sm" aria-labelledby="btnGroupDrop1">
@ -1014,7 +1014,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 59
- 59
src/forms.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -522,22 +522,22 @@
<h6 class="c-grey-900">Basic Form</h6> <h6 class="c-grey-900">Basic Form</h6>
<div class="mT-30"> <div class="mT-30">
<form> <form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<div class="mb-3">
<label class="form-label" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
</div> </div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="mb-3">
<label class="form-label" for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div> </div>
<div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15"> <div class="checkbox checkbox-circle checkbox-info peers ai-c mB-15">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary btn-color">Submit</button>
</form> </form>
</div> </div>
</div> </div>
@ -547,47 +547,47 @@
<h6 class="c-grey-900">Complex Form Layout</h6> <h6 class="c-grey-900">Complex Form Layout</h6>
<div class="mT-30"> <div class="mT-30">
<form> <form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label" for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email"> <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div> </div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<div class="mb-3 col-md-6">
<label class="form-label" for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password"> <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div> </div>
</div> </div>
<div class="form-group">
<label for="inputAddress">Address</label>
<div class="mb-3">
<label class="form-label" for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div> </div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<div class="mb-3">
<label class="form-label" for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div> </div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label" for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity"> <input type="text" class="form-control" id="inputCity">
</div> </div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<div class="mb-3 col-md-4">
<label class="form-label" for="inputState">State</label>
<select id="inputState" class="form-control"> <select id="inputState" class="form-control">
<option selected>Choose...</option> <option selected>Choose...</option>
<option>...</option> <option>...</option>
</select> </select>
</div> </div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<div class="mb-3 col-md-2">
<label class="form-label" for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip"> <input type="text" class="form-control" id="inputZip">
</div> </div>
</div> </div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="fw-500">Birthdate</label>
<div class="timepicker-input input-icon form-group">
<div class="row">
<div class="mb-3 col-md-6">
<label class="form-label fw-500">Birthdate</label>
<div class="timepicker-input input-icon mb-3">
<div class="input-group"> <div class="input-group">
<div class="input-group-addon bgc-white bd bdwR-0">
<div class="input-group-text bgc-white bd bdwR-0">
<i class="ti-calendar"></i> <i class="ti-calendar"></i>
</div> </div>
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker"> <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
@ -595,15 +595,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group">
<div class="mb-3">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
<label for="inputCall2" class=" peers peer-greed js-sb ai-c">
<label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary">Sign in</button>
<button type="submit" class="btn btn-primary btn-color">Sign in</button>
</form> </form>
</div> </div>
</div> </div>
@ -613,36 +613,36 @@
<h6 class="c-grey-900">Horizontal Form</h6> <h6 class="c-grey-900">Horizontal Form</h6>
<div class="mT-30"> <div class="mT-30">
<form> <form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="mb-3 row">
<label for="inputEmail3" class="form-label col-sm-2 col-form-label">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div> </div>
</div> </div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="mb-3 row">
<label for="inputPassword3" class="form-label col-sm-2 col-form-label">Password</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div> </div>
</div> </div>
<fieldset class="form-group">
<fieldset class="mb-3">
<div class="row"> <div class="row">
<legend class="col-form-legend col-sm-2">Radios</legend> <legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-label form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great Option one is this and that&mdash;be sure to include why it's great
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-label form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
Option two can be something else and selecting it will deselect option one Option two can be something else and selecting it will deselect option one
</label> </label>
</div> </div>
<div class="form-check disabled"> <div class="form-check disabled">
<label class="form-check-label">
<label class="form-label form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
Option three is disabled Option three is disabled
</label> </label>
@ -650,19 +650,19 @@
</div> </div>
</div> </div>
</fieldset> </fieldset>
<div class="form-group row">
<div class="mb-3 row">
<div class="col-sm-2">Checkbox</div> <div class="col-sm-2">Checkbox</div>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-label form-check-label">
<input class="form-check-input" type="checkbox"> Check me out <input class="form-check-input" type="checkbox"> Check me out
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row">
<div class="mb-3 row">
<div class="col-sm-10"> <div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
<button type="submit" class="btn btn-primary btn-color">Sign in</button>
</div> </div>
</div> </div>
</form> </form>
@ -675,22 +675,22 @@
<div class="mT-30"> <div class="mT-30">
<form> <form>
<fieldset disabled> <fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<div class="mb-3">
<label class="form-label" for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div> </div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<div class="mb-3">
<label class="form-label" for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control"> <select id="disabledSelect" class="form-control">
<option>Disabled select</option> <option>Disabled select</option>
</select> </select>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label">
<label class="form-label" class="form-check-label">
<input class="form-check-input" type="checkbox"> Can't check this <input class="form-check-input" type="checkbox"> Can't check this
</label> </label>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary btn-color">Submit</button>
</fieldset> </fieldset>
</form> </form>
</div> </div>
@ -703,38 +703,38 @@
<form class="container" id="needs-validation" novalidate> <form class="container" id="needs-validation" novalidate>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<label class="form-label" for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required> <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
</div> </div>
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<label class="form-label" for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required> <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3"> <div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<label class="form-label" for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required> <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid city. Please provide a valid city.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<label class="form-label" for="validationCustom04">State</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="State" required> <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid state. Please provide a valid state.
</div> </div>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<label class="form-label" for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required> <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
<div class="invalid-feedback"> <div class="invalid-feedback">
Please provide a valid zip. Please provide a valid zip.
</div> </div>
</div> </div>
</div> </div>
<button class="btn btn-primary" type="submit">Submit form</button>
<button class="btn btn-primary btn-color" type="submit">Submit form</button>
</form> </form>
<script> <script>
// Example starter JavaScript for disabling form submissions if there are invalid fields // Example starter JavaScript for disabling form submissions if there are invalid fields
@ -762,7 +762,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 4
- 4
src/google-maps.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -532,7 +532,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 28
- 28
src/index.html View File

@ -311,11 +311,11 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
<ul class="dropdown-menu">
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li class="pX-20 pY-15 bdB"> <li class="pX-20 pY-15 bdB">
<i class="ti-bell pR-10"></i> <i class="ti-bell pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Notifications</span> <span class="fsz-sm fw-600 c-grey-900">Notifications</span>
@ -384,7 +384,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -471,7 +471,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -619,7 +619,7 @@
<small class="fw-600 c-grey-700">Visitors From USA</small> <small class="fw-600 c-grey-700">Visitors From USA</small>
<span class="pull-right c-grey-600 fsz-sm">50%</span> <span class="pull-right c-grey-600 fsz-sm">50%</span>
<div class="progress mT-10"> <div class="progress mT-10">
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="visually-hidden">50% Complete</span></div>
</div> </div>
</div> </div>
<div class="layer w-100 mT-15"> <div class="layer w-100 mT-15">
@ -627,7 +627,7 @@
<small class="fw-600 c-grey-700">Visitors From Europe</small> <small class="fw-600 c-grey-700">Visitors From Europe</small>
<span class="pull-right c-grey-600 fsz-sm">80%</span> <span class="pull-right c-grey-600 fsz-sm">80%</span>
<div class="progress mT-10"> <div class="progress mT-10">
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="visually-hidden">80% Complete</span></div>
</div> </div>
</div> </div>
<div class="layer w-100 mT-15"> <div class="layer w-100 mT-15">
@ -635,7 +635,7 @@
<small class="fw-600 c-grey-700">Visitors From Australia</small> <small class="fw-600 c-grey-700">Visitors From Australia</small>
<span class="pull-right c-grey-600 fsz-sm">40%</span> <span class="pull-right c-grey-600 fsz-sm">40%</span>
<div class="progress mT-10"> <div class="progress mT-10">
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="visually-hidden">40% Complete</span></div>
</div> </div>
</div> </div>
<div class="layer w-100 mT-15"> <div class="layer w-100 mT-15">
@ -643,7 +643,7 @@
<small class="fw-600 c-grey-700">Visitors From India</small> <small class="fw-600 c-grey-700">Visitors From India</small>
<span class="pull-right c-grey-600 fsz-sm">90%</span> <span class="pull-right c-grey-600 fsz-sm">90%</span>
<div class="progress mT-10"> <div class="progress mT-10">
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="visually-hidden">90% Complete</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -720,7 +720,7 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<label for="inputCall1" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Call John for Dinner</span> <span class="peer peer-greed">Call John for Dinner</span>
</label> </label>
</div> </div>
@ -728,10 +728,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall2" name="inputCheckboxesCall" class="peer">
<label for="inputCall2" class=" peers peer-greed js-sb ai-c">
<label for="inputCall2" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Book Boss Flight</span> <span class="peer peer-greed">Book Boss Flight</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-success lh-0 p-10">2 Days</span>
<span class="badge rounded-pill fl-r bg-success lh-0 p-10">2 Days</span>
</span> </span>
</label> </label>
</div> </div>
@ -739,10 +739,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall3" name="inputCheckboxesCall" class="peer">
<label for="inputCall3" class=" peers peer-greed js-sb ai-c">
<label for="inputCall3" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Hit the Gym</span> <span class="peer peer-greed">Hit the Gym</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-danger lh-0 p-10">3 Minutes</span>
<span class="badge rounded-pill fl-r bg-danger lh-0 p-10">3 Minutes</span>
</span> </span>
</label> </label>
</div> </div>
@ -750,10 +750,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall4" name="inputCheckboxesCall" class="peer">
<label for="inputCall4" class=" peers peer-greed js-sb ai-c">
<label for="inputCall4" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Give Purchase Report</span> <span class="peer peer-greed">Give Purchase Report</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-warning lh-0 p-10">not important</span>
<span class="badge rounded-pill fl-r bg-warning lh-0 p-10">not important</span>
</span> </span>
</label> </label>
</div> </div>
@ -761,10 +761,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall5" name="inputCheckboxesCall" class="peer">
<label for="inputCall5" class=" peers peer-greed js-sb ai-c">
<label for="inputCall5" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Watch Game of Thrones Episode</span> <span class="peer peer-greed">Watch Game of Thrones Episode</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-info lh-0 p-10">Tomorrow</span>
<span class="badge rounded-pill fl-r bg-info lh-0 p-10">Tomorrow</span>
</span> </span>
</label> </label>
</div> </div>
@ -772,10 +772,10 @@
<li class="list-group-item bdw-0" data-role="task"> <li class="list-group-item bdw-0" data-role="task">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall6" name="inputCheckboxesCall" class="peer">
<label for="inputCall6" class=" peers peer-greed js-sb ai-c">
<label for="inputCall6" class="form-label peers peer-greed js-sb ai-c">
<span class="peer peer-greed">Give Purchase report</span> <span class="peer peer-greed">Give Purchase report</span>
<span class="peer"> <span class="peer">
<span class="badge badge-pill fl-r badge-success lh-0 p-10">Done</span>
<span class="badge rounded-pill fl-r bg-success lh-0 p-10">Done</span>
</span> </span>
</label> </label>
</div> </div>
@ -800,7 +800,7 @@
<p class="mB-0">Sales Report</p> <p class="mB-0">Sales Report</p>
</div> </div>
<div class="peer"> <div class="peer">
<h3 class="text-right">$6,000</h3>
<h3 class="text-end">$6,000</h3>
</div> </div>
</div> </div>
</div> </div>
@ -817,43 +817,43 @@
<tbody> <tbody>
<tr> <tr>
<td class="fw-600">Item #1 Name</td> <td class="fw-600">Item #1 Name</td>
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Unavailable</span> </td>
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span> </td>
<td>Nov 18</td> <td>Nov 18</td>
<td><span class="text-success">$12</span></td> <td><span class="text-success">$12</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #2 Name</td> <td class="fw-600">Item #2 Name</td>
<td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c badge-pill">New</span></td>
<td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
<td>Nov 19</td> <td>Nov 19</td>
<td><span class="text-info">$34</span></td> <td><span class="text-info">$34</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #3 Name</td> <td class="fw-600">Item #3 Name</td>
<td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c badge-pill">New</span></td>
<td><span class="badge bgc-pink-50 c-pink-700 p-10 lh-0 tt-c rounded-pill">New</span></td>
<td>Nov 20</td> <td>Nov 20</td>
<td><span class="text-danger">-$45</span></td> <td><span class="text-danger">-$45</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #4 Name</td> <td class="fw-600">Item #4 Name</td>
<td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c badge-pill">Unavailable</span></td>
<td><span class="badge bgc-green-50 c-green-700 p-10 lh-0 tt-c rounded-pill">Unavailable</span></td>
<td>Nov 21</td> <td>Nov 21</td>
<td><span class="text-success">$65</span></td> <td><span class="text-success">$65</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #5 Name</td> <td class="fw-600">Item #5 Name</td>
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c badge-pill">Used</span></td>
<td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Used</span></td>
<td>Nov 22</td> <td>Nov 22</td>
<td><span class="text-success">$78</span></td> <td><span class="text-success">$78</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #6 Name</td> <td class="fw-600">Item #6 Name</td>
<td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c badge-pill">Used</span> </td>
<td><span class="badge bgc-orange-50 c-orange-700 p-10 lh-0 tt-c rounded-pill">Used</span> </td>
<td>Nov 23</td> <td>Nov 23</td>
<td><span class="text-danger">-$88</span></td> <td><span class="text-danger">-$88</span></td>
</tr> </tr>
<tr> <tr>
<td class="fw-600">Item #7 Name</td> <td class="fw-600">Item #7 Name</td>
<td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c badge-pill">Old</span></td>
<td><span class="badge bgc-yellow-50 c-yellow-700 p-10 lh-0 tt-c rounded-pill">Old</span></td>
<td>Nov 22</td> <td>Nov 22</td>
<td><span class="text-success">$56</span></td> <td><span class="text-success">$56</span></td>
</tr> </tr>
@ -1092,7 +1092,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 7
- 7
src/signin.html View File

@ -77,26 +77,26 @@
<div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'> <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
<h4 class="fw-300 c-grey-900 mB-40">Login</h4> <h4 class="fw-300 c-grey-900 mB-40">Login</h4>
<form> <form>
<div class="form-group">
<label class="text-normal text-dark">Username</label>
<div class="mb-3">
<label class="text-normal text-dark form-label">Username</label>
<input type="email" class="form-control" placeholder="John Doe"> <input type="email" class="form-control" placeholder="John Doe">
</div> </div>
<div class="form-group">
<label class="text-normal text-dark">Password</label>
<div class="mb-3">
<label class="text-normal text-dark form-label">Password</label>
<input type="password" class="form-control" placeholder="Password"> <input type="password" class="form-control" placeholder="Password">
</div> </div>
<div class="form-group">
<div class="">
<div class="peers ai-c jc-sb fxw-nw"> <div class="peers ai-c jc-sb fxw-nw">
<div class="peer"> <div class="peer">
<div class="checkbox checkbox-circle checkbox-info peers ai-c"> <div class="checkbox checkbox-circle checkbox-info peers ai-c">
<input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer"> <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c">
<label for="inputCall1" class=" peers peer-greed js-sb ai-c form-label">
<span class="peer peer-greed">Remember Me</span> <span class="peer peer-greed">Remember Me</span>
</label> </label>
</div> </div>
</div> </div>
<div class="peer"> <div class="peer">
<button class="btn btn-primary">Login</button>
<button class="btn btn-primary btn-color">Login</button>
</div> </div>
</div> </div>
</div> </div>


+ 10
- 10
src/signup.html View File

@ -77,24 +77,24 @@
<div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'> <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
<h4 class="fw-300 c-grey-900 mB-40">Register</h4> <h4 class="fw-300 c-grey-900 mB-40">Register</h4>
<form> <form>
<div class="form-group">
<label class="text-normal text-dark">Username</label>
<div class="mb-3">
<label class="form-label" class="text-normal text-dark">Username</label>
<input type="text" class="form-control" Placeholder='John Doe'> <input type="text" class="form-control" Placeholder='John Doe'>
</div> </div>
<div class="form-group">
<label class="text-normal text-dark">Email Address</label>
<div class="mb-3">
<label class="form-label" class="text-normal text-dark">Email Address</label>
<input type="email" class="form-control" Placeholder='name@email.com'> <input type="email" class="form-control" Placeholder='name@email.com'>
</div> </div>
<div class="form-group">
<label class="text-normal text-dark">Password</label>
<div class="mb-3">
<label class="form-label" class="text-normal text-dark">Password</label>
<input type="password" class="form-control" placeholder="Password"> <input type="password" class="form-control" placeholder="Password">
</div> </div>
<div class="form-group">
<label class="text-normal text-dark">Confirm Password</label>
<div class="mb-3">
<label class="form-label" class="text-normal text-dark">Confirm Password</label>
<input type="password" class="form-control" placeholder="Password"> <input type="password" class="form-control" placeholder="Password">
</div> </div>
<div class="form-group">
<button class="btn btn-primary">Register</button>
<div class="mb-3">
<button class="btn btn-primary btn-color">Register</button>
</div> </div>
</form> </form>
</div> </div>


+ 96
- 0
src/test.html View File

@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Test</title>
<style>
#loader {
transition: all 0.3s ease-in-out;
opacity: 1;
visibility: visible;
position: fixed;
height: 100vh;
width: 100%;
background: #fff;
z-index: 90000;
}
#loader.fadeOut {
opacity: 0;
visibility: hidden;
}
.spinner {
width: 40px;
height: 40px;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
</head>
<body class="app">
<div id='loader'>
<div class="spinner"></div>
</div>
<script>
window.addEventListener('load', function load() {
const loader = document.getElementById('loader');
setTimeout(function() {
loader.classList.add('fadeOut');
}, 300);
});
</script>
<div class="page-container">
<!-- <div class="header navbar">
<div class="header-container">
</div>
</div> -->
<main class='main-content bgc-grey-100'>
<div id='mainContent'>
<div class="full-container">
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
</div>
</div>
</main>
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer>
</div>
</body>
</html>

+ 53
- 55
src/ui.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -555,28 +555,28 @@
<div class="mT-30"> <div class="mT-30">
<div class="gap-10 peers"> <div class="gap-10 peers">
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-primary">Primary</button>
<button type="button" class="btn cur-p btn-primary btn-color">Primary</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-secondary">Secondary</button>
<button type="button" class="btn cur-p btn-secondary btn-color">Secondary</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-success">Success</button>
<button type="button" class="btn cur-p btn-success btn-color">Success</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-danger">Danger</button>
<button type="button" class="btn cur-p btn-danger btn-color">Danger</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-warning">Warning</button> <button type="button" class="btn cur-p btn-warning">Warning</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-info">Info</button>
<button type="button" class="btn cur-p btn-info btn-color">Info</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-light">Light</button> <button type="button" class="btn cur-p btn-light">Light</button>
</div> </div>
<div class="peer"> <div class="peer">
<button type="button" class="btn cur-p btn-dark">Dark</button>
<button type="button" class="btn cur-p btn-dark btn-color">Dark</button>
</div> </div>
</div> </div>
@ -608,19 +608,19 @@
</div> </div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-success">1</button>
<button type="button" class="btn btn-success">2</button>
<button type="button" class="btn btn-success">3</button>
<button type="button" class="btn btn-success">4</button>
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-success btn-color">1</button>
<button type="button" class="btn btn-success btn-color">2</button>
<button type="button" class="btn btn-success btn-color">3</button>
<button type="button" class="btn btn-success btn-color">4</button>
</div> </div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-success">5</button>
<button type="button" class="btn btn-success">6</button>
<button type="button" class="btn btn-success">7</button>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-success btn-color">5</button>
<button type="button" class="btn btn-success btn-color">6</button>
<button type="button" class="btn btn-success btn-color">7</button>
</div> </div>
<div class="btn-group" role="group" aria-label="Third group"> <div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-success">8</button>
<button type="button" class="btn btn-success btn-color">8</button>
</div> </div>
</div> </div>
</div> </div>
@ -631,7 +631,7 @@
<h6 class="c-grey-900">Dropdowns</h6> <h6 class="c-grey-900">Dropdowns</h6>
<div class="mT-30"> <div class="mT-30">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button Dropdown button
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
@ -643,8 +643,8 @@
<!-- Example split danger button --> <!-- Example split danger button -->
<div class="btn-group mT-20"> <div class="btn-group mT-20">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-danger btn-color">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span> <span class="sr-only">Toggle Dropdown</span>
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
@ -663,13 +663,13 @@
<h6 class="c-grey-900">List Group</h6> <h6 class="c-grey-900">List Group</h6>
<div class="mT-30"> <div class="mT-30">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item list-group-item-action actived">
Cras justo odio
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a> </a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div> </div>
</div> </div>
</div> </div>
@ -678,39 +678,37 @@
<div class="bgc-white p-20 bd"> <div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Modal</h6> <h6 class="c-grey-900">Modal</h6>
<div class="mT-30"> <div class="mT-30">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-color" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
<div class="masonry-item col-md-6"> <div class="masonry-item col-md-6">
<div class="bgc-white p-20 bd"> <div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Popover</h6> <h6 class="c-grey-900">Popover</h6>
<div class="mT-30"> <div class="mT-30">
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-lg btn-danger btn-color" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div> </div>
</div> </div>
</div> </div>
@ -760,16 +758,16 @@
<div class="bgc-white p-20 bd"> <div class="bgc-white p-20 bd">
<h6 class="c-grey-900">Tootips</h6> <h6 class="c-grey-900">Tootips</h6>
<div class="mT-30"> <div class="mT-30">
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
<button type="button" class="btn btn-primary btn-color" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top Tooltip on top
</button> </button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
<button type="button" class="btn btn-secondary btn-color" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right Tooltip on right
</button> </button>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
<button type="button" class="btn btn-success btn-color" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom Tooltip on bottom
</button> </button>
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
<button type="button" class="btn btn-danger btn-color" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left Tooltip on left
</button> </button>
</div> </div>
@ -781,7 +779,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 4
- 4
src/vector-maps.html View File

@ -312,7 +312,7 @@
<ul class="nav-right"> <ul class="nav-right">
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-red">3</span> <span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-bell"></i> <i class="ti-bell"></i>
</a> </a>
@ -385,7 +385,7 @@
</li> </li>
<li class="notifications dropdown"> <li class="notifications dropdown">
<span class="counter bgc-blue">3</span> <span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after" data-bs-toggle="dropdown">
<i class="ti-email"></i> <i class="ti-email"></i>
</a> </a>
@ -472,7 +472,7 @@
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-bs-toggle="dropdown">
<div class="peer mR-10"> <div class="peer mR-10">
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""> <img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt="">
</div> </div>
@ -531,7 +531,7 @@
<!-- ### $App Screen Footer ### --> <!-- ### $App Screen Footer ### -->
<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"> <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
<span>Copyright © 2017 Designed by <a href="https://colorlib.com" target='_blank' title="Colorlib">Colorlib</a>. All rights reserved.</span>
<span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
</footer> </footer>
</div> </div>
</div> </div>


+ 25
- 12
webpack/config.js View File

@ -15,12 +15,14 @@
// --------------------- // ---------------------
const const
path = require('path'),
manifest = require('./manifest'),
path = require('path'),
manifest = require('./manifest'),
devServer = require('./devServer'), devServer = require('./devServer'),
rules = require('./rules'),
plugins = require('./plugins');
rules = require('./rules'),
plugins = require('./plugins');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
// ------------------ // ------------------
// @Entry Point Setup // @Entry Point Setup
@ -44,24 +46,35 @@ const resolve = {
], ],
}; };
const optimization = {
minimize: manifest.MINIFY
};
if (manifest.MINIFY) {
optimization.minimizer = [
new CssMinimizerPlugin(),
new TerserPlugin()
];
}
// ----------------- // -----------------
// @Exporting Module // @Exporting Module
// ----------------- // -----------------
module.exports = { module.exports = {
devtool: manifest.IS_PRODUCTION ? false : 'cheap-eval-source-map',
devtool: manifest.IS_PRODUCTION ? false : 'source-map',
context: path.join(manifest.paths.src, manifest.entries.js), context: path.join(manifest.paths.src, manifest.entries.js),
watch: !manifest.IS_PRODUCTION,
// watch: !manifest.IS_PRODUCTION,
entry, entry,
output: {
path: manifest.paths.build,
publicPath: '',
filename: manifest.outputFiles.bundle,
},
mode: manifest.NODE_ENV,
// output: {
// path: manifest.paths.build,
// publicPath: '',
// filename: manifest.outputFiles.bundle,
// },
module: { module: {
rules, rules,
}, },
optimization: optimization,
resolve, resolve,
plugins, plugins,
devServer, devServer,


+ 28
- 22
webpack/devServer.js View File

@ -15,27 +15,33 @@ const
*/ */
const devServer = { const devServer = {
contentBase : manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,
historyApiFallback : true,
port : manifest.IS_PRODUCTION ? 3001 : 3000,
compress : manifest.IS_PRODUCTION,
inline : !manifest.IS_PRODUCTION,
watchContentBase: true,
hot : !manifest.IS_PRODUCTION,
host : '0.0.0.0',
disableHostCheck : true, // [1]
overlay : true,
stats: {
assets : true,
children : false,
chunks : false,
hash : false,
modules : false,
publicPath : false,
timings : true,
version : false,
warnings : true,
colors : true,
static: {
directory: manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,
watch: true,
},
historyApiFallback: true,
port: manifest.IS_PRODUCTION ? 3001 : 3000,
compress: manifest.IS_PRODUCTION,
client: {
overlay: true,
progress: !manifest.IS_PRODUCTION,
},
hot: !manifest.IS_PRODUCTION,
host: '0.0.0.0',
allowedHosts: 'all', // [1]
devMiddleware: {
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: true,
},
}, },
}; };
@ -44,4 +50,4 @@ const devServer = {
// @Exporting Module // @Exporting Module
// ----------------- // -----------------
module.exports = devServer;
module.exports = devServer;

+ 4
- 3
webpack/manifest.js View File

@ -27,8 +27,8 @@ const path = require('path');
const const
NODE_ENV = process.env.NODE_ENV || 'development', NODE_ENV = process.env.NODE_ENV || 'development',
IS_DEVELOPMENT = NODE_ENV === 'development', IS_DEVELOPMENT = NODE_ENV === 'development',
IS_PRODUCTION = NODE_ENV === 'production';
IS_PRODUCTION = NODE_ENV === 'production',
MINIFY = process.env.MINIFY === 'true';
// ------ // ------
// @Utils // @Utils
@ -45,7 +45,7 @@ const
const const
paths = { paths = {
src : dir('../src'), src : dir('../src'),
build : dir('../build'),
build : dir('../dist'),
}; };
@ -82,4 +82,5 @@ module.exports = {
NODE_ENV, NODE_ENV,
IS_DEVELOPMENT, IS_DEVELOPMENT,
IS_PRODUCTION, IS_PRODUCTION,
MINIFY
}; };

+ 4
- 2
webpack/plugins/copyPlugin.js View File

@ -3,9 +3,11 @@ const
manifest = require('../manifest'), manifest = require('../manifest'),
CopyWebpackPlugin = require('copy-webpack-plugin'); CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = new CopyWebpackPlugin([
module.exports = new CopyWebpackPlugin({
patterns: [
{ {
from : path.join(manifest.paths.src, 'assets/static'), from : path.join(manifest.paths.src, 'assets/static'),
to : path.join(manifest.paths.build, 'assets/static'), to : path.join(manifest.paths.build, 'assets/static'),
}, },
]);
]
});

+ 2
- 2
webpack/plugins/extractPlugin.js View File

@ -1,8 +1,8 @@
const const
manifest = require('../manifest'), manifest = require('../manifest'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
ExtractTextPlugin = require('mini-css-extract-plugin');
module.exports = new ExtractTextPlugin({ module.exports = new ExtractTextPlugin({
filename: manifest.outputFiles.css, filename: manifest.outputFiles.css,
allChunks: true,
// allChunks: true,
}); });

+ 21
- 7
webpack/plugins/htmlPlugin.js View File

@ -22,20 +22,34 @@ const titles = {
'404': '404', '404': '404',
'500': '500', '500': '500',
'basic-table': 'Basic Table', 'basic-table': 'Basic Table',
'test': 'Test',
}; };
let minify = {
collapseWhitespace: false,
minifyCSS: false,
minifyJS: false,
removeComments: true,
useShortDoctype: false,
};
if (manifest.MINIFY) {
minify = {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
removeComments: true,
useShortDoctype: true,
};
}
module.exports = Object.keys(titles).map(title => { module.exports = Object.keys(titles).map(title => {
return new HtmlWebpackPlugin({ return new HtmlWebpackPlugin({
template: path.join(manifest.paths.src, `${title}.html`), template: path.join(manifest.paths.src, `${title}.html`),
path: manifest.paths.build, path: manifest.paths.build,
filename: `${title}.html`, filename: `${title}.html`,
inject: true, inject: true,
minify: {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
removeComments: true,
useShortDoctype: true,
},
minify: minify
}); });
}); });

+ 2
- 1
webpack/plugins/index.js View File

@ -8,7 +8,8 @@ plugins.push(
...(require('./htmlPlugin')), ...(require('./htmlPlugin')),
...(require('./internal')), ...(require('./internal')),
require('./caseSensitivePlugin'), require('./caseSensitivePlugin'),
require('./extractPlugin')
require('./extractPlugin'),
require('./copyPlugin')
); );
if (manifest.IS_DEVELOPMENT) { if (manifest.IS_DEVELOPMENT) {


+ 41
- 40
webpack/plugins/internal.js View File

@ -28,26 +28,27 @@ const
plugins = []; plugins = [];
plugins.push( plugins.push(
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(manifest.NODE_ENV),
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: manifest.outputFiles.vendor,
minChunks(module) {
const { context } = module;
return context && context.indexOf('node_modules') >= 0;
},
}),
// new webpack.DefinePlugin({
// 'process.env': {
// NODE_ENV: JSON.stringify(manifest.NODE_ENV),
// },
// }),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// filename: manifest.outputFiles.vendor,
// minChunks(module) {
// const { context } = module;
// return context && context.indexOf('node_modules') >= 0;
// },
// }),
new webpack.ProvidePlugin({ new webpack.ProvidePlugin({
$: 'jquery', $: 'jquery',
jQuery: 'jquery', jQuery: 'jquery',
'window.jQuery': 'jquery', 'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
// Popper: ['popper.js', 'default'],
}) })
); );
@ -56,29 +57,29 @@ plugins.push(
// @Merging Production Plugins // @Merging Production Plugins
// --------------------------- // ---------------------------
if (manifest.IS_PRODUCTION) {
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
comparisons : true,
conditionals : true,
dead_code : true,
drop_debugger : true,
evaluate : true,
if_return : true,
join_vars : true,
screw_ie8 : true,
sequences : true,
unused : true,
warnings : false,
},
output: {
comments: false,
},
})
);
}
// if (manifest.IS_PRODUCTION) {
// plugins.push(
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// comparisons : true,
// conditionals : true,
// dead_code : true,
// drop_debugger : true,
// evaluate : true,
// if_return : true,
// join_vars : true,
// screw_ie8 : true,
// sequences : true,
// unused : true,
// warnings : false,
// },
// output: {
// comments: false,
// },
// })
// );
// }
// ---------------------------- // ----------------------------
@ -87,8 +88,8 @@ if (manifest.IS_PRODUCTION) {
if (manifest.IS_DEVELOPMENT) { if (manifest.IS_DEVELOPMENT) {
plugins.push( plugins.push(
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin(),
// new webpack.NoEmitOnErrorsPlugin(),
// new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin() new webpack.HotModuleReplacementPlugin()
); );
} }


+ 5
- 5
webpack/rules/css.js View File

@ -17,7 +17,7 @@
const const
manifest = require('../manifest'), manifest = require('../manifest'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
ExtractTextPlugin = require('mini-css-extract-plugin');
// --------------- // ---------------
@ -31,7 +31,7 @@ const loaders = [
loader: 'css-loader', loader: 'css-loader',
options: { options: {
sourceMap : manifest.IS_DEVELOPMENT, sourceMap : manifest.IS_DEVELOPMENT,
minimize : manifest.IS_PRODUCTION,
importLoaders: 1,
}, },
}, },
]; ];
@ -44,9 +44,9 @@ const loaders = [
if (manifest.IS_PRODUCTION) { if (manifest.IS_PRODUCTION) {
rule = { rule = {
test: /\.css$/, test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: loaders,
}),
use: [{
loader: ExtractTextPlugin.loader,
}].concat(loaders),
}; };
} }


+ 2
- 2
webpack/rules/fonts.js View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
test: /\.(eot|svg|ttf|woff|woff2)$/, test: /\.(eot|svg|ttf|woff|woff2)$/,
exclude : /(node_modules)/, exclude : /(node_modules)/,
use : ['file-loader'],
};
type: 'asset/resource',
};

+ 1
- 1
webpack/rules/images.js View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
test : /\.(png|gif|jpg|svg)$/i,
test : /\.(png|gif|jpg?g|svg)$/i,
exclude : /(node_modules)/, exclude : /(node_modules)/,
use : [{ use : [{
loader: 'file-loader', loader: 'file-loader',


+ 29
- 17
webpack/rules/sass.js View File

@ -16,8 +16,8 @@
const const
manifest = require('../manifest'), manifest = require('../manifest'),
path = require('path'), path = require('path'),
cssNext = require('postcss-cssnext');
cssNext = require('postcss-preset-env'),
ExtractTextPlugin = require('mini-css-extract-plugin');
// --------------- // ---------------
// @Common Loaders // @Common Loaders
@ -27,37 +27,49 @@ const loaders = [
{ {
loader: 'css-loader', loader: 'css-loader',
options: { options: {
sourceMap : manifest.IS_DEVELOPMENT,
minimize : manifest.IS_PRODUCTION,
sourceMap : manifest.IS_DEVELOPMENT
}, },
}, },
{ {
loader: 'postcss-loader', loader: 'postcss-loader',
options: { options: {
sourceMap: manifest.IS_DEVELOPMENT, sourceMap: manifest.IS_DEVELOPMENT,
plugins: () => [
cssNext(),
],
postcssOptions: {
plugins: [
[
cssNext(),
],
],
},
}, },
}, },
{ {
loader: 'sass-loader', loader: 'sass-loader',
options: { options: {
sourceMap: manifest.IS_DEVELOPMENT, sourceMap: manifest.IS_DEVELOPMENT,
includePaths: [
path.join('../../', 'node_modules'),
path.join(manifest.paths.src, 'assets', 'styles'),
path.join(manifest.paths.src, ''),
],
},
},
sassOptions: {
outputStyle: manifest.MINIFY ? 'compressed' : 'expanded',
includePaths: [
path.join('../../', 'node_modules'),
path.join(manifest.paths.src, 'assets', 'styles'),
path.join(manifest.paths.src, ''),
],
},
}
}
]; ];
if (manifest.IS_PRODUCTION) {
loaders.unshift(ExtractTextPlugin.loader);
} else {
loaders.unshift({
loader: 'style-loader',
});
}
const rule = { const rule = {
test: /\.scss$/, test: /\.scss$/,
use: [{
loader: 'style-loader',
}].concat(loaders),
use: loaders
}; };
// ----------------- // -----------------


Write Preview
Loading…
Cancel
Save