ultimate-jekyll-manager 0.0.97 → 0.0.98

package/CLAUDE.md

@@ -63,6 +63,48 @@ When creating pages in the consuming project, follow these guidelines:
 DO NOT USE `bg-light`, `bg-dark`, `text-light`, or `text-dark`. We support BOTH light and dark mode, so instead use `bg-body`, `bg-body-secondary`, `bg-body-tertiary`, `text-body` and for buttons you can use `btn-adaptive` or `btn-outline-adaptive`.
 These classes adapt to light and dark mode automatically.
 
+## Page Loading State & Button Protection
+Ultimate Jekyll implements a sophisticated system to prevent premature button clicks during page initialization. This prevents race conditions and ensures JavaScript is fully loaded before users can trigger actions.
+
+### How It Works:
+1. **Initial State**: The HTML element starts with `data-page-loading="true"` and `aria-busy="true"` attributes (set in `src/defaults/dist/_layouts/core/root.html`)
+2. **Protection During Load**: While `data-page-loading` is present, certain elements are automatically disabled via CSS and JavaScript
+3. **Ready State**: When JavaScript initialization completes, these attributes are removed by `src/assets/js/core/complete.js`
+
+### What Gets Protected:
+When `data-page-loading` is active, the following elements are automatically protected from clicks:
+
+- **All form buttons**: `<button>`, `<input type="submit">`, `<input type="button">`, `<input type="reset">`
+- **Elements with `.btn` class**: Standard Bootstrap buttons
+- **Elements with `.btn-action` class**: Custom action triggers (see below)
+- **Always disabled**: Any element with `disabled` attribute, `.disabled` class, or `:disabled` state
+
+### The `.btn-action` Class:
+Use the `.btn-action` class to selectively protect non-standard elements that trigger important actions:
+
+```html
+<!-- These will be protected during page load -->
+<a href="/api/delete" class="custom-link btn-action">Delete Item</a>
+<div class="card-action btn-action" onclick="processData()">Process</div>
+<span class="text-link btn-action" data-action="save">Save Changes</span>
+
+<!-- These will NOT be protected (regular navigation/UI) -->
+<a href="/about" class="btn btn-primary">About Us</a>
+<button data-bs-toggle="modal">Show Info</button>
+<button data-bs-toggle="collapse">Toggle Details</button>
+```
+
+### When to Use `.btn-action`:
+- **Use it for**: API calls, form submissions, data modifications, payment processing, destructive actions
+- **Don't use it for**: Navigation links, UI toggles, modals, accordions, tabs, harmless interactions
+
+### Implementation Files:
+- **CSS Styles**: `src/assets/css/core/utilities.scss` - Applies `cursor: not-allowed` and disabled styling
+- **Click Prevention**: `src/defaults/dist/_includes/core/body.html` - Inline script that prevents clicks
+- **State Removal**: `src/assets/js/core/complete.js` - Removes `data-page-loading` when ready
+
+This system ensures a smooth, error-free user experience by preventing premature interactions while maintaining full flexibility for developers.
+
 ## Lazy Loading
 Ultimate Jekyll uses a custom lazy loading system powered by web-manager. Elements can be lazy-loaded using the `data-lazy` attribute with the following format:
 

package/README.md

@@ -196,6 +196,72 @@ member:
 `uj-language-dropdown`:
 `uj-language-dropdown-item`
 
+### Utility Classes
+
+#### Max-Width Utilities
+Ultimate Jekyll includes max-width utility classes based on Bootstrap's breakpoint sizes. These classes constrain an element's maximum width to match Bootstrap's standard responsive breakpoints:
+
+- `.mw-sm` - Sets max-width to 576px
+- `.mw-md` - Sets max-width to 768px
+- `.mw-lg` - Sets max-width to 992px
+- `.mw-xl` - Sets max-width to 1200px
+- `.mw-xxl` - Sets max-width to 1400px
+
+**Usage Examples:**
+```html
+<!-- Constrain a form to medium width -->
+<form class="mw-md">
+  <!-- Form content stays readable at max 768px wide -->
+</form>
+
+<!-- Limit content width for better readability -->
+<div class="container mw-lg">
+  <!-- Content won't exceed 992px even on larger screens -->
+</div>
+
+<!-- Combine with margin utilities for centering -->
+<div class="mw-sm mx-auto">
+  <!-- Content is max 576px wide and centered -->
+</div>
+```
+
+These utilities are particularly useful for:
+- Improving readability by preventing text from spanning too wide
+- Creating consistent content widths across different sections
+- Constraining forms, cards, and modals to reasonable sizes
+- Maintaining design consistency with Bootstrap's grid system
+
+### Page Loading Protection System
+
+Ultimate Jekyll includes an automatic protection system that prevents users from clicking buttons before JavaScript is fully loaded, eliminating race conditions and errors.
+
+#### How It Works
+1. Pages start with `data-page-loading="true"` on the HTML element
+2. Certain buttons are automatically protected from clicks during this state
+3. When JavaScript finishes loading, the attribute is removed and buttons become clickable
+
+#### Protected Elements
+During page load, these elements are automatically protected:
+- All form buttons (`<button>`, `<input type="submit">`, etc.)
+- Elements with `.btn` class (Bootstrap buttons)
+- Elements with `.btn-action` class (custom action triggers)
+
+#### Using `.btn-action` Class
+Add the `.btn-action` class to protect custom elements that trigger important actions:
+
+```html
+<!-- These will be protected during page load -->
+<a href="/api/delete" class="custom-link btn-action">Delete Item</a>
+<div onclick="saveData()" class="btn-action">Save</div>
+
+<!-- Regular navigation links are NOT protected -->
+<a href="/about">About Us</a>
+<button data-bs-toggle="modal">Show Modal</button>
+```
+
+**Use `.btn-action` for:** API calls, form submissions, data modifications, payments, destructive actions
+**Don't use for:** Navigation, UI toggles, modals, accordions, harmless interactions
+
 ### Special Query Parameters
 
 #### Authentication

package/_backup/checkout copy 2.html

@@ -0,0 +1,392 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/core/cover
+
+### THEME CONFIG ###
+theme:
+  main:
+    align: "start"
+
+### WEB MANAGER CONFIG ###
+web_manager:
+  auth:
+    config:
+      policy: "authenticated"
+
+### PAGE CONFIG ###
+---
+
+<!-- Fullscreen Preloader -->
+<div id="checkout-preloader" class="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-body" style="z-index: 9999;">
+  <div class="text-center">
+    <div class="spinner-border spinner-border-lg text-primary mb-3" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+    <h5 class="text-muted">Loading secure checkout...</h5>
+    <p class="text-muted small mb-0">Please be patient while your order is prepared.</p>
+  </div>
+</div>
+
+<!-- Error Message Container -->
+<div id="checkout-error-container" class="d-none">
+  <div class="row justify-content-center">
+    <div class="col-lg-8">
+      <div class="alert alert-danger" role="alert">
+        <h4 class="alert-heading">Oops! Something went wrong</h4>
+        <p id="checkout-error-message"></p>
+        <hr>
+        <button class="btn btn-outline-danger" onclick="window.location.reload()">
+          Try again
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Checkout Section -->
+<section id="checkout-content" class="col-12 col-xl-10 mw-xl">
+  <div class="row mb-4">
+    <div class="col-12">
+      <h1 class="h2 mb-0 text-center text-lg-start">Checkout</h1>
+    </div>
+  </div>
+  <div class="card border-0 shadow-lg">
+    <div class="card-body p-3 p-md-5">
+      <!-- Title Row -->
+      <!-- <div class="row mb-4">
+        <div class="col-12">
+          <h1 class="h2 mb-0 text-center text-lg-start">Checkout</h1>
+        </div>
+      </div> -->
+
+      <!-- Main Checkout Form -->
+      <form id="checkout-form" autocomplete="on" novalidate>
+        <!-- Content Row -->
+        <div class="row">
+          <!-- Section 1: Billing Cycle & Customer Info -->
+          <div class="col-12 col-lg-7 mb-4 order-1">
+            <!-- Billing Cycle Selection -->
+            <div class="_card _border-1 _border-secondary _shadow-sm mb-4">
+              <div class="card-body">
+                <h3 class="h5 fw-bold mb-3">Billing Cycle</h3>
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                  <h6 class="fw-bold mb-0">
+                    <span id="selected-plan-name">Loading...</span> Plan
+                  </h6>
+                  <a href="/pricing" class="small text-decoration-none">
+                    {% uj_icon "arrow-left", "me-1" %}
+                    Change plan
+                  </a>
+                </div>
+
+                <!-- Subscription Toggle (hidden by default) -->
+                <div id="subscription-toggle" class="d-none">
+                  <div class="row g-3">
+                    <div class="col-6">
+                      <input type="radio" class="btn-check" name="billing-cycle" id="annually" value="annually">
+                      <label class="btn btn-outline-secondary text-body w-100 p-3 position-relative border-2 rounded-3 _animation-hover-up" for="annually">
+                        <span id="savings-badge" class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-primary px-3 py-2">Save --</span>
+                        <div class="d-flex align-items-center justify-content-center mb-2">
+                          <span class="bg-secondary bg-opacity-25 text-secondary rounded-circle d-inline-flex align-items-center justify-content-center">
+                            {% uj_icon "check", "fa-md p-1" %}
+                          </span>
+                        </div>
+                        <div class="fs-4 mb-1">
+                          <span id="annually-price-lg">$--</span>
+                          <span class="text-muted fs-6 fw-normal">/mo</span>
+                        </div>
+                        <div class="text-muted small">Annual Plan</div>
+                      </label>
+                    </div>
+                    <div class="col-6">
+                      <input type="radio" class="btn-check" name="billing-cycle" id="monthly" value="monthly">
+                      <label class="btn btn-outline-secondary text-body w-100 p-3 border-2 rounded-3 _animation-hover-up" for="monthly">
+                        <div class="d-flex align-items-center justify-content-center mb-2">
+                          <span class="bg-secondary bg-opacity-25 text-secondary rounded-circle d-inline-flex align-items-center justify-content-center">
+                            {% uj_icon "check", "fa-md p-1" %}
+                          </span>
+                        </div>
+                        <div class="fs-4 mb-1">
+                          <span id="monthly-price-lg">$--</span>
+                          <span class="text-muted fs-6 fw-normal">/mo</span>
+                        </div>
+                        <div class="text-muted small">Monthly Plan</div>
+                      </label>
+                    </div>
+                  </div>
+
+                  <!-- Payment text under the boxes -->
+                  <div class="text-muted small text-center mt-2">
+                    * Pay <span class="mb-0" id="billing-cycle-payment-text">$-- monthly</span>
+                  </div>
+
+                  <!-- Free Trial Badge -->
+                  <div id="trial-badge" class="alert alert-success mt-3 mb-0 p-2 d-none">
+                    <small class="d-flex align-items-center mb-0">
+                      {% uj_icon "gift", "me-2" %}
+                      <span id="trial-message"></span>
+                    </small>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <hr>
+
+            <!-- Customer Information Card -->
+            <div class="_card _border-1 _border-secondary _shadow-sm mb-3">
+              <div class="card-body">
+                <h3 class="h5 fw-bold mb-3">Customer Information</h3>
+
+                <div class="text-start">
+                  Managing order for <strong data-wm-bind="@text auth.user.email"></strong>, <a href="#" id="switch-account">switch account</a>.
+                </div>
+
+                <!-- Customer form fields will go here when needed -->
+                <div id="customer-fields" class="text-start">
+                  <!-- Future form fields like shipping address, VAT number, etc. -->
+                  <!-- <div class="mb-3">
+                    <label for="customer-name" class="form-label fw-semibold">
+                      Name <span class="text-danger">*</span>
+                    </label>
+                    <input type="text" class="form-control form-control-md" id="customer-name" name="customer_name" placeholder="Enter your full name" autocomplete="name" required>
+                  </div> -->
+                </div>
+              </div>
+            </div>
+
+            <!-- Divider between Customer Info and Payment Method -->
+            <hr>
+
+            <!-- Payment Method Card (Desktop position - in same column) -->
+            <div class="_card _border-1 _border-secondary _shadow-sm mb-0 d-none d-lg-block">
+              <div class="card-body">
+                <h3 class="h5 fw-bold mb-3">Payment Method</h3>
+
+                <!-- Direct Payment Buttons -->
+                <div class="d-grid gap-3">
+                  <!-- Credit/Debit Card Button -->
+                  <button type="submit" class="btn btn-adaptive btn-lg py-3 d-flex align-items-center justify-content-center" id="pay-with-card" data-payment-method="card" data-action="pay-card">
+                    {% uj_icon "credit-card", "me-2 fa-3xl" %}
+                    <span class="fw-semibold">Credit/Debit</span>
+                  </button>
+
+                  <!-- PayPal Button -->
+                  <button type="submit" class="btn btn-paypal btn-lg py-3 d-flex align-items-center justify-content-center" id="pay-with-paypal" data-payment-method="paypal" data-action="pay-paypal">
+                    <img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png"
+                        alt="PayPal"
+                        height="28"
+                        style="max-height: 28px;">
+                  </button>
+
+                  <!-- Apple Pay Button (shown conditionally) -->
+                  <button type="submit" class="btn btn-dark btn-lg py-3 d-flex align-items-center justify-content-center d-none" id="pay-with-apple-pay" data-payment-method="apple-pay" data-action="pay-apple-pay">
+                    {% uj_icon "apple", "me-2 fa-3xl" %}
+                    <span class="fw-semibold">Apple Pay</span>
+                  </button>
+
+                  <!-- Google Pay Button (shown conditionally) -->
+                  <button type="submit" class="btn btn-outline-dark btn-lg py-3 d-flex align-items-center justify-content-center d-none" id="pay-with-google-pay" data-payment-method="google-pay" data-action="pay-google-pay">
+                    <img src="https://www.gstatic.com/instantbuy/svg/dark_gpay.svg"
+                        alt="Google Pay"
+                        height="24"
+                        class="me-2">
+                    <span class="fw-semibold">Google Pay</span>
+                  </button>
+
+                  <!-- Crypto Button -->
+                  <button type="submit" class="btn btn-outline-adaptive btn-lg py-3 d-flex align-items-center justify-content-center" id="pay-with-crypto" data-payment-method="crypto" data-action="pay-crypto">
+                    {% uj_icon "bitcoin", "me-2 fa-3xl" %}
+                    <span class="fw-semibold">Crypto</span>
+                  </button>
+
+                  <p class="text-muted small text-center mb-0">
+                    By purchasing, you agree to our <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a>.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Security badges -->
+            <div class="text-center mt-2 d-none d-lg-block">
+              <div class="d-flex justify-content-center align-items-center gap-3 small text-muted">
+                <span>{% uj_icon "shield-check", "text-success" %} Secure Checkout</span>
+                <span>{% uj_icon "lock", "text-success" %} SSL Encrypted</span>
+                <span>{% uj_icon "check-circle", "text-success" %} Money-back guarantee</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Section 2: Order Summary -->
+          <div class="col-12 col-lg-5 mb-4 mb-lg-0 order-2 order-lg-2">
+            <div class="order-summary-sticky">
+              <div class="_card _border-1 _border-secondary _shadow-sm">
+                <div class="card-body">
+                  <h3 class="h5 fw-bold mb-3">Order Summary</h3>
+
+                  <!-- Product Item -->
+                  <div class="order-item mb-4">
+                    <div class="d-flex align-items-center">
+                      <div class="position-relative me-3">
+                        <div class="product-thumbnail bg-light rounded-3 d-flex align-items-center justify-content-center">
+                          <img src="{{ site.brand.images.brandmark }}?cb={{ site.uj.cache_breaker }}" class="img-fluid p-3" alt="{{ site.brand.name }} Plan Icon"/>
+                        </div>
+                        <span class="position-absolute badge rounded-pill bg-primary" style="top: -0.375rem; right: -0.375rem;">
+                          1
+                          <span class="visually-hidden">quantity</span>
+                        </span>
+                      </div>
+                      <div class="flex-grow-1 text-start">
+                        <h6 class="mb-1" id="product-name">Loading...</h6>
+                        <p class="text-muted small mb-0" id="product-description">Loading product details...</p>
+                      </div>
+                      <div class="text-end d-none">
+                        <div class="fw-bold" id="product-price">$--</div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Discount Code -->
+                  <div class="mb-4">
+                    <div class="input-group">
+                      <input type="text" class="form-control rounded-start-3 border py-2 px-3 text-start" id="discount-code" name="discount-code" placeholder="Discount code" autocomplete="off">
+                      <button class="btn btn-adaptive rounded-end-3 border px-4" type="button" id="apply-discount" data-action="apply-discount">Apply</button>
+                    </div>
+
+                    <!-- Discount Messages -->
+                    <div class="text-start">
+                      <div id="discount-message-loading" class="mt-2 text-primary small d-none">
+                        {% uj_icon "clock", "me-1" %} Checking code...
+                      </div>
+                      <div id="discount-message-success" class="mt-2 text-success small d-none">
+                        {% uj_icon "check-circle", "me-1" %} <span id="confirmation-text">Discount applied</span>
+                      </div>
+                      <div id="discount-message-error" class="mt-2 text-danger small d-none">
+                        {% uj_icon "times-circle", "me-1" %} <span id="error-text">Invalid discount code</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Price Breakdown -->
+                  <div>
+                    <div class="d-flex justify-content-between mb-2">
+                      <span class="text-muted">Subtotal</span>
+                      <span id="subtotal">$--</span>
+                    </div>
+
+                    <div class="d-flex justify-content-between mb-2 text-success d-none" id="discount-row">
+                      <span>Discount (<span id="discount-percent"></span>)</span>
+                      <span>-$<span id="discount-amount"></span></span>
+                    </div>
+
+                    <div class="d-flex justify-content-between mb-3 text-success d-none" id="trial-discount-row">
+                      <span>Free Trial Discount</span>
+                      <span>-$<span id="trial-discount-amount"></span></span>
+                    </div>
+
+                    <div class="d-flex justify-content-between align-items-center mb-3">
+                      <span class="fw-bold fs-5">Total Due Today</span>
+                      <span class="fw-bold fs-4" id="total-price">$--</span>
+                    </div>
+
+                    <hr class="my-3">
+
+                    <div class="d-flex justify-content-between align-items-center text-muted">
+                      <span>Recurring</span>
+                      <span id="recurring-amount">$-- <span id="recurring-period">monthly</span></span>
+                    </div>
+
+                    <!-- Subscription Terms -->
+                    <div id="subscription-terms" class="mt-3 rounded-3 small text-body-tertiary d-none text-start">
+                      <span id="terms-text"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Trust Badges -->
+              <div class="text-center mt-2">
+                <div class="d-flex justify-content-center align-items-center gap-3 text-muted">
+                  <a href="javascript:;" class="text-decoration-none btn-link" id="checkout-help-button">
+                    {% uj_icon "messages-question", "text-primary" %} Need help? Chat with us now!
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Section 3: Payment Method (Mobile only) -->
+          <div class="col-12 mb-4 order-3 d-lg-none">
+            <!-- Payment Method Card (Mobile position) -->
+            <div class="_card _border-1 _border-secondary _shadow-sm mb-0">
+              <div class="card-body">
+                <h3 class="h5 fw-bold mb-3">Payment Method</h3>
+
+                <!-- Direct Payment Buttons -->
+                <div class="d-grid gap-3">
+                  <!-- Credit/Debit Card Button -->
+                  <button type="submit" class="btn btn-adaptive btn-lg py-3 d-flex align-items-center justify-content-center" id="pay-with-card" data-payment-method="card" data-action="pay-card">
+                    {% uj_icon "credit-card", "me-2 fa-3xl" %}
+                    <span class="fw-semibold">Credit/Debit</span>
+                  </button>
+
+                  <!-- PayPal Button -->
+                  <button type="submit" class="btn btn-paypal btn-lg py-3 d-flex align-items-center justify-content-center" id="pay-with-paypal" data-payment-method="paypal" data-action="pay-paypal">
+                    <img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png"
+                        alt="PayPal"
+                        height="28"
+                        style="max-height: 28px;">
+                  </button>
+
+                  <!-- Apple Pay Button (shown conditionally) -->
+                  <button type="submit" class="btn btn-dark btn-lg py-3 d-flex align-items-center justify-content-center d-none" id="pay-with-apple-pay" data-payment-method="apple-pay" data-action="pay-apple-pay">
+                    {% uj_icon "apple", "me-2 fa-3xl" %}
+                    <span class="fw-semibold">Apple Pay</span>
+                  </button>
+
+                  <!-- Google Pay Button (shown conditionally) -->
+                  <button type="submit" class="btn btn-outline-dark btn-lg py-3 d-flex align-items-center justify-content-center d-none" id="pay-with-google-pay" data-payment-method="google-pay" data-action="pay-google-pay">
+                    <img src="https://www.gstatic.com/instantbuy/svg/dark_gpay.svg"
+                        alt="Google Pay"
+                        height="24"
+                        class="me-2">
+                    <span class="fw-semibold">Google Pay</span>
+                  </button>
+
+                  <!-- Crypto Button -->
+                  <button type="submit" class="btn btn-outline-adaptive btn-lg py-3 d-flex align-items-center justify-content-center" id="pay-with-crypto" data-payment-method="crypto" data-action="pay-crypto">
+                    {% uj_icon "bitcoin", "me-2 fa-3xl" %}
+                    <span class="fw-semibold">Crypto</span>
+                  </button>
+
+                  <!-- Divider -->
+                  <!-- <div class="d-flex align-items-center my-2">
+                    <hr class="flex-grow-1">
+                    <span class="text-muted small px-3">or pay with cryptocurrency</span>
+                    <hr class="flex-grow-1">
+                  </div> -->
+
+                  <p class="text-muted small text-center mb-0">
+                    By purchasing, you agree to our <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a>.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Security badges (Mobile) -->
+            <div class="text-center mt-2 d-lg-none">
+              <div class="d-flex justify-content-center align-items-center gap-3 small text-muted">
+                <span>{% uj_icon "shield-check", "text-success" %} Secure Checkout</span>
+                <span>{% uj_icon "lock", "text-success" %} SSL Encrypted</span>
+                <span>{% uj_icon "check-circle", "text-success" %} Money-back guarantee</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </form>
+    </div>
+  </div>
+</section>
+
+{{ content | uj_content_format }}