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

admin-lte 4.0.0-alpha2 → 4.0.0-beta1

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 (142) hide show

package/.bundlewatch.config.json +6 -6
package/.cache/.eslintcache +1 -1
package/.cache/.stylelintcache +1 -1
package/.gitpod.yml +1 -1
package/README.md +9 -4
package/dist/assets/img/AdminLTEFullLogo.png +0 -0
package/dist/css/adminlte.css +879 -418
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/adminlte.rtl.css +886 -416
package/dist/css/adminlte.rtl.css.map +1 -1
package/dist/css/adminlte.rtl.min.css +2 -2
package/dist/css/adminlte.rtl.min.css.map +1 -1
package/dist/js/adminlte.js +178 -96
package/dist/js/adminlte.js.map +1 -1
package/dist/js/adminlte.min.js +3 -3
package/dist/js/adminlte.min.js.map +1 -1
package/dist/pages/UI/general.html +895 -0
package/dist/pages/UI/timeline.html +309 -515
package/dist/pages/docs/browser-support.html +265 -433
package/dist/pages/docs/color-mode.html +482 -615
package/dist/pages/docs/components/main-header.html +516 -703
package/dist/pages/docs/components/main-sidebar.html +550 -0
package/dist/pages/docs/faq.html +433 -0
package/dist/pages/docs/how-to-contribute.html +474 -0
package/dist/pages/docs/introduction.html +463 -0
package/dist/pages/docs/javascript/treeview.html +453 -0
package/dist/pages/docs/layout.html +293 -433
package/dist/pages/docs/license.html +436 -0
package/dist/pages/examples/lockscreen.html +69 -0
package/dist/pages/examples/login-v2.html +88 -0
package/dist/pages/examples/login.html +49 -100
package/dist/pages/examples/register-v2.html +90 -0
package/dist/pages/examples/register.html +50 -103
package/dist/pages/forms/general.html +430 -454
package/dist/pages/index.html +466 -740
package/dist/pages/index2.html +672 -1041
package/dist/pages/index3.html +371 -629
package/dist/pages/layout/collapsed-sidebar.html +441 -0
package/dist/pages/layout/fixed-complete.html +541 -0
package/dist/pages/layout/fixed-sidebar.html +263 -446
package/dist/pages/layout/layout-rtl.html +263 -445
package/dist/pages/layout/logo-switch.html +234 -0
package/dist/pages/layout/sidebar-mini.html +263 -445
package/dist/pages/layout/unfixed-sidebar.html +263 -445
package/dist/pages/tables/simple.html +314 -499
package/dist/pages/widgets/cards.html +326 -629
package/dist/pages/widgets/info-box.html +348 -674
package/dist/pages/widgets/small-box.html +279 -465
package/index.html +6 -10
package/package.json +34 -30
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 +32 -26
package/src/html/components/_scripts.astro +27 -28
package/src/html/components/dashboard/_footer.astro +14 -8
package/src/html/components/dashboard/_sidenav.astro +352 -113
package/src/html/components/dashboard/_topbar.astro +99 -50
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} +30 -5
package/src/html/components/docs/license.mdx +9 -0
package/src/html/components/javascript/treeview.mdx +39 -0
package/src/html/pages/UI/general.astro +1451 -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 +91 -42
package/src/html/pages/docs/components/main-header.astro +134 -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 +568 -37
package/src/html/pages/index.astro +403 -157
package/src/html/pages/index2.astro +715 -255
package/src/html/pages/index3.astro +298 -197
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 +226 -86
package/src/html/pages/widgets/cards.astro +137 -72
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 +6 -5
package/src/scss/_app-sidebar.scss +244 -70
package/src/scss/_bootstrap-variables.scss +26 -22
package/src/scss/_callouts.scss +6 -0
package/src/scss/_cards.scss +32 -7
package/src/scss/_compact-mode.scss +79 -0
package/src/scss/_direct-chat.scss +5 -0
package/src/scss/_dropdown.scss +1 -0
package/src/scss/_info-box.scss +2 -10
package/src/scss/_small-box.scss +0 -3
package/src/scss/_timeline.scss +1 -0
package/src/scss/_toasts.scss +33 -0
package/src/scss/_variables.scss +32 -9
package/src/scss/adminlte.scss +1 -2
package/src/scss/mixins/_animations.scss +0 -5
package/src/scss/pages/_lockscreen.scss +75 -0
package/src/scss/pages/_login_and_register.scss +1 -3
package/src/scss/parts/_core.scss +2 -0
package/src/scss/parts/_extra-components.scss +1 -0
package/src/scss/parts/_pages.scss +1 -0
package/src/ts/adminlte.ts +3 -1
package/src/ts/card-widget.ts +20 -52
package/src/ts/direct-chat.ts +5 -4
package/src/ts/fullscreen.ts +110 -0
package/src/ts/layout.ts +5 -4
package/src/ts/push-menu.ts +6 -22
package/src/ts/treeview.ts +34 -11
package/src/ts/util/index.ts +15 -13
package/src/utils/index.js +20 -3
package/.idea/AdminLTE.iml +0 -12
package/.idea/codeStyles/Project.xml +0 -29
package/.idea/codeStyles/codeStyleConfig.xml +0 -5
package/.idea/inspectionProfiles/Project_Default.xml +0 -7
package/.idea/modules.xml +0 -8
package/.idea/php.xml +0 -28
package/.idea/vcs.xml +0 -6
package/dist/pages/docs.html +0 -617
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 documentation of Form visit <a
+                    href="https://getbootstrap.com/docs/5.3/forms/overview/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="callout-link"
+                  >
+                    Bootstrap Form
+                  </a>
+                </div>
+              </div>
+              <!--end::Col-->
+              <!--begin::Col-->
               <div class="col-md-6">
-                <!-- general form elements -->
-                <div class="card card-primary card-outline">
+                <!--begin::Quick Example-->
+                <div class="card card-primary card-outline mb-4">
+                  <!--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 mb-4">
+                  <!--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 mb-4">
+                  <!--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 mb-4">
+                  <!--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 mb-4">
+                  <!--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 mb-4">
+                  <!--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>