elpaypg 0.0.0-stage → 2.0.1

package/public/views/partials/auth.html

@@ -0,0 +1,110 @@
+        <!-- PRE-GATEWAY CUSTOMER AUTHENTICATION VIEW (WHATSAPP BERRY PROTOCOL OTP FLOW) -->
+        <div id="preGatewayAuthView" hidden>
+          <h2 class="ypg-page-title" id="authViewMainTitle">Sign in to Pay</h2>
+          <div class="ypg-auth-box">
+            <div class="ypg-auth-sub-desc" id="authViewSubTitle">Enter your 10-digit WhatsApp mobile number to continue
+            </div>
+
+            <!-- Saved Account (1-Tap Selection) -->
+            <div class="ypg-saved-accs-wrapper" id="preAuthSavedAccountsContainer" hidden>
+              <div
+                style="font-size:11px; font-weight:800; color:var(--ypg-text-muted); text-transform:uppercase; margin-bottom:8px;">
+                Saved Account
+              </div>
+              <div id="savedAccountsList"></div>
+            </div>
+
+            <!-- STEP 1: ENTER MOBILE NUMBER -->
+            <div id="authStepMobile">
+              <div class="ypg-input-group">
+                <label class="ypg-input-label">WhatsApp Mobile Number</label>
+                <div class="ypg-phone-input-wrap">
+                  <div class="ypg-phone-prefix">
+                    <span>🇮🇳</span>
+                    <span>+91</span>
+                  </div>
+                  <input type="tel" class="ypg-phone-control" id="authMobileInput" placeholder="10-digit mobile number"
+                    maxlength="10" inputmode="numeric" />
+                </div>
+              </div>
+
+              <div
+                style="font-size:12px; color:var(--ypg-text-muted); margin-bottom:14px; display:flex; align-items:center; gap:6px;">
+                <span>💬</span>
+                <span>We'll verify your mobile via WhatsApp OTP</span>
+              </div>
+
+              <button type="button" class="ypg-btn-auth-action" id="btnAuthContinue" onclick="handleAuthMobileSubmit()">
+                <span>Continue</span> &rsaquo;
+              </button>
+            </div>
+
+            <!-- STEP 2: NEW CUSTOMER SIGN UP (Shown only if user does NOT exist) -->
+            <div id="authStepSignup" hidden>
+              <div class="ypg-auth-badge-banner">
+                <div>
+                  <span>Mobile: </span>
+                  <strong id="authSignupPhoneBadge">+91 </strong>
+                </div>
+                <button type="button" class="ypg-btn-link" onclick="goToAuthStep('mobile')">Change</button>
+              </div>
+
+              <div style="font-size:12.5px; color:var(--ypg-text-dark); font-weight:600; margin-bottom:12px;">
+                New to ELPAY PG? Please enter your name and email to proceed:
+              </div>
+
+              <div class="ypg-input-group">
+                <label class="ypg-input-label">Full Name</label>
+                <input type="text" class="ypg-input-control" id="authSignupName" placeholder="e.g. Alex Sharma" />
+              </div>
+
+              <div class="ypg-input-group">
+                <label class="ypg-input-label">Email Address</label>
+                <input type="email" class="ypg-input-control" id="authSignupEmail"
+                  placeholder="e.g. gaurav@example.com" />
+              </div>
+
+              <button type="button" class="ypg-btn-auth-action" id="btnAuthSignup" onclick="handleAuthSignupSubmit()">
+                <span>Sign Up &amp; Send WhatsApp OTP</span> &rsaquo;
+              </button>
+            </div>
+
+            <!-- STEP 3: OTP VERIFICATION (Shown for existing user login OR after signup) -->
+            <div id="authStepOtp" hidden>
+              <div class="ypg-auth-badge-banner" style="background:#eff6ff; border-color:#bfdbfe; color:#1e40af;">
+                <div>
+                  <span>Code sent to WhatsApp / SMS: </span>
+                  <strong id="authOtpPhoneBadge">+91 </strong>
+                </div>
+                <button type="button" class="ypg-btn-link" onclick="goToAuthStep('mobile')">Edit</button>
+              </div>
+
+              <div id="authOtpGreeting"
+                style="font-size:12.5px; color:var(--ypg-text-dark); font-weight:600; margin-bottom:8px;">
+                Enter the 6-digit code sent to your phone:
+              </div>
+
+              <div class="ypg-input-group">
+                <input type="text" class="ypg-input-control ypg-otp-control" id="authOtpInput" placeholder="••••••"
+                  maxlength="6" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code"
+                  autocorrect="off" autocapitalize="off" spellcheck="false" />
+              </div>
+
+              <button type="button" class="ypg-btn-auth-action" id="btnAuthVerifyOtp"
+                onclick="handleAuthVerifyOtpSubmit()">
+                <span>Verify &amp; Continue to Pay</span> &rsaquo;
+              </button>
+
+              <div
+                style="display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:12px; color:var(--ypg-text-muted);">
+                <div>
+                  Didn't receive code?
+                  <button type="button" class="ypg-btn-link" id="btnResendOtp" onclick="handleResendOtp()"
+                    style="margin-left:4px;">Resend OTP</button>
+                </div>
+                <span id="otpCountdownTimer" style="font-weight:600; color:#64748b;"></span>
+              </div>
+            </div>
+
+          </div>
+        </div>

package/public/views/partials/footer.html

@@ -0,0 +1,54 @@
+      <!-- 4. AUTHENTIC STICKY BOTTOM FOOTER (SHOWN ONLY WHEN ACTIVE) -->
+      <footer class="ypg-sticky-footer" id="ypgStickyFooter">
+
+        <!-- Legal Disclaimer -->
+        <div class="ypg-legal-disclaimer" id="footerLegalDisclaimer">
+          Secured by ELPAY PG & 256-Bit Bank Encryption &bull; <span style="text-decoration:underline; cursor:pointer;"
+            onclick="openHelpModal()">Privacy Notice</span>
+        </div>
+
+        <!-- Bottom Action Row: ₹5,500 View Details | Continue Button -->
+        <div class="ypg-action-bottom-bar">
+          <div class="ypg-amount-view-group">
+            <div class="ypg-bottom-price" id="bottomAmountDisplay">₹{{AMOUNT}}</div>
+            <button type="button" class="ypg-btn-view-details" onclick="toggleOrderDetails()">
+              <span>View Details</span>
+              <span id="chevronDetailsIcon">&#9652;</span>
+            </button>
+          </div>
+
+          <!-- Continue CTA Button (Triggers Verification - only appears after 2 minutes elapsed) -->
+          <button type="button" class="ypg-btn-continue" id="btnContinuePayment" onclick="submitPaymentDone()"
+            style="display:none;">
+            Payment Done — Check My Payment
+          </button>
+        </div>
+
+        <!-- ORDER BREAKDOWN POPUP DRAWER -->
+        <div class="ypg-details-drawer" id="orderDetailsDrawer">
+          <div class="ypg-details-header">
+            <span>Order Summary</span>
+            <button type="button" onclick="toggleOrderDetails()"
+              style="background:none; border:none; font-size:18px; cursor:pointer; color:#64748b;">✕</button>
+          </div>
+          <div class="ypg-details-row">
+            <span>Order Reference</span>
+            <strong id="drawerOrderId">{{ORDER_ID}}</strong>
+          </div>
+          <div class="ypg-details-row">
+            <span>Merchant</span>
+            <strong>{{MERCHANT_NAME}}</strong>
+          </div>
+
+          <div class="ypg-details-row">
+            <span>Platform & Processing Fee</span>
+            <span style="color:#10b981; font-weight:700;">₹0.00 (Zero Fee)</span>
+          </div>
+          <div class="ypg-details-row total">
+            <span>Total Amount</span>
+            <strong id="drawerTotalAmount">₹{{AMOUNT}}</strong>
+          </div>
+        </div>
+      </footer>
+
+    </div><!-- END ypg-pc-workspace -->

package/public/views/partials/header.html

@@ -0,0 +1,101 @@
+    <!-- PC RIGHT WORKSPACE WRAPPER -->
+    <div class="ypg-pc-workspace">
+      <!-- PC TOPBAR -->
+      <div class="ypg-pc-topbar">
+        <div class="ypg-pc-topbar-title">Payment Options</div>
+        <div class="ypg-pc-topbar-actions" style="position: relative;">
+          <button type="button" class="ypg-pc-btn-more" id="btnPcMore" onclick="toggleAccountMenu(event)" title="Options">•••</button>
+          <button type="button" class="ypg-pc-btn-close" onclick="openCancelPaymentModal()"
+            title="Close Checkout">✕</button>
+
+          <!-- PC Account Popover Menu -->
+          <div class="ypg-account-popover" id="accountMenuPopoverPc" hidden style="position: absolute; top: 40px; right: 0; background: #ffffff; color: var(--ypg-text-dark); border-radius: 12px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18); border: 1px solid var(--ypg-border); padding: 8px; z-index: 1000; min-width: 220px;">
+            <div class="popoverCustomerName" id="popoverCustomerNamePc"
+              style="padding:6px 10px 8px 10px; font-weight:700; font-size:12px; border-bottom:1px solid #f1f5f9; color:#0f172a; word-break:break-word;">
+              Guest User</div>
+            <button type="button" class="ypg-popover-item" onclick="openHelpModal()">
+              <span>❓</span> Help & Support
+            </button>
+            <button type="button" class="ypg-popover-item" onclick="handleCustomerLogout()"
+              style="color:var(--ypg-danger);">
+              <span>🚪</span> Sign Out / Change Number
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 2. AUTHENTIC ELPAY PG HEADER -->
+      <header class="ypg-header">
+        <!-- Mobile Top Drag Handle -->
+        <div class="ypg-drag-handle-bar"></div>
+
+        <!-- Main Header Row -->
+        <div class="ypg-header-main-row">
+          <div class="ypg-header-left-group">
+            <!-- Back Button -->
+            <button type="button" class="ypg-btn-back" id="btnHeaderBack" onclick="cancelPayment()" title="Back">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
+                stroke-linecap="round" stroke-linejoin="round">
+                <path d="M19 12H5M12 19l-7-7 7-7" />
+              </svg>
+            </button>
+
+            <!-- Teal Merchant Avatar with White Initial -->
+            <div class="ypg-merchant-avatar" id="merchantAvatarBox">
+              <span id="merchantAvatarLetter">M</span>
+              <img id="merchantAvatarImg" alt="Logo" style="display:none;" />
+            </div>
+
+            <!-- Merchant Name & ELPAY PG Verified Business Badge -->
+            <div class="ypg-merchant-text-group">
+              <div class="ypg-merchant-name" id="headerMerchantName">{{MERCHANT_NAME}}</div>
+              <div class="ypg-trusted-badge" id="headerTrustBadge">
+                <svg class="ypg-green-shield" viewBox="0 0 24 24" fill="none">
+                  <path d="M12 2L3 6v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V6l-9-4z" fill="#10b981" />
+                  <path d="M8.5 12l2.5 2.5 5-5" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round"
+                    stroke-linejoin="round" />
+                </svg>
+                <span id="headerTrustBadgeText">ELPAY PG Verified Business</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Profile Button (Toggles User Details Popover) -->
+          <button type="button" class="ypg-btn-profile" id="btnProfileMenu" onclick="toggleAccountMenu(event)"
+            title="User Profile">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+              <circle cx="12" cy="7" r="4" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Header Sub-banner -->
+        <div class="ypg-header-subbanner" id="headerSubbanner">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+            stroke-linejoin="round">
+            <circle cx="9" cy="21" r="1" />
+            <circle cx="20" cy="21" r="1" />
+            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
+          </svg>
+          <span id="subbannerText">200+ orders verified this month by ELPAY PG</span>
+        </div>
+
+        <!-- Account Popover Menu -->
+        <div class="ypg-account-popover" id="accountMenuPopover" hidden>
+          <div id="popoverCustomerName"
+            style="padding:4px 8px 8px 8px; font-weight:700; font-size:12px; border-bottom:1px solid #f1f5f9; color:#0f172a;">
+            Guest User</div>
+          <button type="button" class="ypg-popover-item" onclick="openHelpModal()">
+            <span>❓</span> Help & Support
+          </button>
+          <button type="button" class="ypg-popover-item" onclick="handleCustomerLogout()"
+            style="color:var(--ypg-danger);">
+            <span>🚪</span> Sign Out / Change Number
+          </button>
+        </div>
+      </header>
+
+      <!-- 3. SCROLLABLE BODY -->
+      <main class="ypg-body">

package/public/views/partials/modals.html

@@ -0,0 +1,179 @@
+    <!-- HELP MODAL -->
+    <div class="ypg-dialog-overlay" id="helpModal" hidden>
+      <div class="ypg-dialog-card">
+        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
+          <strong style="font-size:15px;" id="helpModalTitle">ELPAY PG Help &amp; Support</strong>
+          <button type="button" onclick="closeHelpModal()"
+            style="background:none; border:none; font-size:18px; cursor:pointer; color:#64748b;">✕</button>
+        </div>
+        <div style="font-size:12px; color:#64748b; margin-bottom:12px;">For inquiries regarding your order or payment
+          status:</div>
+        <div id="helpModalEmailsContainer" style="margin-bottom:8px; font-size:12px;"></div>
+        <div id="helpModalMobilesContainer" style="margin-bottom:12px; font-size:12px;"></div>
+        <div id="helpModalLegalLinks"
+          style="display:none; gap:12px; font-size:11.5px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #e2e8f0;">
+        </div>
+        <div style="font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; margin-bottom:4px;">
+          Payment Case Info</div>
+        <pre id="helpModalCaseInfoText"
+          style="background:#f1f5f9; padding:8px; border-radius:6px; font-size:10px; color:#334155; white-space:pre-wrap; font-family:monospace; margin-bottom:12px;"></pre>
+        <button type="button" class="ypg-btn-auth-action" onclick="copyCaseInfo()">
+          <span id="copyCaseText">Copy Payment Case Details</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- SINGLE ACTIVE SESSION CONFLICT MODAL -->
+    <div class="ypg-dialog-overlay" id="activeConflictModal" hidden>
+      <div class="ypg-dialog-card" style="max-width:380px; text-align:center;">
+        <div
+          style="width:48px; height:48px; border-radius:50%; background:#fef3c7; color:#d97706; display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 12px auto;">
+          ⚠️</div>
+        <strong style="font-size:16px; color:#0f172a; display:block; margin-bottom:6px;" id="conflictModalTitle">Active Session Detected</strong>
+        <p style="font-size:12.5px; color:#475569; line-height:1.5; margin-bottom:16px;" id="conflictModalDesc">
+          You already have an active payment session.
+        </p>
+        <div style="display:flex; flex-direction:column; gap:8px;">
+          <button type="button" class="ypg-btn-auth-action" id="btnContinueExistingActive"
+            onclick="continueExistingActivePayment()"
+            style="background:#2563eb; color:#ffffff; font-size:13px; font-weight:700; padding:11px;">
+            CONTINUE ACTIVE SESSION
+          </button>
+          <button type="button" class="ypg-btn-auth-action" id="btnEndSessionAndStartNew"
+            onclick="executeRetryNewPayment()"
+            style="background:#f1f5f9; color:#334155; border:1px solid #cbd5e1; font-size:12.5px; font-weight:600; padding:9px;">
+            END SESSION &amp; START NEW PAYMENT
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- RAZORPAY AUTHENTIC "PROCESSING YOUR PAYMENT" MODAL SHEET -->
+    <div class="rzp-sheet-backdrop" id="rzpProcessingModal" hidden>
+      <div class="rzp-sheet-dialog" style="position:relative;">
+        <button type="button" class="rzp-btn-sheet-close" onclick="closeProcessingModal()" title="Back to QR"
+          style="position:absolute; top:14px; right:14px; background:none; border:none; font-size:18px; cursor:pointer; color:#64748b; z-index:10; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background 0.15s;">✕</button>
+        <div class="rzp-sheet-content">
+          <div class="rzp-sheet-title" id="rzpProcessingTitle">Verifying Your Payment</div>
+          <div class="rzp-sheet-subtitle" id="rzpProcessingSubtitle">Bank verification in progress. Please do not close
+            or refresh this window.</div>
+          <div class="rzp-coin-stage">
+            <div class="rzp-halo-ring"></div>
+            <div class="rzp-3d-coin">
+              <div class="rzp-coin-face rzp-coin-front">
+                <div class="rzp-coin-inner-rim"></div>
+                <div class="rzp-coin-sheen"></div>
+              </div>
+              <div class="rzp-coin-face rzp-coin-back">
+                <div class="rzp-coin-inner-rim"></div>
+                <div class="rzp-coin-sheen"></div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="font-size:12px; color:#10b981; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px;">
+            <span
+              style="display:inline-block; width:7px; height:7px; border-radius:50%; background:#10b981; box-shadow:0 0 6px #10b981; animation:rzpHaloPulse 1.2s infinite;"></span>
+            Checking UPI transaction in real-time...
+          </div>
+          <button type="button" class="rzp-sheet-cancel-btn" onclick="openCancelPaymentModal()"
+            style="margin-top:12px;">Cancel Payment</button>
+          <button type="button" onclick="closeProcessingModal()"
+            style="background:none; border:none; color:#64748b; font-size:12px; font-weight:600; cursor:pointer; margin-top:8px; text-decoration:underline;">
+            Return to QR Code
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- RAZORPAY AUTHENTIC "CANCEL PAYMENT" CONFIRMATION MODAL SHEET -->
+    <div class="rzp-sheet-backdrop" id="rzpCancelModal" hidden>
+      <div class="rzp-sheet-dialog">
+        <!-- State 1: Exit Door & Confirm Prompt -->
+        <div id="rzpCancelPromptView"
+          style="display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:16px;">
+          <div class="rzp-cancel-header-arc">
+            <button type="button" class="rzp-btn-sheet-close" onclick="closeCancelPaymentModal()"
+              title="Back">✕</button>
+            <!-- Authentic Exit Door Illustration with EXIT sign & footprints -->
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120" width="88" height="62" fill="none">
+              <rect x="65" y="10" width="30" height="13" rx="2" fill="#dc2626" stroke="#b91c1c" stroke-width="0.8" />
+              <text x="80" y="19.5" font-family="-apple-system, BlinkMacSystemFont, Arial, sans-serif" font-size="7.5"
+                font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="0.8">EXIT</text>
+              <path d="M50 23 H110 V90 H104 V27 H56 V90 H50 Z" fill="#94a3b8" />
+              <rect x="54" y="26" width="52" height="64" fill="#f8fafc" opacity="0.6" />
+              <path d="M55 27 L38 34 V97 L55 90 Z" fill="rgba(224, 242, 254, 0.75)" stroke="#64748b"
+                stroke-width="1.8" />
+              <path d="M53 30 L41 35 V93 L53 87 Z" fill="rgba(186, 230, 253, 0.45)" stroke="#94a3b8" stroke-width="1" />
+              <rect x="44" y="60" width="3" height="10" rx="1" fill="#334155" />
+              <path d="M105 27 L122 34 V97 L105 90 Z" fill="rgba(224, 242, 254, 0.75)" stroke="#64748b"
+                stroke-width="1.8" />
+              <path d="M107 30 L119 35 V93 L107 87 Z" fill="rgba(186, 230, 253, 0.45)" stroke="#94a3b8"
+                stroke-width="1" />
+              <rect x="113" y="60" width="3" height="10" rx="1" fill="#334155" />
+              <line x1="30" y1="94" x2="130" y2="94" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="2 2" />
+              <g transform="translate(74, 80) rotate(-10) scale(0.65)" fill="#475569">
+                <ellipse cx="4" cy="3" rx="3.5" ry="4.5" />
+                <ellipse cx="4" cy="10" rx="2.5" ry="3" />
+              </g>
+              <g transform="translate(85, 88) rotate(12) scale(0.75)" fill="#334155">
+                <ellipse cx="4" cy="3" rx="3.5" ry="4.5" />
+                <ellipse cx="4" cy="10" rx="2.5" ry="3" />
+              </g>
+              <g transform="translate(71, 98) rotate(-8) scale(0.85)" fill="#1e293b">
+                <ellipse cx="4" cy="3" rx="3.8" ry="4.8" />
+                <ellipse cx="4" cy="11" rx="2.8" ry="3.2" />
+              </g>
+              <g transform="translate(87, 106) rotate(10) scale(0.95)" fill="#0f172a">
+                <ellipse cx="4" cy="3" rx="4" ry="5" />
+                <ellipse cx="4" cy="12" rx="3" ry="3.5" />
+              </g>
+            </svg>
+          </div>
+          <div
+            style="padding:12px 20px 0; width:100%; display:flex; flex-direction:column; align-items:center; box-sizing:border-box;">
+            <div class="rzp-sheet-title">
+              <span class="pc-only-title">Are you sure you want to exit?</span>
+              <span class="mob-only-title">Cancel Payment</span>
+            </div>
+            <div class="rzp-sheet-subtitle" style="margin-bottom:0; max-width:320px; line-height:1.45;">
+              <span class="pc-only-sub">You will be taken back to <span
+                  class="cancelMerchantNameSpan">{{MERCHANT_NAME}}</span> website</span>
+              <span class="mob-only-sub">Your payment is ongoing. Are you sure you want to cancel the payment?</span>
+            </div>
+            <button type="button" class="rzp-btn-wait" onclick="closeCancelPaymentModal()">
+              <span class="pc-only-btn">Continue to payment</span>
+              <span class="mob-only-btn">No, wait</span>
+            </button>
+            <button type="button" class="rzp-btn-confirm-cancel" onclick="confirmCancelPayment()">
+              <span class="pc-only-btn">Yes, exit</span>
+              <span class="mob-only-btn">Yes, Cancel</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- State 2: Cancelling Payment with Running Coin -->
+        <div id="rzpCancellingProgressView"
+          style="display:none; padding:28px 20px 24px; flex-direction:column; align-items:center; text-align:center;">
+          <div class="rzp-sheet-title">Cancelling Payment</div>
+          <div class="rzp-sheet-subtitle">This will only take a few seconds.</div>
+          <div class="rzp-coin-stage">
+            <div class="rzp-halo-ring"></div>
+            <div class="rzp-3d-coin">
+              <div class="rzp-coin-face rzp-coin-front">
+                <div class="rzp-coin-inner-rim"></div>
+                <div class="rzp-coin-sheen"></div>
+              </div>
+              <div class="rzp-coin-face rzp-coin-back">
+                <div class="rzp-coin-inner-rim"></div>
+                <div class="rzp-coin-sheen"></div>
+              </div>
+            </div>
+          </div>
+          <div class="rzp-secured-by">
+            <span>Secured by</span>
+            <strong style="color:#0f172a; font-weight:800;">{{APP_NAME}}</strong>
+          </div>
+        </div>
+      </div>
+    </div>