npm - admin-lte - Versions diffs - 4.0.0-alpha1 → 4.0.0-alpha3 - Mend

admin-lte 4.0.0-alpha1 → 4.0.0-alpha3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (200) hide show

package/.bundlewatch.config.json +8 -8
package/.cache/.eslintcache +1 -0
package/.cache/.stylelintcache +1 -0
package/.eslintignore +1 -0
package/.eslintrc.json +16 -0
package/.gitpod.yml +1 -1
package/.idea/AdminLTE.iml +4 -0
package/.idea/codeStyles/Project.xml +24 -0
package/.idea/dbnavigator.xml +421 -0
package/.idea/git_toolbox_prj.xml +15 -0
package/.idea/jsLibraryMappings.xml +6 -0
package/.idea/jsLinters/eslint.xml +6 -0
package/.idea/vcs.xml +6 -0
package/.stylelintrc.json +47 -0
package/LICENSE +1 -1
package/README.md +6 -7
package/dist/assets/img/AdminLTEFullLogo.png +0 -0
package/dist/css/adminlte.css +2716 -2710
package/dist/css/adminlte.css.map +1 -1
package/dist/css/adminlte.min.css +2 -2
package/dist/css/adminlte.min.css.map +1 -1
package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2715 -2710
package/dist/css/adminlte.rtl.css.map +1 -0
package/dist/css/adminlte.rtl.min.css +7 -0
package/dist/css/adminlte.rtl.min.css.map +1 -0
package/dist/js/adminlte.js +204 -233
package/dist/js/adminlte.js.map +1 -1
package/dist/js/adminlte.min.js +6 -1
package/dist/js/adminlte.min.js.map +1 -1
package/dist/pages/UI/timeline.html +869 -0
package/dist/pages/docs/browser-support.html +755 -0
package/dist/pages/docs/color-mode.html +1067 -0
package/dist/pages/docs/components/main-header.html +1137 -0
package/dist/pages/docs/components/main-sidebar.html +858 -0
package/dist/pages/docs/faq.html +743 -0
package/dist/pages/docs/how-to-contribute.html +783 -0
package/dist/pages/docs/introduction.html +767 -0
package/dist/pages/docs/javascript/treeview.html +762 -0
package/dist/pages/docs/layout.html +788 -0
package/dist/pages/docs/license.html +746 -0
package/dist/pages/examples/lockscreen.html +107 -0
package/dist/pages/examples/login-v2.html +148 -0
package/dist/pages/examples/login.html +128 -196
package/dist/pages/examples/register-v2.html +155 -0
package/dist/pages/examples/register.html +131 -199
package/dist/pages/forms/general.html +1065 -652
package/dist/pages/index.html +1320 -0
package/dist/pages/index2.html +1776 -0
package/dist/pages/index3.html +1111 -0
package/dist/pages/layout/collapsed-sidebar.html +766 -0
package/dist/pages/layout/fixed-complete.html +867 -0
package/dist/pages/layout/fixed-sidebar.html +749 -654
package/dist/pages/layout/layout-rtl.html +766 -0
package/dist/pages/layout/logo-switch.html +433 -0
package/dist/pages/layout/sidebar-mini.html +766 -0
package/dist/pages/layout/unfixed-sidebar.html +747 -654
package/dist/pages/tables/simple.html +1049 -946
package/dist/pages/widgets/cards.html +974 -713
package/dist/pages/widgets/info-box.html +1062 -966
package/dist/pages/widgets/small-box.html +792 -694
package/index.html +6 -15
package/package.json +59 -39
package/src/assets/img/AdminLTEFullLogo.png +0 -0
package/src/config/assets.config.mjs +8 -0
package/src/config/astro.config.mjs +19 -0
package/src/config/postcss.config.mjs +15 -0
package/src/config/rollup.config.js +20 -0
package/src/html/.eslintrc.json +24 -0
package/src/html/.prettierrc.js +11 -0
package/src/html/.tsconfig.json +4 -0
package/src/html/components/_head.astro +47 -0
package/src/html/components/_scripts.astro +51 -0
package/src/html/components/dashboard/_footer.astro +18 -0
package/src/html/components/dashboard/_sidenav.astro +553 -0
package/src/html/components/dashboard/_topbar.astro +213 -0
package/src/html/components/docs/browser-support.mdx +23 -0
package/src/html/components/docs/color-mode.mdx +169 -0
package/src/{partials/dashboard/_topbar.html → html/components/docs/components/main-header.mdx} +67 -67
package/src/html/components/docs/components/main-sidebar.mdx +129 -0
package/src/html/components/docs/faq.mdx +11 -0
package/src/html/components/docs/how-to-contribute.mdx +34 -0
package/src/html/components/docs/introduction.mdx +60 -0
package/src/html/components/docs/license.mdx +9 -0
package/src/html/components/javascript/treeview.mdx +39 -0
package/src/html/env.d.ts +1 -0
package/src/html/pages/UI/timeline.astro +221 -0
package/src/html/pages/docs/browser-support.astro +71 -0
package/src/html/pages/docs/color-mode.astro +271 -0
package/src/html/pages/docs/components/main-header.astro +319 -0
package/src/html/pages/docs/components/main-sidebar.astro +71 -0
package/src/html/pages/docs/faq.astro +71 -0
package/src/html/pages/docs/how-to-contribute.astro +71 -0
package/src/html/pages/docs/introduction.astro +71 -0
package/src/html/pages/docs/javascript/treeview.astro +71 -0
package/src/html/pages/docs/layout.astro +120 -0
package/src/html/pages/docs/license.astro +71 -0
package/src/html/pages/examples/lockscreen.astro +63 -0
package/src/html/pages/examples/login-v2.astro +109 -0
package/src/{pages/examples/login.html → html/pages/examples/login.astro} +40 -22
package/src/html/pages/examples/register-v2.astro +116 -0
package/src/{pages/examples/register.html → html/pages/examples/register.astro} +42 -24
package/src/html/pages/forms/general.astro +624 -0
package/src/html/pages/index.astro +790 -0
package/src/html/pages/index2.astro +1345 -0
package/src/html/pages/index3.astro +513 -0
package/src/html/pages/layout/collapsed-sidebar.astro +110 -0
package/src/html/pages/layout/fixed-complete.astro +209 -0
package/src/html/pages/layout/fixed-sidebar.astro +109 -0
package/src/html/pages/layout/layout-rtl.astro +109 -0
package/src/html/pages/layout/logo-switch.astro +212 -0
package/src/html/pages/layout/sidebar-mini.astro +108 -0
package/src/html/pages/layout/unfixed-sidebar.astro +107 -0
package/src/html/pages/tables/simple.astro +472 -0
package/src/html/pages/widgets/cards.astro +373 -0
package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +110 -60
package/src/html/pages/widgets/small-box.astro +182 -0
package/src/scss/_app-content.scss +52 -0
package/src/scss/_app-footer.scss +15 -0
package/src/scss/_app-header.scss +26 -0
package/src/scss/_app-main.scss +17 -0
package/src/scss/_app-sidebar.scss +603 -0
package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
package/src/scss/_bootstrap-variables.scss +42 -27
package/src/scss/_callouts.scss +34 -0
package/src/scss/_cards.scss +54 -224
package/src/scss/_compact-mode.scss +79 -0
package/src/scss/_direct-chat.scss +15 -9
package/src/scss/_docs.scss +4 -0
package/src/scss/_dropdown.scss +7 -5
package/src/scss/_info-box.scss +2 -6
package/src/scss/_miscellaneous.scss +0 -455
package/src/scss/_mixins.scss +0 -6
package/src/scss/_root.scss +2 -58
package/src/scss/_small-box.scss +15 -41
package/src/scss/_table.scss +0 -50
package/src/scss/_timeline.scss +120 -0
package/src/scss/_variables-dark.scss +15 -8
package/src/scss/_variables.scss +48 -136
package/src/scss/adminlte.scss +1 -1
package/src/scss/mixins/_animations.scss +0 -1
package/src/scss/mixins/_scrollbar.scss +2 -2
package/src/scss/pages/_lockscreen.scss +74 -0
package/src/scss/pages/_login_and_register.scss +1 -5
package/src/scss/parts/_core.scss +9 -15
package/src/scss/parts/_extra-components.scss +1 -2
package/src/scss/parts/_pages.scss +1 -0
package/src/ts/adminlte.ts +0 -2
package/src/ts/card-widget.ts +57 -66
package/src/ts/direct-chat.ts +35 -10
package/src/ts/layout.ts +8 -6
package/src/ts/push-menu.ts +90 -158
package/src/ts/treeview.ts +30 -30
package/src/ts/util/index.ts +14 -12
package/src/utils/index.js +28 -0
package/tsconfig.json +11 -3
package/.stylelintrc +0 -40
package/CHECKLIST.md +0 -0
package/dist/css/rtl/adminlte.rtl.css.map +0 -1
package/dist/css/rtl/adminlte.rtl.min.css +0 -7
package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
package/dist/index.html +0 -1065
package/dist/index2.html +0 -1629
package/dist/index3.html +0 -1015
package/gulpfile.js +0 -315
package/src/index.html +0 -476
package/src/index2.html +0 -968
package/src/index3.html +0 -430
package/src/pages/forms/general.html +0 -97
package/src/pages/layout/fixed-sidebar.html +0 -87
package/src/pages/layout/unfixed-sidebar.html +0 -87
package/src/pages/tables/simple.html +0 -336
package/src/pages/widgets/cards.html +0 -143
package/src/pages/widgets/small-box.html +0 -124
package/src/partials/_head.html +0 -31
package/src/partials/_scripts.html +0 -95
package/src/partials/dashboard/_footer.html +0 -9
package/src/partials/dashboard/_sidenav.html +0 -244
package/src/scss/_brand-container.scss +0 -72
package/src/scss/_content-header.scss +0 -9
package/src/scss/_content-wrapper.scss +0 -6
package/src/scss/_content.scss +0 -3
package/src/scss/_layout-fixed.scss +0 -43
package/src/scss/_layout-mobile.scss +0 -22
package/src/scss/_main-footer.scss +0 -28
package/src/scss/_main-header.scss +0 -40
package/src/scss/_main-sidebar.scss +0 -63
package/src/scss/_nav-sidebar.scss +0 -66
package/src/scss/_products.scss +0 -55
package/src/scss/_sidebar-close.scss +0 -6
package/src/scss/_sidebar-collapse.scss +0 -120
package/src/scss/_sidebar-horizontal.scss +0 -67
package/src/scss/_sidebar.scss +0 -11
package/src/scss/_users-list.scss +0 -45
package/src/scss/mixins/_brand-variant.scss +0 -9
package/src/scss/mixins/_cards.scss +0 -53
package/src/scss/mixins/_direct-chat.scss +0 -17
package/src/scss/mixins/_header-variant.scss +0 -22
package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
package/src/scss/mixins/_nav-treeview-light.scss +0 -89
package/src/scss/mixins/_sidebar-color.scss +0 -9

package/src/html/pages/forms/general.astro ADDED Viewed

@@ -0,0 +1,624 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+const title = "AdminLTE 4 | General Form Elements";
+const path = "../../../dist";
+const mainPage = "forms";
+const page = "general";
+---
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">General Form</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    General Form
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row g-4">
+              <!--begin::Col-->
+              <div class="col-12">
+                <div class="callout callout-info">
+                  For detailed documentaion of Form visit <a
+                    href="https://getbootstrap.com/docs/5.3/forms/overview/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="fw-bold"
+                  >
+                    Bootstrap Form
+                  </a>
+                </div>
+              </div>
+              <!--end::Col-->
+              <!--begin::Col-->
+              <div class="col-md-6">
+                <!--begin::Quick Example-->
+                <div class="card card-primary card-outline">
+                  <!--begin::Header-->
+                  <div class="card-header">
+                    <div class="card-title">Quick Example</div>
+                  </div>
+                  <!--end::Header-->
+                  <!--begin::Form-->
+                  <form>
+                    <!--begin::Body-->
+                    <div class="card-body">
+                      <div class="mb-3">
+                        <label for="exampleInputEmail1" class="form-label"
+                          >Email address</label
+                        >
+                        <input
+                          type="email"
+                          class="form-control"
+                          id="exampleInputEmail1"
+                          aria-describedby="emailHelp"
+                        />
+                        <div id="emailHelp" class="form-text">
+                          We'll never share your email with anyone else.
+                        </div>
+                      </div>
+                      <div class="mb-3">
+                        <label for="exampleInputPassword1" class="form-label"
+                          >Password</label
+                        >
+                        <input
+                          type="password"
+                          class="form-control"
+                          id="exampleInputPassword1"
+                        />
+                      </div>
+                      <div class="input-group mb-3">
+                        <input
+                          type="file"
+                          class="form-control"
+                          id="inputGroupFile02"
+                        />
+                        <label class="input-group-text" for="inputGroupFile02"
+                          >Upload</label
+                        >
+                      </div>
+                      <div class="mb-3 form-check">
+                        <input
+                          type="checkbox"
+                          class="form-check-input"
+                          id="exampleCheck1"
+                        />
+                        <label class="form-check-label" for="exampleCheck1"
+                          >Check me out</label
+                        >
+                      </div>
+                    </div>
+                    <!--end::Body-->
+                    <!--begin::Footer-->
+                    <div class="card-footer">
+                      <button type="submit" class="btn btn-primary"
+                        >Submit</button
+                      >
+                    </div>
+                    <!--end::Footer-->
+                  </form>
+                  <!--end::Form-->
+                </div>
+                <!--end::Quick Example-->
+                <!--begin::Input Group-->
+                <div class="card card-success card-outline">
+                  <!--begin::Header-->
+                  <div class="card-header">
+                    <div class="card-title">Input Group</div>
+                  </div>
+                  <!--end::Header-->
+                  <!--begin::Body-->
+                  <div class="card-body">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text" id="basic-addon1">@</span>
+                      <input
+                        type="text"
+                        class="form-control"
+                        placeholder="Username"
+                        aria-label="Username"
+                        aria-describedby="basic-addon1"
+                      />
+                    </div>
+                    <div class="input-group mb-3">
+                      <input
+                        type="text"
+                        class="form-control"
+                        placeholder="Recipient's username"
+                        aria-label="Recipient's username"
+                        aria-describedby="basic-addon2"
+                      />
+                      <span class="input-group-text" id="basic-addon2"
+                        >@example.com</span
+                      >
+                    </div>
+                    <div class="mb-3">
+                      <label for="basic-url" class="form-label"
+                        >Your vanity URL</label
+                      >
+                      <div class="input-group">
+                        <span class="input-group-text" id="basic-addon3"
+                          >https://example.com/users/</span
+                        >
+                        <input
+                          type="text"
+                          class="form-control"
+                          id="basic-url"
+                          aria-describedby="basic-addon3 basic-addon4"
+                        />
+                      </div>
+                      <div class="form-text" id="basic-addon4">
+                        Example help text goes outside the input group.
+                      </div>
+                    </div>
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">$</span>
+                      <input
+                        type="text"
+                        class="form-control"
+                        aria-label="Amount (to the nearest dollar)"
+                      />
+                      <span class="input-group-text">.00</span>
+                    </div>
+                    <div class="input-group mb-3">
+                      <input
+                        type="text"
+                        class="form-control"
+                        placeholder="Username"
+                        aria-label="Username"
+                      />
+                      <span class="input-group-text">@</span>
+                      <input
+                        type="text"
+                        class="form-control"
+                        placeholder="Server"
+                        aria-label="Server"
+                      />
+                    </div>
+                    <div class="input-group">
+                      <span class="input-group-text">With textarea</span>
+                      <textarea class="form-control" aria-label="With textarea"
+                      ></textarea>
+                    </div>
+                  </div>
+                  <!--end::Body-->
+                  <!--begin::Footer-->
+                  <div class="card-footer">
+                    <button type="submit" class="btn btn-success">Submit</button
+                    >
+                  </div>
+                  <!--end::Footer-->
+                </div>
+                <!--end::Input Group-->
+                <!--begin::Horizontal Form-->
+                <div class="card card-warning card-outline">
+                  <!--begin::Header-->
+                  <div class="card-header">
+                    <div class="card-title">Horizontal Form</div>
+                  </div>
+                  <!--end::Header-->
+                  <!--begin::Form-->
+                  <form>
+                    <!--begin::Body-->
+                    <div class="card-body">
+                      <div class="row mb-3">
+                        <label for="inputEmail3" class="col-sm-2 col-form-label"
+                          >Email</label
+                        >
+                        <div class="col-sm-10">
+                          <input
+                            type="email"
+                            class="form-control"
+                            id="inputEmail3"
+                          />
+                        </div>
+                      </div>
+                      <div class="row mb-3">
+                        <label
+                          for="inputPassword3"
+                          class="col-sm-2 col-form-label">Password</label
+                        >
+                        <div class="col-sm-10">
+                          <input
+                            type="password"
+                            class="form-control"
+                            id="inputPassword3"
+                          />
+                        </div>
+                      </div>
+                      <fieldset class="row mb-3">
+                        <legend class="col-form-label col-sm-2 pt-0"
+                          >Radios</legend
+                        >
+                        <div class="col-sm-10">
+                          <div class="form-check">
+                            <input
+                              class="form-check-input"
+                              type="radio"
+                              name="gridRadios"
+                              id="gridRadios1"
+                              value="option1"
+                              checked
+                            />
+                            <label class="form-check-label" for="gridRadios1">
+                              First radio
+                            </label>
+                          </div>
+                          <div class="form-check">
+                            <input
+                              class="form-check-input"
+                              type="radio"
+                              name="gridRadios"
+                              id="gridRadios2"
+                              value="option2"
+                            />
+                            <label class="form-check-label" for="gridRadios2">
+                              Second radio
+                            </label>
+                          </div>
+                          <div class="form-check disabled">
+                            <input
+                              class="form-check-input"
+                              type="radio"
+                              name="gridRadios"
+                              id="gridRadios3"
+                              value="option3"
+                              disabled
+                            />
+                            <label class="form-check-label" for="gridRadios3">
+                              Third disabled radio
+                            </label>
+                          </div>
+                        </div>
+                      </fieldset>
+                      <div class="row mb-3">
+                        <div class="col-sm-10 offset-sm-2">
+                          <div class="form-check">
+                            <input
+                              class="form-check-input"
+                              type="checkbox"
+                              id="gridCheck1"
+                            />
+                            <label class="form-check-label" for="gridCheck1">
+                              Example checkbox
+                            </label>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!--end::Body-->
+                    <!--begin::Footer-->
+                    <div class="card-footer">
+                      <button type="submit" class="btn btn-warning"
+                        >Sign in</button
+                      >
+                      <button type="submit" class="btn float-end">Cancel</button
+                      >
+                    </div>
+                    <!--end::Footer-->
+                  </form>
+                  <!--end::Form-->
+                </div>
+                <!--end::Horizontal Form-->
+              </div>
+              <!--end::Col-->
+              <!--begin::Col-->
+              <div class="col-md-6">
+                <!--begin::Different Height-->
+                <div class="card card-secondary card-outline">
+                  <!--begin::Header-->
+                  <div class="card-header">
+                    <div class="card-title">Different Height</div>
+                  </div>
+                  <!--end::Header-->
+                  <!--begin::Body-->
+                  <div class="card-body">
+                    <input
+                      class="form-control form-control-lg"
+                      type="text"
+                      placeholder=".form-control-lg"
+                      aria-label=".form-control-lg example"
+                    />
+                    <br />
+                    <input
+                      class="form-control"
+                      type="text"
+                      placeholder="Default input"
+                      aria-label="default input example"
+                    />
+                    <br />
+                    <input
+                      class="form-control form-control-sm"
+                      type="text"
+                      placeholder=".form-control-sm"
+                      aria-label=".form-control-sm example"
+                    />
+                  </div>
+                  <!--end::Body-->
+                </div>
+                <!--end::Different Height-->
+                <!--begin::Different Width-->
+                <div class="card card-danger card-outline">
+                  <!--begin::Header-->
+                  <div class="card-header">
+                    <div class="card-title">Different Width</div>
+                  </div>
+                  <!--end::Header-->
+                  <!--begin::Body-->
+                  <div class="card-body">
+                    <!--begin::Row-->
+                    <div class="row">
+                      <!--begin::Col-->
+                      <div class="col-3">
+                        <input
+                          type="text"
+                          class="form-control"
+                          placeholder=".col-3"
+                        />
+                      </div>
+                      <!--end::Col-->
+                      <!--begin::Col-->
+                      <div class="col-4">
+                        <input
+                          type="text"
+                          class="form-control"
+                          placeholder=".col-4"
+                        />
+                      </div>
+                      <!--end::Col-->
+                      <!--begin::Col-->
+                      <div class="col-5">
+                        <input
+                          type="text"
+                          class="form-control"
+                          placeholder=".col-5"
+                        />
+                      </div>
+                      <!--end::Col-->
+                    </div>
+                    <!--end::Row-->
+                  </div>
+                  <!--end::Body-->
+                </div>
+                <!--end::Different Width-->
+                <!--begin::Form Validation-->
+                <div class="card card-info card-outline">
+                  <!--begin::Header-->
+                  <div class="card-header">
+                    <div class="card-title">Form Validation</div>
+                  </div>
+                  <!--end::Header-->
+                  <!--begin::Form-->
+                  <form class="needs-validation" novalidate>
+                    <!--begin::Body-->
+                    <div class="card-body">
+                      <!--begin::Row-->
+                      <div class="row g-3">
+                        <!--begin::Col-->
+                        <div class="col-md-6">
+                          <label for="validationCustom01" class="form-label"
+                            >First name</label
+                          >
+                          <input
+                            type="text"
+                            class="form-control"
+                            id="validationCustom01"
+                            value="Mark"
+                            required
+                          />
+                          <div class="valid-feedback">Looks good!</div>
+                        </div>
+                        <!--end::Col-->
+                        <!--begin::Col-->
+                        <div class="col-md-6">
+                          <label for="validationCustom02" class="form-label"
+                            >Last name</label
+                          >
+                          <input
+                            type="text"
+                            class="form-control"
+                            id="validationCustom02"
+                            value="Otto"
+                            required
+                          />
+                          <div class="valid-feedback">Looks good!</div>
+                        </div>
+                        <!--end::Col-->
+                        <!--begin::Col-->
+                        <div class="col-md-6">
+                          <label
+                            for="validationCustomUsername"
+                            class="form-label">Username</label
+                          >
+                          <div class="input-group has-validation">
+                            <span
+                              class="input-group-text"
+                              id="inputGroupPrepend">@</span
+                            >
+                            <input
+                              type="text"
+                              class="form-control"
+                              id="validationCustomUsername"
+                              aria-describedby="inputGroupPrepend"
+                              required
+                            />
+                            <div class="invalid-feedback">
+                              Please choose a username.
+                            </div>
+                          </div>
+                        </div>
+                        <!--end::Col-->
+                        <!--begin::Col-->
+                        <div class="col-md-6">
+                          <label for="validationCustom03" class="form-label"
+                            >City</label
+                          >
+                          <input
+                            type="text"
+                            class="form-control"
+                            id="validationCustom03"
+                            required
+                          />
+                          <div class="invalid-feedback">
+                            Please provide a valid city.
+                          </div>
+                        </div>
+                        <!--end::Col-->
+                        <!--begin::Col-->
+                        <div class="col-md-6">
+                          <label for="validationCustom04" class="form-label"
+                            >State</label
+                          >
+                          <select
+                            class="form-select"
+                            id="validationCustom04"
+                            required
+                          >
+                            <option selected disabled value="">Choose...</option
+                            >
+                            <option>...</option>
+                          </select>
+                          <div class="invalid-feedback">
+                            Please select a valid state.
+                          </div>
+                        </div>
+                        <!--end::Col-->
+                        <!--begin::Col-->
+                        <div class="col-md-6">
+                          <label for="validationCustom05" class="form-label"
+                            >Zip</label
+                          >
+                          <input
+                            type="text"
+                            class="form-control"
+                            id="validationCustom05"
+                            required
+                          />
+                          <div class="invalid-feedback">
+                            Please provide a valid zip.
+                          </div>
+                        </div>
+                        <!--end::Col-->
+                        <!--begin::Col-->
+                        <div class="col-12">
+                          <div class="form-check">
+                            <input
+                              class="form-check-input"
+                              type="checkbox"
+                              value=""
+                              id="invalidCheck"
+                              required
+                            />
+                            <label class="form-check-label" for="invalidCheck">
+                              Agree to terms and conditions
+                            </label>
+                            <div class="invalid-feedback">
+                              You must agree before submitting.
+                            </div>
+                          </div>
+                        </div>
+                        <!--end::Col-->
+                      </div>
+                      <!--end::Row-->
+                    </div>
+                    <!--end::Body-->
+                    <!--begin::Footer-->
+                    <div class="card-footer">
+                      <button class="btn btn-info" type="submit"
+                        >Submit form</button
+                      >
+                    </div>
+                    <!--end::Footer-->
+                  </form>
+                  <!--end::Form-->
+                  <!--begin::JavaScript-->
+                  <script is:inline>
+                    // Example starter JavaScript for disabling form submissions if there are invalid fields
+                    (() => {
+                      "use strict";
+                      // Fetch all the forms we want to apply custom Bootstrap validation styles to
+                      const forms =
+                        document.querySelectorAll(".needs-validation");
+                      // Loop over them and prevent submission
+                      Array.from(forms).forEach((form) => {
+                        form.addEventListener(
+                          "submit",
+                          (event) => {
+                            if (!form.checkValidity()) {
+                              event.preventDefault();
+                              event.stopPropagation();
+                            }
+                            form.classList.add("was-validated");
+                          },
+                          false
+                        );
+                      });
+                    })();
+                  </script>
+                  <!--end::JavaScript-->
+                </div>
+                <!--end::Form Validation-->
+              </div>
+              <!--end::Col-->
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>