npm - @prosopo/client-bundle-example - Versions diffs - 2.7.0 → 2.8.1 - Mend

@prosopo/client-bundle-example 2.7.0 → 2.8.1

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

package/CHANGELOG.md +17 -0
package/dist/assets/{ProcaptchaWidget-3gKvjeiH.js → ProcaptchaWidget-DrBDhP6X.js} +7 -7
package/dist/assets/{ProcaptchaWidget-D6-M7iAv.js → ProcaptchaWidget-rAM-9Rap.js} +4 -4
package/dist/assets/{asU8a-DCECA0Qe.js → asU8a-CJdNkNEq.js} +1 -1
package/dist/assets/{bip39-BQoZog_M.js → bip39-Du2cANEV.js} +2 -2
package/dist/assets/captcha-BhkVCEXM.css +1 -0
package/dist/assets/{captchaComponentProvider-BW2eXmc3.js → captchaComponentProvider-DmV1WTrT.js} +4 -4
package/dist/assets/{captchaRenderer-B_MgGzr9.js → captchaRenderer-RIsSZXCC.js} +2 -2
package/dist/assets/{emotion-element-5486c51c.browser.esm-CCAJ8JId.js → emotion-element-5486c51c.browser.esm-C3u8NMUC.js} +127 -125
package/dist/assets/frictionless-explicit-C_AXK63E.js +1 -0
package/dist/assets/frictionless-implicit-Dq_sNGRK.js +1 -0
package/dist/assets/{hash-BR0YLxPF.js → hash-_rWungeW.js} +1 -1
package/dist/assets/image-explicit-DQvfVB7-.js +4 -0
package/dist/assets/image-implicit-Bwa9QJO5.js +1 -0
package/dist/assets/{index-WqEmiYQ_.js → index-BVr9fC_3.js} +4 -4
package/dist/assets/{index-BYUYvvuq.js → index-Cu5oL_7b.js} +4 -4
package/dist/assets/index-Dpt_5E72.js +1 -0
package/dist/assets/{index-BCjHZ8o6.js → index-DxIFpl6U.js} +1 -1
package/dist/assets/{index-2or4-1WF.js → index-Wgw2GQWq.js} +2 -2
package/dist/assets/invisible-frictionless-explicit-DugBtRe4.js +4 -0
package/dist/assets/invisible-frictionless-implicit-DYYos8W9.js +1 -0
package/dist/assets/invisible-image-explicit-C5Z4gSb1.js +4 -0
package/dist/assets/invisible-image-implicit-DfNFNlFj.js +1 -0
package/dist/assets/invisible-pow-explicit-DjqGWFUb.js +4 -0
package/dist/assets/invisible-pow-implicit-BRXL14FH.js +4 -0
package/dist/assets/pow-explicit-BexxbnHM.js +4 -0
package/dist/assets/pow-implicit-Dpt_5E72.js +1 -0
package/dist/assets/procaptcha.bundle.js +1 -1
package/dist/assets/{useTranslation-BPbGzrhj.js → useTranslation-CJplXtqb.js} +1 -1
package/dist/frictionless-explicit.html +875 -0
package/dist/frictionless-implicit.html +874 -0
package/dist/image-explicit.html +877 -0
package/dist/index.html +575 -74
package/dist/invisible-frictionless-explicit.html +626 -283
package/dist/invisible-frictionless-implicit.html +631 -173
package/dist/invisible-image-explicit.html +627 -284
package/dist/invisible-image-implicit.html +631 -173
package/dist/invisible-pow-explicit.html +627 -284
package/dist/invisible-pow-implicit.html +629 -177
package/dist/plugins/explanation-injector.ts +250 -0
package/dist/plugins/form-filler-injector.ts +233 -0
package/dist/plugins/navigation-injector.ts +237 -89
package/dist/plugins/status-log-injector.ts +199 -0
package/dist/pow-explicit.html +877 -0
package/dist/pow-implicit.html +881 -0
package/package.json +1 -1
package/vite.config.ts +32 -3
package/dist/assets/frictionless-ZgzyuneX.js +0 -1
package/dist/assets/index-BWsu-rGU.js +0 -1
package/dist/assets/invisible-frictionless-explicit-DgCaJtPg.js +0 -1
package/dist/assets/invisible-image-explicit-DgCaJtPg.js +0 -1
package/dist/assets/invisible-pow-explicit-DgCaJtPg.js +0 -1
package/dist/assets/pow-BW3QYcgP.js +0 -1
package/dist/frictionless.html +0 -343
package/dist/pow.html +0 -323
/package/dist/assets/{modulepreload-polyfill-B5Qt9EMX.js → captcha-ByKnSsbG.js} +0 -0

package/dist/invisible-image-implicit.html CHANGED Viewed

@@ -1,71 +1,9 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <title>Procaptcha Invisible Image Mode - Implicit Rendering</title>
-    <!-- Load the Procaptcha script -->
-    <script type="module" src="https://staging-js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        form {
-            border: 1px solid #ddd;
-            padding: 20px;
-            border-radius: 5px;
-        }
-        label {
-            display: block;
-            margin-bottom: 5px;
-        }
-        input[type="text"],
-        input[type="email"] {
-            width: 100%;
-            padding: 8px;
-            margin-bottom: 15px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-        }
-        button {
-            background-color: #4CAF50;
-            color: white;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        button:hover {
-            background-color: #45a049;
-        }
-        #result {
-            margin-top: 15px;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            background-color: #f9f9f9;
-            display: none;
-        }
-    </style>
-    <script type="text/javascript">
-        function onSubmit(token) {
-            console.log('Procaptcha verified, token: ' + token);
-            // Get form values
-            const name = document.getElementById('name').value;
-            const email = document.getElementById('email').value;
-            const resultElement = document.getElementById('result');
-            resultElement.textContent = `Form submitted with:
-- Name: ${name}
-- Email: ${email}
-- Procaptcha verified: Yes`;
-            resultElement.style.display = 'block';
-            // Prevent actual form submission
-            return false;
-        }
-    </script>
+    <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha demo: Invisible image - Implicit Rendering</title>
+    <script id="procaptchaScript" type="module" src="http://localhost:9269/procaptcha.bundle.js" async defer></script>
     <style>
       .nav-topbar {
@@ -74,60 +12,64 @@
         margin-bottom: 20px;
         transition: all 0.3s ease;
         overflow: hidden;
-        max-height: 500px; /* Initial state - visible */
+        max-height: 500px;
         box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       }
       .nav-topbar.collapsed {
-        max-height: 50px; /* Collapsed state - only show toggle button and title */
+        max-height: 60px;
       }
       .nav-container {
         max-width: 1200px;
         margin: 0 auto;
-        padding: 0 15px;
+        padding: 0 20px;
         position: relative;
       }
       .nav-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 10px 0;
+        padding: 12px 0;
         position: relative;
         z-index: 20;
       }
       .nav-title {
         color: white;
-        font-size: 18px;
-        font-weight: bold;
+        font-size: 1.25rem;
+        font-weight: 600;
         margin: 0;
         display: flex;
         align-items: center;
+        gap: 8px;
       }
       .nav-title-text {
-        margin-right: 10px;
+        margin-right: 8px;
       }
       .nav-title-hint {
-        font-size: 14px;
+        font-size: 0.875rem;
         font-weight: normal;
         opacity: 0;
         transition: opacity 0.3s ease;
+        color: rgba(255,255,255,0.8);
       }
       .collapsed .nav-title-hint {
         opacity: 0.8;
       }
       .nav-toggle {
-        background-color: rgba(0,0,0,0.1);
+        background-color: rgba(255,255,255,0.1);
         color: white;
         border: none;
-        padding: 5px 10px;
+        padding: 8px 12px;
         cursor: pointer;
-        border-radius: 4px;
+        border-radius: 6px;
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: background-color 0.2s ease;
       }
       .nav-toggle:hover {
-        background-color: rgba(0,0,0,0.2);
+        background-color: rgba(255,255,255,0.2);
       }
       .nav-toggle-icon {
         width: 24px;
@@ -154,29 +96,42 @@
         opacity: 1;
       }
       .nav-content {
-        padding: 0 0 15px 0;
+        padding: 0 0 20px 0;
         transition: opacity 0.3s ease;
       }
       .collapsed .nav-content {
         opacity: 0;
       }
-      .nav-row {
+      .nav-sections {
         display: flex;
         flex-wrap: wrap;
-        margin-bottom: 15px;
+        gap: 20px;
       }
-      .nav-group {
+      .nav-section {
         flex: 1;
-        min-width: 250px;
-        margin-bottom: 10px;
-        margin-right: 20px;
+        min-width: 280px;
+      }
+      .nav-section h3 {
+        color: white;
+        font-size: 1rem;
+        font-weight: 600;
+        margin: 0 0 12px 0;
+        padding-bottom: 8px;
+        border-bottom: 1px solid rgba(255,255,255,0.2);
+      }
+      .nav-group {
+        background: rgba(255,255,255,0.1);
+        border-radius: 8px;
+        padding: 12px;
+        margin-bottom: 12px;
       }
       .nav-group-title {
-        color: rgba(255,255,255,0.8);
-        font-size: 0.9em;
-        margin: 0 0 5px 0;
-        text-transform: uppercase;
+        color: rgba(255,255,255,0.9);
+        font-size: 0.875rem;
         font-weight: 500;
+        margin: 0 0 8px 0;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
       }
       .nav-group-links {
         list-style: none;
@@ -184,36 +139,348 @@
         padding: 0;
       }
       .nav-group-links li {
-        margin: 5px 0;
+        margin: 6px 0;
       }
       .nav-group-links a {
         color: white;
         text-decoration: none;
-        font-weight: bold;
-        padding: 5px 0;
+        font-weight: 500;
+        padding: 6px 8px;
         display: inline-block;
+        border-radius: 4px;
+        transition: background-color 0.2s ease;
       }
       .nav-group-links a:hover {
-        text-decoration: underline;
+        background-color: rgba(255,255,255,0.2);
       }
       .nav-group-links .active {
-        border-bottom: 2px solid white;
+        background-color: rgba(255,255,255,0.2);
+        font-weight: 600;
       }
       .nav-group-links .disabled {
         color: rgba(255,255,255,0.5);
         cursor: not-allowed;
+        opacity: 0.7;
       }
       @media (max-width: 768px) {
-        .nav-row {
-          flex-direction: column;
+        .nav-container {
+          padding: 0 16px;
+        }
+        .nav-title {
+          font-size: 1.125rem;
         }
         .nav-title-hint {
           display: none;
         }
+        .nav-sections {
+          flex-direction: column;
+          gap: 16px;
+        }
+        .nav-section {
+          min-width: 100%;
+        }
+        .nav-section h3 {
+          font-size: 0.875rem;
+        }
+        .nav-group {
+          padding: 10px;
+        }
+        .nav-group-title {
+          font-size: 0.8125rem;
+        }
+        .nav-group-links a {
+          padding: 8px 10px;
+          width: 100%;
+        }
+      }
+      @media (max-width: 480px) {
+        .nav-topbar {
+          max-height: 60px;
+        }
+        .nav-topbar.collapsed {
+          max-height: 60px;
+        }
+        .nav-title {
+          font-size: 1rem;
+        }
+        .nav-toggle {
+          padding: 6px 10px;
+        }
+      }
+      .nav-group-dropdown {
+        position: relative;
+        display: inline-block;
+      }
+      .nav-group-dropdown-btn {
+        background: none;
+        border: none;
+        color: white;
+        font-weight: 500;
+        padding: 6px 8px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        border-radius: 4px;
+        transition: background-color 0.2s ease;
+      }
+      .nav-group-dropdown-btn:hover {
+        background-color: rgba(255,255,255,0.2);
+      }
+      .nav-group-dropdown-btn svg {
+        width: 16px;
+        height: 16px;
+        transition: transform 0.2s ease;
+      }
+      .nav-group-dropdown-btn.open svg {
+        transform: rotate(180deg);
+      }
+      .nav-group-dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: rgba(33, 150, 243, 0.95);
+        min-width: 160px;
+        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+        z-index: 1;
+        border-radius: 4px;
+        padding: 8px 0;
+        margin-top: 4px;
+      }
+      .nav-group-dropdown-btn.open + .nav-group-dropdown-content {
+        display: block;
+      }
+      .nav-group-dropdown-content a {
+        color: white;
+        padding: 8px 16px;
+        text-decoration: none;
+        display: block;
+        transition: background-color 0.2s ease;
+      }
+      .nav-group-dropdown-content a:hover {
+        background-color: rgba(255,255,255,0.2);
+      }
+      .nav-group-dropdown-content a.active {
+        background-color: rgba(255,255,255,0.2);
+        font-weight: 600;
+      }
+      @media (max-width: 768px) {
+        .nav-group-dropdown-content {
+          position: static;
+          box-shadow: none;
+          background-color: rgba(255,255,255,0.1);
+          margin-top: 8px;
+        }
       }
     </style>
-    <script async type="module" crossorigin src="/assets/modulepreload-polyfill-B5Qt9EMX.js"></script>
+    <script type="module" crossorigin src="/assets/invisible-image-implicit-DfNFNlFj.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/captcha-ByKnSsbG.js">
+    <link rel="stylesheet" crossorigin href="/assets/captcha-BhkVCEXM.css">
+    <style>
+      .form-filler-button {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        background-color: #2196F3;
+        color: white;
+        border: none;
+        border-radius: 30px;
+        padding: 12px 20px;
+        font-size: 14px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        cursor: pointer;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: all 0.2s ease;
+        outline: none;
+      }
+      .form-filler-button:hover {
+        background-color: #1976D2;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+        transform: translateY(-2px);
+      }
+      .form-filler-button:active {
+        transform: translateY(1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      }
+      .form-filler-button svg {
+        width: 18px;
+        height: 18px;
+        fill: white;
+      }
+      .form-filler-button span {
+        font-weight: 500;
+      }
+      @media (max-width: 768px) {
+        .form-filler-button {
+          bottom: 15px;
+          right: 15px;
+          padding: 10px 15px;
+          font-size: 12px;
+        }
+        .form-filler-button svg {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    </style>
+	<style>
+		.captcha-status {
+			margin-top: 20px;
+			padding: 15px;
+			background-color: #f0f8ff;
+			border: 2px solid #2196F3;
+			border-radius: 5px;
+			font-family: monospace;
+			font-size: 14px;
+		}
+		.status-item {
+			margin: 5px 0;
+			padding: 5px;
+		}
+		.status-success {
+			color: #4CAF50;
+			font-weight: bold;
+		}
+		.status-error {
+			color: #F44336;
+			font-weight: bold;
+		}
+		.status-info {
+			color: #2196F3;
+		}
+		.status-warning {
+			color: #FF9800;
+		}
+		.status-title {
+			font-weight: bold;
+			margin-bottom: 10px;
+			border-bottom: 1px solid #2196F3;
+			padding-bottom: 5px;
+		}
+		.console-output {
+			margin-top: 20px;
+			padding: 10px;
+			background-color: #f5f5f5;
+			border: 1px solid #ddd;
+			border-radius: 4px;
+			font-family: monospace;
+			white-space: pre-wrap;
+			max-height: 200px;
+			overflow-y: auto;
+		}
+	</style>
+	<script type="module">
+		// Function to update CAPTCHA status display
+		function updateCaptchaStatus(message, type = 'info') {
+			const statusContainer = document.getElementById('captcha-status');
+			if (!statusContainer) return;
+			const timestamp = new Date().toLocaleTimeString();
+			const statusItem = document.createElement('div');
+			statusItem.className = `status-item status-${type}`;
+			statusItem.innerHTML = `[${timestamp}] ${message}`;
+			statusContainer.appendChild(statusItem);
+			// Also log to console
+			console.log(`CAPTCHA Status: ${message}`);
+		}
+		// Make updateCaptchaStatus available globally
+		window.updateCaptchaStatus = updateCaptchaStatus;
+		// Override the original callbacks with enhanced versions that use status logging
+		const originalOnCaptchaFailed = window.onCaptchaFailed;
+		window.onCaptchaFailed = function() {
+			updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
+			if (originalOnCaptchaFailed) originalOnCaptchaFailed();
+		};
+		const originalOnCaptchaVerified = window.onCaptchaVerified;
+		window.onCaptchaVerified = function(output) {
+			updateCaptchaStatus('Challenge passed successfully!', 'success');
+			updateCaptchaStatus(`Token generated: ${output.substring(0, 15)}...`, 'success');
+			if (originalOnCaptchaVerified) originalOnCaptchaVerified(output);
+		};
+		const originalOnActionHandler = window.onActionHandler;
+		window.onActionHandler = function() {
+			const procaptchaElements = document.getElementsByName('procaptcha-response');
+			if (!procaptchaElements.length) {
+				updateCaptchaStatus('Error: No CAPTCHA response token found', 'error');
+				alert("Must complete captcha");
+				return;
+			}
+			updateCaptchaStatus('Form submission initiated with valid CAPTCHA token', 'info');
+			if (originalOnActionHandler) originalOnActionHandler();
+		};
+		document.addEventListener('DOMContentLoaded', function() {
+			updateCaptchaStatus('Page loaded - Initializing CAPTCHA system', 'info');
+			// Monitor DOM for CAPTCHA initialization
+			const observer = new MutationObserver((mutations) => {
+				mutations.forEach((mutation) => {
+					if (mutation.addedNodes.length) {
+						for (let i = 0; i < mutation.addedNodes.length; i++) {
+							const node = mutation.addedNodes[i];
+							if (node.classList && (node.classList.contains('procaptcha') ||
+								node.querySelector && node.querySelector('.procaptcha'))) {
+								updateCaptchaStatus('CAPTCHA DOM elements initialized', 'info');
+								observer.disconnect();
+								break;
+							}
+						}
+					}
+				});
+			});
+			observer.observe(document.body, { childList: true, subtree: true });
+		});
+		// Create a method to show CAPTCHA execution events
+		document.addEventListener('procaptcha:execute', function(e) {
+			// Determine captcha type from the page URL
+			const url = window.location.pathname;
+			const isFrictionless = url.includes('frictionless');
+			const isImage = url.includes('image');
+			const isPow = url.includes('pow');
+			let captchaType = 'unknown';
+			if (isFrictionless) captchaType = 'frictionless';
+			else if (isImage) captchaType = 'image';
+			else if (isPow) captchaType = 'pow';
+			updateCaptchaStatus(`CAPTCHA execution started: type=${captchaType}`, 'info');
+			updateCaptchaStatus(`Container: ${e.detail.containerId}, timestamp: ${new Date(e.detail.timestamp).toLocaleTimeString()}`, 'info');
+		});
+	</script>
   </head>
 <body>
@@ -236,36 +503,36 @@
                 </button>
               </div>
               <div class="nav-content">
-                <div class="nav-row">
+                <div class="nav-sections">
       <div class="nav-section">
-        <h3 style="color: white; margin: 0 0 10px 0;">Standard Captchas</h3>
+        <h3>Standard Captchas</h3>
         <div class="nav-row">
         <div class="nav-group">
           <div class="nav-group-title">Image</div>
-          <ul class="nav-group-links">
-            <li><a href="index.html">Implicit</a></li>
-            <li><span class="disabled" title="Coming Soon">Explicit</span></li>
-          </ul>
+          <div class="nav-group-links">
+            <a href="image-implicit.html">Implicit</a>
+            <a href="image-explicit.html">Explicit</a>
+          </div>
         </div>
         <div class="nav-group">
           <div class="nav-group-title">Pow</div>
-          <ul class="nav-group-links">
-            <li><span class="disabled" title="Coming Soon">Implicit</span></li>
-            <li><span class="disabled" title="Coming Soon">Explicit</span></li>
-          </ul>
+          <div class="nav-group-links">
+            <a href="pow-implicit.html">Implicit</a>
+            <a href="pow-explicit.html">Explicit</a>
+          </div>
         </div>
         <div class="nav-group">
           <div class="nav-group-title">Frictionless</div>
-          <ul class="nav-group-links">
-            <li><span class="disabled" title="Coming Soon">Implicit</span></li>
-            <li><a href="frictionless-explicit.html">Explicit</a></li>
-          </ul>
+          <div class="nav-group-links">
+            <a href="frictionless-implicit.html">Implicit</a>
+            <a href="frictionless-explicit.html">Explicit</a>
+          </div>
         </div>
         </div>
@@ -273,33 +540,33 @@
       <div class="nav-section">
-        <h3 style="color: white; margin: 0 0 10px 0;">Invisible Captchas</h3>
+        <h3>Invisible Captchas</h3>
         <div class="nav-row">
         <div class="nav-group">
           <div class="nav-group-title">Image</div>
-          <ul class="nav-group-links">
-            <li><a href="invisible-image-implicit.html" class="active">Implicit</a></li>
-            <li><a href="invisible-image-explicit.html">Explicit</a></li>
-          </ul>
+          <div class="nav-group-links">
+            <a href="invisible-image-implicit.html" class="active">Implicit</a>
+            <a href="invisible-image-explicit.html">Explicit</a>
+          </div>
         </div>
         <div class="nav-group">
           <div class="nav-group-title">Pow</div>
-          <ul class="nav-group-links">
-            <li><a href="invisible-pow-implicit.html">Implicit</a></li>
-            <li><a href="invisible-pow-explicit.html">Explicit</a></li>
-          </ul>
+          <div class="nav-group-links">
+            <a href="invisible-pow-implicit.html">Implicit</a>
+            <a href="invisible-pow-explicit.html">Explicit</a>
+          </div>
         </div>
         <div class="nav-group">
           <div class="nav-group-title">Frictionless</div>
-          <ul class="nav-group-links">
-            <li><a href="invisible-frictionless-implicit.html">Implicit</a></li>
-            <li><a href="invisible-frictionless-explicit.html">Explicit</a></li>
-          </ul>
+          <div class="nav-group-links">
+            <a href="invisible-frictionless-implicit.html">Implicit</a>
+            <a href="invisible-frictionless-explicit.html">Explicit</a>
+          </div>
         </div>
         </div>
@@ -310,62 +577,64 @@
             </div>
           </div>
-    <h1>Procaptcha Invisible Image Mode</h1>
-    <p>This example demonstrates how to use Procaptcha in invisible image mode with implicit rendering.</p>
+<div class="mui-container">
+    <h1>Invisible image CAPTCHA - Implicit Rendering</h1>
+    <p>This example demonstrates how to use Procaptcha in invisible image mode with implicit rendering directly on a button.</p>
+    <!-- CAPTCHA Status Display will be injected by the status-log-injector plugin -->
-    <form id="demo-form" action="javascript:void(0);" method="POST">
-        <div>
-            <label for="name">Name:</label>
-            <input type="text" id="name" name="name" placeholder="Your name" required />
+    <form action="undefined/signup" method="POST" class="mui-form">
+        <h2>Example Login Form</h2>
+        <div class="mui-textfield mui-textfield--float-label">
+            <label for="name">Name</label>
+            <input id="name" type="text" name="name" required/>
         </div>
-        <div>
-            <label for="email">Email:</label>
-            <input type="email" id="email" name="email" placeholder="Your email" required />
+        <div class="mui-textfield mui-textfield--float-label">
+            <label for="email">Email Address</label>
+            <input id="email" type="email" name="email" required/>
         </div>
-        <!-- Submit button with Procaptcha attributes -->
-        <!-- The p-procaptcha class and data-sitekey attribute are required -->
+        <div class="mui-textfield mui-textfield--float-label">
+            <label for="password">Password</label>
+            <input id="password" type="password" name="password" required/>
+        </div>
+        <div class="mui-textfield mui-textfield--float-label">
+            <!-- The div here was empty, we don't need it for invisible mode -->
+        </div>
+        <div id="messageContainer" style="display: none; color: black;"><span id="message"></span></div>
         <button
-            class="p-procaptcha"
+            type="button"
+            class="mui-btn mui-btn--raised procaptcha"
             data-sitekey="undefined"
-            data-callback="onSubmit"
-            data-captcha-type="image">
+            data-callback="onActionHandler"
+            data-failed-callback="onCaptchaFailed"
+            data-captcha-type="image"
+            data-size="invisible"
+            data-cy="submit-button">
             Submit
         </button>
     </form>
+	<!-- CAPTCHA Status Display -->
+	<div id="captcha-status" class="captcha-status">
+		<div class="status-title">CAPTCHA Status Log</div>
+	</div>
+	<!-- Console output display area -->
+	<div id="console-output" class="console-output" style="display: none;"></div>
-    <div id="result"></div>
+    <!-- Console output display area -->
+    <div id="console-output" class="console-output" style="display: none;"></div>
-    <div style="margin-top: 20px;">
-        <h2>How It Works</h2>
-        <p>This example demonstrates how to use Procaptcha in invisible image mode with implicit rendering:</p>
-        <ol>
-            <li>Include the Procaptcha script in the head of your document</li>
-            <li>Add the <code>p-procaptcha</code> class to your submit button</li>
-            <li>Add the <code>data-sitekey</code> attribute with your site key</li>
-            <li>Add the <code>data-callback</code> attribute with the name of your callback function</li>
-            <li>The CAPTCHA verification happens invisibly when the user clicks the button</li>
-        </ol>
-        <p>The key elements are:</p>
-        <pre>
-&lt;script type="module" src="./assets/procaptcha.bundle.js" async defer&gt;&lt;/script&gt;
-&lt;button
-    class="p-procaptcha"
-    data-sitekey="undefined"
-    data-callback="onSubmit"
-    data-captcha-type="image"&gt;
-    Submit
-&lt;/button&gt;
-        </pre>
-    </div>
+    <!-- Explanation will be injected by the explanation-injector plugin -->
+</div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
         const toggleBtn = document.getElementById('nav-toggle');
         const navBar = document.getElementById('nav-topbar');
         const navHeader = document.getElementById('nav-header');
+        const isMobile = window.innerWidth <= 768;
         // Check if navigation was previously collapsed
         const navCollapsed = localStorage.getItem('navCollapsed') === 'true';
@@ -397,20 +666,21 @@
         // Toggle on button click
         toggleBtn.addEventListener('click', function(e) {
-          e.stopPropagation(); // Prevent header click from firing
+          e.stopPropagation();
           toggleNav();
         });
-        // Expand on toggle button hover when collapsed
-        toggleBtn.addEventListener('mouseenter', function() {
-          if (navBar.classList.contains('collapsed')) {
-            expandNav();
-          }
-        });
+        // Expand on toggle button hover when collapsed (desktop only)
+        if (!isMobile) {
+          toggleBtn.addEventListener('mouseenter', function() {
+            if (navBar.classList.contains('collapsed')) {
+              expandNav();
+            }
+          });
+        }
         // Toggle on header click
         navHeader.addEventListener('click', function(e) {
-          // Don't toggle if a link within the header was clicked
           if (e.target.tagName === 'A') {
             return;
           }
@@ -419,8 +689,196 @@
         // Make the header appear clickable with cursor style
         navHeader.style.cursor = 'pointer';
+        // Handle window resize
+        window.addEventListener('resize', function() {
+          const newIsMobile = window.innerWidth <= 768;
+          if (newIsMobile !== isMobile) {
+            if (newIsMobile) {
+              // On mobile, collapse the nav by default
+              collapseNav();
+            } else {
+              // On desktop, expand the nav by default
+              expandNav();
+            }
+          }
+        });
+        // Handle dropdown toggles
+        document.querySelectorAll('.nav-group-dropdown-btn').forEach(button => {
+          button.addEventListener('click', function(e) {
+            e.stopPropagation();
+            this.classList.toggle('open');
+          });
+        });
+        // Close dropdowns when clicking outside
+        document.addEventListener('click', function(e) {
+          if (!e.target.closest('.nav-group-dropdown')) {
+            document.querySelectorAll('.nav-group-dropdown-btn').forEach(button => {
+              button.classList.remove('open');
+            });
+          }
+        });
+      });
+    </script>
+    <button id="form-filler-button" class="form-filler-button" title="Fill all form fields with default values">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+      </svg>
+      <span>Fill Form</span>
+    </button>
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        // Create a function to fill the form with sensible default values
+        function fillFormWithDefaults() {
+          // Get all input elements
+          const inputs = document.querySelectorAll('input, select, textarea');
+          // Record which elements were filled for status feedback
+          const filledElements = [];
+          // Process each input
+          inputs.forEach(input => {
+            let filled = true;
+            // Skip hidden inputs and those with existing values
+            if (input.type === 'hidden' || (input.value && input.value.trim() !== '')) {
+              filled = false;
+            }
+            // Handle different input types
+            else if (input.type === 'text') {
+              if (input.id.toLowerCase().includes('name') || input.name.toLowerCase().includes('name')) {
+                input.value = 'John Doe';
+              } else {
+                input.value = 'Default Text';
+              }
+            }
+            else if (input.type === 'email') {
+              input.value = 'test@example.com';
+            }
+            else if (input.type === 'password') {
+              input.value = 'Password123!';
+            }
+            else if (input.type === 'tel') {
+              input.value = '+1234567890';
+            }
+            else if (input.type === 'number') {
+              input.value = '42';
+            }
+            else if (input.type === 'url') {
+              input.value = 'https://example.com';
+            }
+            else if (input.type === 'date') {
+              const today = new Date();
+              const yyyy = today.getFullYear();
+              const mm = String(today.getMonth() + 1).padStart(2, '0');
+              const dd = String(today.getDate()).padStart(2, '0');
+              input.value = `${yyyy}-${mm}-${dd}`;
+            }
+            else if (input.type === 'time') {
+              input.value = '12:00';
+            }
+            else if (input.type === 'checkbox' || input.type === 'radio') {
+              input.checked = true;
+            }
+            else if (input.tagName === 'SELECT') {
+              if (input.options.length > 0) {
+                input.selectedIndex = 1 >= input.options.length ? 0 : 1; // Select second option if available, first otherwise
+              }
+            }
+            else if (input.tagName === 'TEXTAREA') {
+              input.value = 'This is a sample text for the textarea field.';
+            }
+            else {
+              // For any other input types
+              input.value = 'Default Value';
+            }
+            // Add to filled elements if we actually filled it
+            if (filled) {
+              filledElements.push(input);
+              // Dispatch input event to trigger any listeners
+              const event = new Event('input', { bubbles: true });
+              input.dispatchEvent(event);
+              // For select elements, also dispatch change event
+              if (input.tagName === 'SELECT') {
+                const changeEvent = new Event('change', { bubbles: true });
+                input.dispatchEvent(changeEvent);
+              }
+            }
+          });
+          // Show a notification about what was filled
+          if (filledElements.length > 0) {
+            // If an updateCaptchaStatus function exists (from our other demos), use it
+            if (typeof window.updateCaptchaStatus === 'function') {
+              window.updateCaptchaStatus(`Filled ${filledElements.length} form fields with default values`, 'info');
+            } else {
+              console.log(`Filled ${filledElements.length} form fields with default values`);
+            }
+            // Highlight the filled fields briefly
+            filledElements.forEach(el => {
+              const originalBackground = el.style.backgroundColor;
+              const originalTransition = el.style.transition;
+              el.style.transition = 'background-color 1.5s ease';
+              el.style.backgroundColor = '#e3f2fd';
+              setTimeout(() => {
+                el.style.backgroundColor = originalBackground;
+                setTimeout(() => {
+                  el.style.transition = originalTransition;
+                }, 1500);
+              }, 500);
+            });
+          }
+        }
+        // Add the click event listener to the form filler button
+        const formFillerButton = document.getElementById('form-filler-button');
+        if (formFillerButton) {
+          formFillerButton.addEventListener('click', fillFormWithDefaults);
+        }
       });
     </script>
-</body>
-</html>
+	<div class="explanation">
+		<h2>How Invisible Image CAPTCHA Works (Implicit Rendering)</h2>
+		<h3>Implementation Details</h3>
+		<p>This example demonstrates how to use Procaptcha in image mode with implicit rendering:</p>
+		<ol>
+			<li>Import the Procaptcha script</li>
+			<li>Add a div with the procaptcha class</li>
+			<li>Set data-* attributes to configure the CAPTCHA</li>
+			<li>Handle the verification result in the callback function</li>
+		</ol>
+		<h3>Key Code Example</h3>
+		<pre>&lt;div
+    class=&quot;procaptcha&quot;
+    data-theme=&quot;light&quot;
+    data-sitekey=&quot;%PROSOPO_SITE_KEY_IMAGE%&quot;
+    data-failed-callback=&quot;onCaptchaFailed&quot;
+    data-callback=&quot;onCaptchaVerified&quot;
+    data-captcha-type=&quot;image&quot;
+    data-size=&quot;invisible&quot;
+&gt;&lt;/div&gt;</pre>
+		<h3>Execution Flow</h3>
+		<ol>
+			<li>On page load, Procaptcha scans for elements with the procaptcha class</li>
+			<li>The CAPTCHA challenge is rendered only when needed</li>
+			<li>When the user completes the challenge, the callback function is called</li>
+			<li>On successful verification, the form can be submitted with the token</li>
+		</ol>
+	</div>
+	</body>
+</html>