## AdminX PHP

Get Support

Thank you so much for purchasing AdminX from themeforest.

- Version: 1.0
- Author: la-themes

- Created: 1 August, 2024
- Update: 1 August, 2024

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

## Installation

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the /AdminX folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website. Make sure your server has installed PHP. We recommend to use PHP version 8.* but it is working on older versions as well.
2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
   - `AdminX/template` - Contains all of the pages referenced
     - `AdminX/assets/css` - Stylesheet files
     - `AdminX/assets/images` - Images files
     - `AdminX/assets/js` - Javascript files
     - `AdminX/assets/sass` - Sass files
     - `AdminX/assets/vendor` – All external libs.
   - `AdminX/template/index.php` - Homepage
3. You should upload all or specific PHP files as per your need.
4. You are good to go for adding your content now!
5. If you want to compile or run a template through webpack, first use 'npm i' and then 'npm run watch

## Webpack

Webpack is a powerful tool for bundling and managing assets in web applications. Configuring webpack for your admin panel ensures efficient bundling of JavaScript, CSS, and other assets, optimizing performance and enhancing development workflows.

### Setup:

##### 01. Installation

Ensure webpack is installed globally or locally in your project.

    npm install webpack webpack-cli --save-dev

##### 02. Project Structure:

Organize your admin panel project structure to align with webpack's module bundling capabilities.

### Configuration:

##### 01. webpack.config.js:

Create a webpack configuration file in the root of your project.

                                    const path = require('path');
                                    module.exports = {
                                        entry: './src/admin/index.js',
                                        output: {
                                            filename: 'admin.bundle.js',
                                            path: path.resolve(__dirname, 'dist'),
                                        },
                                        module: {
                                            rules: [
                                                {
                                                    test: /\.js$/,
                                                    exclude: /node_modules/,
                                                    use: {
                                                        loader: 'babel-loader',
                                                    },
                                                },
                                                {
                                                    test: /\.css$/,
                                                    use: ['style-loader', 'css-loader'],
                                                },
                                                // Add more rules for other asset types as needed
                                            ],
                                        },
                                    };

##### 02. Entry Point:

Specify the main entry point for webpack `(entry)`.

##### 03. Output:

Define where webpack should output the bundled files `(output)`.

##### 04. Loaders:

Configure loaders to process different file types `(e.g., JavaScript with Babel, CSS with style-loader and css-loader).`.

## PHP Folder Structure

- Mavis

- assets

- css

- responsive.css
- style.css

- fonts

- calendar
- flag-icons-master
- fontawesome
- tabler
- weather

- icons
- images
- js

- apexchart
- Calender
- emoji-picker
- map
- photoswipe
- simpale-datatable
- swiper-slider
- add_product.js
- advance_table.js
- alert.js
- analytics_dashboard.js
- animation.js
- apex_chart.js
- area_charts.js
- avtar.js
- bar.js
- blank.js
- blog.js
- boxplot.js
- bubble.js
- calendar.js
- candlestick_charts.js
- cart.js
- chart.js
- chat.js
- cheatsheet.js
- checkout.js
- clipboard.js
- column.js
- coming_soon.js
- count_down.js
- countup.js
- customizer.js
- custom-select.js
- data_table.js
- date_picker.js
- ...
- wow-custom.js

- scss

- app
- responsive.scss
- style.scss

- vendor

- template

- partials

- backtotop.php
- customizer.php
- footer.php
- head.php
- head2.php
- head3.php
- header.php
- navbar.php
- preloader.php
- scripts.php
- scripts2.php

- index.php and other pages

- webpack.config.js
- package-lock.json
- package.json
- postcss.config.js

## PHP Structure

AdminX follows a simple and easy to customize coding structure.

    <!DOCTYPE html>
    <html lang="en"><head>
    <head>

        <!-- meta tags, fonts and title tag -->
        <?php include("partials/head.php"); ?>

        <!--  plugins css -->

        <!-- icons css files -->
        <?php include("partials/head2.php"); ?>

        <!--  plugins css -->

        <!-- themes css files like bootstrap style and responsive -->
        <?php include("partials/head3.php"); ?>

    </head>

    <body>
      <div class="app-wrapper">

      <?php include("partials/preloader.php"); ?>

      <!-- Menu Navigation starts -->
      <?php include("partials/navbar.php"); ?>
      <!-- Menu Navigation ends -->

        <div class="app-content">
          <div class="">

          <?php include("partials/header.php"); ?>

            <!-- Body main section starts -->
            <main>
               <div class="container-fluid">
                 <div class="row">
                   <div class="col-12">
                        ...
                   </div>
                 </div>
               </div>
             </main>
            <!-- Body main section ends -->

            <?php include("partials/backtotop.php"); ?>
            <?php include("partials/footer.php"); ?>

          </div>
        </div>
      </div>
      <!-- essential   -->

      <?php include("partials/customizer.php"); ?>

      <?php include("partials/scripts.php"); ?>

      <!--Plugins js-->

      <?php include("partials/scripts2.php"); ?>

    </body>

    </html>

## SCSS

We have added SASS `.scss` files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - `AdminX/assets/sass/app`

If you want to add new scss file. so you can`_stylesheet.scss` file in app folder and import file in `style.scss` and use easily

Open the `sass/app/_variables.scss` and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your `style.scss` File.

## Colors Variables

All color-related SCSS variables can be found in the `AdminX/assest/scss/app/_variables.scss`

        .default{
        --primary: 70, 127, 251;
        --secondary: 116, 120, 141;
        }

        .gold{
        --primary: 192,127,0;
        --secondary: 76,61,61;
        }

## Theme Customization

We have include a Custom CSS File in the `css` Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles The Document `<head>` after the `css/style.css` Linking. Also make sure that this is the Last Linked CSS File in the Document `<head>` so that your Custom CSS Styles are Overwritten properly. It will be found in the `template/partials/head.php head2.php & head3.php`

        <head>
        <!--font-awesome-css-->
        <link rel="stylesheet" href="../assets/vendor/fontawesome/css/all.css">

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">

        <!-- tabler icons-->
        <link rel="stylesheet" type="text/css" href="../assets/vendor/tabler-icons/tabler-icons.css">

        <!--flag Icon css-->
        <link rel="stylesheet" type="text/css" href="../assets/vendor/flag-icons-master/flag-icon.css">

        <!-- Bootstrap css-->
        <link rel="stylesheet" type="text/css" href="../assets/vendor/bootstrap/bootstrap.min.css">

        <!-- simplebar css-->
        <link rel="stylesheet" type="text/css" href="../assets/vendor/simplebar/simplebar.css">

        <!-- App css-->
        <link rel="stylesheet" type="text/css" href="../assets/css/style.css">

        <!-- Responsive css-->
        <link rel="stylesheet" type="text/css" href="../assets/css/responsive.css">
        </head>

## Logo Settings

The Logo Container can be found in the Header Container - `<header>` in the `template/partials/header.php`

        <!-- Logo -->
        <div class="app-logo">
        <a class="logo d-inline-block" href="index.html" title="iDocs">
         <img src="../assets/images/logo/1.png" alt="Logo"/>
        </a>
        </div>
        <!-- Logo End -->

## Provided Features

- #### Bootstrap

  CSS Framework

- #### Validation

  Validation

- #### SCSS

  Style Sheets

- #### Apex Chart

  JS Charts

- #### Webpack

  Module bundler

- #### Google Map

  Map

- #### Chart js

  Html Charts

- #### Goggle Fonts

  Goggle Fonts

- #### Ui kits

  Components

- #### Apps

  Apps

- #### NPM

  Pkg Manager

- #### Fullcalendar

  Event Calendar

## Layout

Documentation and examples for header, navbar, sidebar, footer

#### LtR Layout

For the default LTR layout, ensure that your website has the `ltr` class added to the body tag, and include the `dir="ltr"` attribute in your HTML tag in the `template/partials/head.php & head3.php`.

                                          <html lang="en" dir="ltr">
                                            <body class="ltr">
                                               ...
                                            </body>
                                          </html>

#### Rtl Layout

For enabling the Rtl Layout on your website, simply apply the `rtl` class to the body tag and add the `dir="rtl"` attribute to your HTML tag

                                      <html lang="en" dir="rtl">
                                        <body class="rtl">
                                           ...
                                        </body>
                                       </html>

#### Box Layout

For enabling the Box Layout on your website, simply apply the `box` class to the body tag

                                      <html lang="en">
                                        <body class="box-layout">
                                           ...
                                        </body>
                                       </html>

## Header

Documentation and examples for header

        <!-- Header Section starts -->

        <header class="header-main">
          <div class="container-fluid">
            <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body">
                    <div class="row">
                      <div class="col-6 d-flex align-items-center header-left">
                        <span class="header-toggle me-2">
                          <i class="ti ti-category"> </i>
                        </span>

                        <div class="header-searchbar">
                          ...
                        </div>
                      </div>
                      <div class="col-6 d-flex align-items-center justify-content-end header-right">
                        <ul class="d-flex align-items-center">

                          <li class="header-language">
                          ...
                           </li>

                          <li class="header-apps">
                          ...
                          </li>

                          <li class="header-cart d-none d-sm-block">
                          ...
                          </li>

                          <li class="header-dark head-icon">
                           ...
                          </li>

                          <li class="header-notification">
                           ...
                          </li>

                          <li class="header-profile">
                            ...
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </header>

        <!-- Header Section ends -->

## Apps

The list of Apps descriptions are provided below for your reference:

- Calendar
- Invoive
- Kanban board
- Profile
- Timeline
- Faq
- Pricing
- Gallery
- Team
- Chart
- Email
- E-shop
- Projects
- Todo
- Filemanager
- Blog page

## Helper Class

We have created some really useful helper classes for you.

#### Headings

Preview

All heading Classes from `<h1>` to `<h6>` , are at your disposal for structuring your content.

h1Fontsize
h2Fontsize
h3Fontsize
h4Fontsize
h5Fontsize
h6Fontsize

    <div class="h1"> ... </div>
    <div class="h2"> ... </div>
    <div class="h3"> ... </div>
    <div class="h4"> ... </div>
    <div class="h5"> ... </div>
    <div class="h6"> ... </div>

#### Font Size

Preview

Change the text size using `.f-s-` class.

- FontSize-10
- FontSize-12
- FontSize-14
- FontSize-16
- FontSize-18
- FontSize-20
- FontSize-24

    <span class="f-s-10 ">... </span>
    <span class="f-s-12 ">... </span>
    <span class="f-s-14 ">... </span>
    <span class="f-s-16 ">... </span>
    <span class="f-s-18 ">... </span>
    <span class="f-s-20 ">... </span>
    <span class="f-s-24 ">... </span>
    <span class="f-s-32 ">... </span>

#### Font Weight

Preview

Change the Font Weight using `.f-fw-` class.

f-fw-100*
f-fw-200*
f-fw-300*
f-fw-400*
f-fw-500*
f-fw-600*
f-fw-700*
f-fw-800*
f-fw-900*

          <span class="f-fw-100 ms-2">... </span>
          <span class="f-fw-200 ms-2">... </span>
          <span class="f-fw-300 ms-2">... </span>
          <span class="f-fw-400 ms-2">... </span>
          <span class="f-fw-500 ms-2">... </span>
          <span class="f-fw-600 ms-2">... </span>
          <span class="f-fw-700 ms-2">... </span>
          <span class="f-fw-800 ms-2">... </span>
          <span class="f-fw-900 ms-2">...</span>

#### Text Color

Preview

Change the text Color using `.text-` class.

- .text-primary - .text-secondary - .text-success - .text-danger - .text-warning - .text-info - .text-light - .text-dark

            <span class="text-primary"> ... </span>
            <span class="text-secondary"> ... </span>
            <span class="text-success"> ... </span>
            <span class="text-danger"> ... </span>
            <span class="text-warning"> ... </span>
            <span class="text-info"> ... </span>
            <span class="text-light"> ... </span>
            <span class="text-dark  "> ... </span>

#### Text background Color

Preview

Change the text background Color using `.txt-bg-` class.

- .txt-bg-primary - .txt-bg-secondary - .txt-bg-success - .txt-bg-danger - .txt-bg-warning - .txt-bg-info - .txt-bg-light - .txt-bg-dark

            <span class="txt-bg-primary"> ... </span>
            <span class="txt-bg-secondary"> ... </span>
            <span class="txt-bg-success"> ... </span>
            <span class="txt-bg-danger"> ... </span>
            <span class="txt-bg-warning"> ... </span>
            <span class="txt-bg-info"> ... </span>
            <span class="txt-bg-light"> ... </span>
            <span class="txt-bg-dark  "> ... </span>

#### Text Align & Decoration

Preview

Change the text align & decoration `.text-` class.

Text-Lowercase
Text-Uppercase
Text-Capitalize
- Text Align Center
- Text Align Start
- Text Align End
- Text Decoration underline
- Text Decoration line-through
- Text Decoration overline
- Text Decorationoverline-underline
- Text Decorationunderline-line-through

            <div class="text-lowercase p-2">...</div>
            <div class="text-uppercase p-2">...</div>
            <div class="text-capitalize p-2">...</div>
            <div class="text-center">...</div>
            <div class="text-start">...</div>
            <div class="text-end">...</div>
            <span class="text-d-underline"> ... </span>
            <span class="text-d-line-through"> ... </span>
            <span class="text-d-overline"> ...</span>
            <span class="text-d-overline-underline">...</span>
            <span class="text-d-line-underline">...</span>

## Ui Kits

Elevate Your Admin Experience with our Cutting-Edge UI Kits

#### Button

Preview

        <button type="button" class="btn btn-primary">...</button>
        <button type="button" class="btn btn-secondary">...</button>
        <button type="button" class="btn btn-success">...</button>
        <button type="button" class="btn btn-danger">...</button>
        <button type="button" class="btn btn-warning">...</button>
        <button type="button" class="btn btn-info">...</button>
        <button type="button" class="btn btn-light">...</button>
        <button type="button" class="btn btn-dark">...</button>
        <button type="button" class="btn btn-link">...</button>

#### Badges

Preview
Primary Secondary Success Danger Warning Info Light Dark

        <span class="badge text-bg-primary">...</span>
        <span class="badge text-bg-secondary">...</span>
        <span class="badge text-bg-success">...</span>
        <span class="badge text-bg-danger">...</span>
        <span class="badge text-bg-warning">...</span>
        <span class="badge text-bg-info">...</span>
        <span class="badge text-bg-light">...</span>
        <span class="badge text-bg-dark">...</span>

#### Accordions

Preview

##

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the `.accordion-body`, though the transition does limit overflow.

##

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the `.accordion-body`, though the transition does limit overflow.

##

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the `.accordion-body`, though the transition does limit overflow.

        <div class="accordion app-accordion accordion-secondary">
        <div class="accordion-item">
        <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse"
        data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        ...
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show"
        data-bs-parent="#accordionExample">
        <div class="accordion-body">
        ....
        </div>
        </div>
        </div>
        <div class="accordion-item">
        <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        ...
        </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
        <div class="accordion-body">
        ...
        </div>
        </div>
        </div>
        <div class="accordion-item">
        <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
        data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        ...
        </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
        <div class="accordion-body">
        ...
        </div>
        </div>
        </div>
        </div>

#### Alert

Preview
Simple primary alert -check it out!
Simple secondary alert -check it out!
Simple success alert -check it out!
Simple danger alert -check it out!
Simple warning alert -check it out!
Simple info alert -check it out!
Simple light alert -check it out!
Simple dark alert -check it out!

        <div class="alert alert-primary" role="alert"> ...  </div>
        <div class="alert alert-secondary " role="alert"> ...  </div>
        <div class="alert alert-success " role="alert"> ... </div>
        <div class="alert alert-danger " role="alert"> ...  </div>
        <div class="alert alert-warning " role="alert"> ...  </div>
        <div class="alert alert-info " role="alert"> ...  </div>
        <div class="alert alert-light " role="alert">...  </div>
        <div class="alert alert-dark " role="alert"> ...  </div>

#### Progress

Preview

        <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0"
        aria-valuemax="100">
        <div class="progress-bar bg-primary" style="width: 12.5%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0"
        aria-valuemax="100">
        <div class="progress-bar bg-secondary" style="width: 25%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
        aria-valuemax="100">
        <div class="progress-bar bg-success" style="width: 37.5%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0"
        aria-valuemax="100">
        <div class="progress-bar bg-danger" style="width: 50%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
        aria-valuemax="100">
        <div class="progress-bar bg-warning" style="width: 62.5%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0"
        aria-valuemax="100">
        <div class="progress-bar bg-info" style="width: 75%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
        aria-valuemax="100">
        <div class="progress-bar bg-light" style="width: 82.5%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0"
        aria-valuemax="100">
        <div class="progress-bar bg-dark" style="width: 95%"></div>
        </div>

## Advance Ui

Elevate Your Admin Interface with Advanced UI - Where Innovation Meets Intuition.

#### Sweetalert

Preview offical

When utilizing JavaScript, make sure to add the following script tags.

        <!-- sweetalert js-->
        <script src="../assets/vendor/sweetalert/sweetalert.js"> </script>

        <!-- js -->
        <script src="../assets/js/sweet_alert.js"> </script>

#### Tour

Preview offical

When utilizing JavaScript, make sure to add the following style & script tags.

        <!-- shepherd css -->
        <link rel="stylesheet" type="text/css" href="../assets/vendor/shepherdjs/shepherd.css">
        <!-- shepherdjs -->
        <script src="../assets/vendor/shepherdjs/shepherd.min.js"></script>
        <!-- tour js -->
        <script src="../assets/js/tour.js"></script>

#### Slick slider

Preview offical

When utilizing JavaScript, make sure to add the following style & script tags.

        <!-- slick css -->
        <link rel="stylesheet" href="../assets/vendor/slick/slick.css">
        <link rel="stylesheet" href="../assets/vendor/slick/slick-theme.css">

        <!-- slick-file -->
        <script src="../assets/vendor/slick/slick.min.js"></script>
        <!-- slick js -->
        <script src="../assets/js/slick.js"></script>

#### Tooltip

Preview offical

When utilizing JavaScript, make sure to add the following script tags.

        <!-- Tooltip js  -->
        <script src="../assets/js/tooltips_popovers.js"></script>

## Tables

#### Basic Table

Preview

Using the most basic table need to add `.table` class to table tag

Id | Name | Position | Office | Age | Salary
--- | --- | --- | --- | --- | ---
1 | Tiger Nixon | Architect | Edinburgh | 61 | $320,800
2 | Garrett | Accountant | Tokyo | 63 | $170,750
3 | Ashton Cox | Technical | Francisco | 66 | $86,000
4 | Cedric Kelly | Developer | Edinburgh | 22 | $433,060
5 | Airi Satou | Accountant | Tokyo | 33 | $162,700
6 | Williamson | Integration | New York | 61 | $372,000

    <div class="table-responsive">
    <table class="table mb-0">
       ...
    </table>
    </div>

#### Data Table

Preview offical

DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: `$().DataTable();`.

Name | Position | Office | Age | Start date | Salary | Action
--- | --- | --- | --- | --- | --- | ---
Tiger Nixon | System Architect | Edinburgh | 61 | $3674.55 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 2011-07-25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009-01-12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012-03-29 | $433,060 |

- When utilizing JavaScript, make sure to add the following script tags.

    <!-- Data Table css-->
    <link rel="stylesheet" type="text/css" href="../assets/vendor/datatable/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/vendor/datatable/datatable2/buttons.dataTables.min.css">

    <!-- Data Table js-->
     <script src="../assets/vendor/datatable/jquery.dataTables.min.js"></script>
     <script src="../assets/vendor/datatable/datatable2/dataTables.buttons.min.js"></script>
     <script src="../assets/vendor/datatable/datatable2/jszip.min.js"></script>
     <script src="../assets/vendor/datatable/datatable2/pdfmake.min.js"></script>
     <script src="../assets/vendor/datatable/datatable2/vfs_fonts.js"></script>
     <script src="../assets/vendor/datatable/datatable2/buttons.html5.min.js"></script>
     <script src="../assets/vendor/datatable/datatable2/buttons.print.min.js"></script>

     <!-- Data Table js-->
     <script src="../assets/js/data_table.js"></script>

## Forms

#### Tooltips Validation

Preview

If your form layout allows it, you can swap the SP `.{valid|invalid}-feedback` classes for `.{valid|invalid}-tooltip` classes to display validation feedback in a styled tooltip.

Username
Email
Password
Address
Address 2
City
Zip
Check me out

    <form class="row g-3 app-form" id="form-validation">
      <div class="col-md-6">
       <label for="userName" class="form-label">User Name</label>
       <input type="text" class="form-control" id="userName" name="userName">
       <div class="mt-1">
        <span id="userNameError" class="text-danger"></span>
       </div>
      </div>
      <div class="col-md-6">
       <label for="email" class="form-label">Email</label>
       <input type="email" class="form-control" id="email">
       <div class="mt-1">
        <span id="emailError" class="text-danger"></span>
       </div>
      </div>
      <div class="col-md-6">
       <label for="password" class="form-label">Password</label>
       <input type="password" class="form-control" id="password">
       <div class="mt-1">
        <span id="passwordError" class="text-danger"></span>
       </div>
      </div>
      <div class="col-6">
       <label for="address" class="form-label">Address</label>
       <input type="text" class="form-control" id="address" placeholder="1234 Main St">
       <div class="mt-1">
        <span id="addressError" class="text-danger"></span>
       </div>
      </div>
      <div class="col-5">
       <label for="address2" class="form-label">Address 2</label>
       <input type="text" class="form-control" id="address2" placeholder="Address">
      <div class="mt-1">
       <span id="addressError2" class="text-danger"></span>
      </div>
      </div>
      <div class="col-md-5">
       <label for="city" class="form-label">City</label>
       <input type="text" class="form-control" id="city">
       <div class="mt-1">
        <span id="cityError" class="text-danger"></span>
       </div>
      </div>
      <div class="col-md-2">
       <label for="zipCode" class="form-label">Zip</label>
       <input type="text" class="form-control" id="zipCode">
       <div class="mt-1">
        <span id="zipCodeError" class="text-danger"></span>
       </div>
      </div>
      <div class="col-12">
       <div class="form-check d-flex gap-1">
        <input class="form-check-input mg-2" type="checkbox" id="gridCheck">
        <label class="form-check-label" for="gridCheck">
         Check me out
        </label>
       </div>
      </div>
      <div class="col-12">
       <button type="submit" value="Submit" class="btn btn-primary">Submit form</button>
      </div>
     </form>

#### Default Vertical Form

Preview
Email address
We'll never share your email with anyone else.
Password
remember me

    <form class="app-form">
     <div class="mb-3">
      <label class="form-label">Email address</label>
      <input type="email" class="form-control">
      <div class="form-text">We'll never share your email with anyone else.</div>
     </div>
     <div class="mb-3">
      <label class="form-label">Password</label>
      <input type="password" class="form-control">
     </div>
     <div class="mb-3 form-check d-flex p-0">
      <input type="checkbox" class="m-1 form-check-input" id="formCheck1">
      <label class="form-check-label" for="formCheck1">remember me</label>
     </div>
     <div class="text-end">
      <button type="submit" class="btn btn-primary">Submit</button>
     </div>
    </form>

## Maps

#### Google Map

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.

    <!-- google maps api-->
    <script src="http://maps.google.com/maps/api/js"></script>

    <!-- google maps js-->
    <script src="../assets/vendor/googlemap/gmaps.js"></script>

    <!-- google maps custom js-->
    <script src="../assets/js/google-map.js"></script>

#### Leaflet-Map

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.

    <!-- leaflet css-->
    <link src="../assets/vendor/leafletmaps/leaflet.css"></link>

    <!-- leaflet map js-->
    <script src="../assets/vendor/leafletmaps/leaflet.js"></script>

    <!-- leaflet map custom js-->
    <script src="../assets/js/leaflet-map.js"></script>

#### Vector-Map

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.

    <!-- vector Map css-->
    <link src="../assets/vendor/vector-map/jquery-jvectormap.css"></link>

    <!-- leaflet map js-->
    <script src="../assets/vendor/vector-map/jquery-jvectormap-2.0.5.min.js"></script>
    <script src="../assets/vendor/vector-map/jquery-jvectormap-world-mill.js"></script>
    <script src="../assets/vendor/vector-map/europe-mill.js"></script>
    <script src="../assets/vendor/vector-map/jquery-jvectormap-us-lcc.js"></script>
    <script src="../assets/vendor/vector-map/jvectormap-es-mill.js"></script>
    <script src="../assets/vendor/vector-map/africa-mill.js"></script>
    <script src="../assets/vendor/vector-map/asia-mill.js"></script>
    <script src="../assets/vendor/vector-map/uk_countries-mill.js"></script>
    <script src="../assets/vendor/vector-map/ru-mill.js"></script>

    <!-- leaflet map custom js-->
    <script src="../assets/js/vector-map.js"></script>

## Chart

#### ChartJs

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.

    <!-- chart js js-->
    <script src="../assets/vendor/chartjs/chart.js"></script>

    <!-- chart js custom js-->
    <script src="../assets/js/chart.js"></script>

#### Apexchart

Preview Offical

- When utilizing JavaScript, make sure to add the following script tags.

    <!-- apexchart css-->
    <link rel="stylesheet" type="text/css" href="../assets/vendor/apexcharts/apexcharts.css">

    <!-- apexchart js-->
    <script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>

## Icons

- Icons Fontawesome - https://fontawesome.com/
- Icons Flag - https://alexsobolenko.github.io/flag-icons/
- Icons Tabler - https://tabler-icons.io//
- Icons Wheather - http://erikflowers.github.io/weather-icons/

## Scripts

- listJs - https://listjs.com/
- masonry - https://masonry.desandro.com/
- notifications - https://apvarun.github.io/toastify-js/
- nouislider - https://refreshless.com/nouislider/
- select - https://select2.org/
- simplebar - https://grsmto.github.io/simplebar/
- slick - https://kenwheeler.github.io/slick/
- stacks - https://draggabilly.desandro.com/
- sweetalert - https://sweetalert2.github.io/
- tourguide-js - https://shepherdjs.dev/docs/index.html
- trumbowyg - https://alex-d.github.io/Trumbowyg/documentation/
- typeahead - https://twitter.github.io/typeahead.js/
- vector-map - https://jvectormap.com/
- animation - https://animate.style/
- apexcharts - https://apexcharts.com/
- bootstrap - https://getbootstrap.com/
- chats.js - https://www.chartjs.org/
- cleavejs - https://nosir.github.io/cleave.js/
- datatable - https://datatables.net/
- datepikar - https://flatpickr.js.org/
- dual listboxes - https://bulma.io/
- filepond - https://pqina.nl/filepond/
- FullCalendar - https://fullcalendar.io/docs/initialize-globals
- glightbox - https://biati-digital.github.io/glightbox/
- googlemap - https://hpneo.dev/gmaps/
- introjs - https://introjs.com/
- kanban_board - https://muuri.dev/
- leafletmaps - https://leafletjs.com/index.html

## Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

## Version 1.0 (1 August, 2024)

Initial Release