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

admin-lte 4.0.0-alpha2 → 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 (129) hide show

package/.bundlewatch.config.json +6 -6
package/.cache/.eslintcache +1 -1
package/.cache/.stylelintcache +1 -1
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/README.md +3 -3
package/dist/assets/img/AdminLTEFullLogo.png +0 -0
package/dist/css/adminlte.css +695 -318
package/dist/css/adminlte.css.map +1 -1
package/dist/css/adminlte.min.css +1 -1
package/dist/css/adminlte.min.css.map +1 -1
package/dist/css/adminlte.rtl.css +693 -316
package/dist/css/adminlte.rtl.css.map +1 -1
package/dist/css/adminlte.rtl.min.css +1 -1
package/dist/css/adminlte.rtl.min.css.map +1 -1
package/dist/js/adminlte.js +43 -63
package/dist/js/adminlte.js.map +1 -1
package/dist/js/adminlte.min.js +2 -2
package/dist/js/adminlte.min.js.map +1 -1
package/dist/pages/UI/timeline.html +389 -218
package/dist/pages/docs/browser-support.html +345 -204
package/dist/pages/docs/color-mode.html +560 -348
package/dist/pages/docs/components/main-header.html +579 -368
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 +372 -201
package/dist/pages/{docs.html → docs/license.html} +347 -218
package/dist/pages/examples/lockscreen.html +107 -0
package/dist/pages/examples/login-v2.html +148 -0
package/dist/pages/examples/login.html +45 -40
package/dist/pages/examples/register-v2.html +155 -0
package/dist/pages/examples/register.html +46 -41
package/dist/pages/forms/general.html +664 -202
package/dist/pages/index.html +514 -285
package/dist/pages/index2.html +665 -341
package/dist/pages/index3.html +415 -254
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 +344 -201
package/dist/pages/layout/layout-rtl.html +344 -201
package/dist/pages/layout/logo-switch.html +433 -0
package/dist/pages/layout/sidebar-mini.html +345 -202
package/dist/pages/layout/unfixed-sidebar.html +343 -201
package/dist/pages/tables/simple.html +437 -233
package/dist/pages/widgets/cards.html +389 -244
package/dist/pages/widgets/info-box.html +398 -215
package/dist/pages/widgets/small-box.html +349 -198
package/index.html +6 -10
package/package.json +27 -24
package/src/assets/img/AdminLTEFullLogo.png +0 -0
package/src/config/astro.config.mjs +3 -1
package/src/html/.prettierrc.js +11 -0
package/src/html/components/_head.astro +42 -26
package/src/html/components/_scripts.astro +38 -27
package/src/html/components/dashboard/_footer.astro +14 -8
package/src/html/components/dashboard/_sidenav.astro +343 -113
package/src/html/components/dashboard/_topbar.astro +90 -49
package/src/html/components/docs/{browser-support/index.md → browser-support.mdx} +2 -1
package/src/html/components/docs/color-mode.mdx +169 -0
package/src/html/components/docs/components/{main-header-1.md → main-header.mdx} +60 -21
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/index.md → introduction.mdx} +27 -2
package/src/html/components/docs/license.mdx +9 -0
package/src/html/components/javascript/treeview.mdx +39 -0
package/src/html/pages/UI/timeline.astro +111 -48
package/src/html/pages/docs/browser-support.astro +24 -11
package/src/html/pages/docs/color-mode.astro +89 -42
package/src/html/pages/docs/components/main-header.astro +133 -46
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/{index.astro → introduction.astro} +24 -11
package/src/html/pages/docs/javascript/treeview.astro +71 -0
package/src/html/pages/docs/layout.astro +62 -19
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/html/pages/examples/login.astro +34 -16
package/src/html/pages/examples/register-v2.astro +116 -0
package/src/html/pages/examples/register.astro +36 -18
package/src/html/pages/forms/general.astro +567 -36
package/src/html/pages/index.astro +389 -152
package/src/html/pages/index2.astro +682 -250
package/src/html/pages/index3.astro +290 -189
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 +52 -27
package/src/html/pages/layout/layout-rtl.astro +53 -28
package/src/html/pages/layout/logo-switch.astro +212 -0
package/src/html/pages/layout/sidebar-mini.astro +53 -28
package/src/html/pages/layout/unfixed-sidebar.astro +51 -27
package/src/html/pages/tables/simple.astro +206 -66
package/src/html/pages/widgets/cards.astro +134 -69
package/src/html/pages/widgets/info-box.astro +96 -41
package/src/html/pages/widgets/small-box.astro +93 -32
package/src/scss/_app-content.scss +52 -0
package/src/scss/_app-footer.scss +1 -1
package/src/scss/_app-main.scss +2 -5
package/src/scss/_app-sidebar.scss +244 -70
package/src/scss/_bootstrap-variables.scss +4 -4
package/src/scss/_cards.scss +31 -7
package/src/scss/_compact-mode.scss +79 -0
package/src/scss/_small-box.scss +0 -3
package/src/scss/_variables.scss +21 -4
package/src/scss/mixins/_animations.scss +0 -5
package/src/scss/pages/_lockscreen.scss +74 -0
package/src/scss/pages/_login_and_register.scss +0 -3
package/src/scss/parts/_core.scss +2 -0
package/src/scss/parts/_pages.scss +1 -0
package/src/ts/card-widget.ts +17 -50
package/src/ts/direct-chat.ts +2 -2
package/src/ts/layout.ts +2 -2
package/src/ts/push-menu.ts +3 -20
package/src/ts/treeview.ts +14 -8
package/src/ts/util/index.ts +14 -12
package/src/utils/index.js +20 -3
package/src/html/components/docs/color-mode/navbar-html.md +0 -80
package/src/html/components/docs/color-mode/toggle-script.md +0 -48

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

@@ -1,28 +1,36 @@
 ---
-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';
+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'
+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} />
-      <!-- Main content -->
+      <!--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>
@@ -30,64 +38,587 @@ const page = 'general'
               <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>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    General Form
+                  </li>
                 </ol>
               </div>
             </div>
+            <!--end::Row-->
           </div>
+          <!--end::Container-->
         </div>
-        <!-- Main content -->
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
         <div class="app-content">
+          <!--begin::Container-->
           <div class="container-fluid">
+            <!--begin::Row-->
             <div class="row g-4">
-              <!-- Start column -->
+              <!--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">
-                <!-- general form elements -->
+                <!--begin::Quick Example-->
                 <div class="card card-primary card-outline">
+                  <!--begin::Header-->
                   <div class="card-header">
-                    <div class="card-title">
-                      Quick Example
-                    </div>
+                    <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>
+                        <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">
+                        <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>
+                        <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>
+                        <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>
+                      <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>
-                <!-- /.card -->
+                <!--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>
-            <!-- /.row -->
-          </div><!-- /.container-fluid -->
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
         </div>
-        <!-- /.content -->
+        <!--end::App Content-->
       </main>
-      <!-- /.app-content -->
+      <!--end::App Main-->
       <Footer />
     </div>
-    <!--  ./app-wrapper -->
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
     <Scripts path={path} />
-  </body>
+    <!--end::Script-->
+  </body><!--end::Body-->
 </html>