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-frictionless-explicit.html CHANGED Viewed

@@ -1,150 +1,9 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <title>Procaptcha Invisible Mode - Explicit Rendering</title>
-    <!-- Load the Procaptcha script with explicit rendering -->
-    <script type="module" src="https://staging-js.prosopo.io/js/procaptcha.bundle.js?render=explicit" 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;
-        }
-        .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;
-        }
-        .info-box {
-            background-color: #e7f3fe;
-            border-left: 4px solid #2196F3;
-            padding: 15px;
-            margin: 20px 0;
-        }
-    </style>
-    <script type="text/javascript">
-        function onSubmit(token) {
-            console.log('Procaptcha verified, token:', token);
-            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';
-            return false;
-        }
-        function validate(event) {
-            event.preventDefault();
-            // Simple form validation
-            if (!document.getElementById('name').value) {
-                alert("Please enter your name");
-                return;
-            }
-            if (!document.getElementById('email').value) {
-                alert("Please enter your email");
-                return;
-            }
-            document.getElementById('console-output').innerHTML = '';
-            const originalConsoleLog = console.log;
-            const consoleOutput = document.getElementById('console-output');
-            console.log = function() {
-                originalConsoleLog.apply(console, arguments);
-                // Format and display the arguments in our custom console
-                const args = Array.from(arguments).map(arg => {
-                    if (typeof arg === 'object') {
-                        try {
-                            return JSON.stringify(arg, null, 2);
-                        } catch (e) {
-                            return "[Object cannot be stringified]";
-                        }
-                    }
-                    return String(arg);
-                });
-                consoleOutput.innerHTML += args.join(' ') + '<br>';
-                consoleOutput.style.display = 'block';
-            };
-            console.log('Executing Procaptcha verification...');
-            window.procaptcha.execute();
-            setTimeout(() => {
-                console.log = originalConsoleLog;
-            }, 1000);
-        }
-        function onloadCallback() {
-            console.log('Procaptcha script loaded, initializing explicit rendering');
-            // Render the Procaptcha widget
-            window.procaptcha.render(document.getElementById('procaptcha-container'), {
-                'siteKey': 'undefined',
-                'callback': onSubmit,
-                'captchaType': 'frictionless',
-                'size': 'invisible'
-            });
-            document.getElementById('submit-button').addEventListener('click', validate);
-        }
-        document.addEventListener('DOMContentLoaded', function() {
-            // Set up the onload callback for Procaptcha
-            window.onProcaptchaLoad = onloadCallback;
-        });
-    </script>
+    <link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css"/>
+    <title>Procaptcha Frictionless Mode - Explicit Rendering</title>
+    <!-- Status log will be injected by the status-log-injector plugin -->
     <style>
       .nav-topbar {
@@ -153,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;
@@ -233,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;
@@ -263,37 +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 type="module" crossorigin src="/assets/invisible-frictionless-explicit-DugBtRe4.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>
-    <script type="module" crossorigin src="/assets/invisible-frictionless-explicit-DgCaJtPg.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/modulepreload-polyfill-B5Qt9EMX.js">
+	<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>
@@ -316,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>
@@ -353,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">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">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" class="active">Explicit</a></li>
-          </ul>
+          <div class="nav-group-links">
+            <a href="invisible-frictionless-implicit.html">Implicit</a>
+            <a href="invisible-frictionless-explicit.html" class="active">Explicit</a>
+          </div>
         </div>
         </div>
@@ -390,90 +577,54 @@
             </div>
           </div>
-    <h1>Procaptcha Invisible Mode</h1>
-    <p>This example demonstrates how to use Procaptcha in invisible mode with explicit rendering.</p>
-    <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 />
-        </div>
+    <div class="mui-container">
+        <h1>Procaptcha Frictionless Mode - Explicit Rendering</h1>
+        <p>This example demonstrates how to use Procaptcha in frictionless mode with explicit rendering.</p>
-        <div>
-            <label for="email">Email:</label>
-            <input type="email" id="email" name="email" placeholder="Your email" required />
-        </div>
+        <!-- Status log will be injected by the status-log-injector plugin -->
-        <!-- Invisible Procaptcha container -->
-        <div id="procaptcha-container" data-size="invisible"></div>
+        <form id="demo-form" class="mui-form">
+            <h2>Example Form</h2>
+            <div class="mui-textfield mui-textfield--float-label">
+                <label for="name">Name</label>
+                <input type="text" id="name" name="name" required />
+            </div>
+            <div class="mui-textfield mui-textfield--float-label">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" required />
+            </div>
+            <!-- The container for the CAPTCHA -->
+            <div id="procaptcha-container"></div>
+            <button type="submit" class="mui-btn mui-btn--raised" data-cy="submit-button">Submit</button>
+            <div id="error"></div>
+        </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>
-        <!-- Regular submit button (not directly tied to Procaptcha) -->
-        <button id="submit-button" type="button">Submit</button>
-    </form>
-    <!-- Result display area -->
-    <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 mode with explicit rendering:</p>
-        <ol>
-            <li>Include the Procaptcha script with <code>?render=explicit</code> parameter</li>
-            <li>Create a container div with <code>data-size="invisible"</code></li>
-            <li>Define an <code>onloadCallback</code> function that renders the Procaptcha widget</li>
-            <li>Add a click handler to your submit button that validates the form and executes Procaptcha</li>
-            <li>When Procaptcha verification succeeds, your callback function is called</li>
-        </ol>
-        <p>The key elements are:</p>
-        <pre>
-&lt;script type="module" src="./assets/procaptcha.bundle.js?render=explicit" async defer&gt;&lt;/script&gt;
-&lt;div id="procaptcha-container" data-size="invisible"&gt;&lt;/div&gt;
-&lt;script&gt;
-// Render the widget
-window.procaptcha.render('procaptcha-container', {
-    'siteKey': 'your_site_key',
-    'callback': onSubmit,
-    'size': 'invisible'
-});
+        <div id="result" class="info-box" style="display: none;"></div>
-// Execute the verification
-window.procaptcha.execute();
-&lt;/script&gt;
-        </pre>
-        <h3>Console Output</h3>
-        <p>When you click the Submit button, the <code>execute()</code> function will:</p>
-        <ol>
-            <li>Find all Procaptcha containers on the page</li>
-            <li>Log each container and its attributes to the console</li>
-            <li>Log all child elements of each container</li>
-            <li>Dispatch a custom <code>procaptcha:execute</code> event to show the modal</li>
-        </ol>
-        <p>This helps debug and understand how the invisible Procaptcha is structured in the DOM.</p>
-        <h3>Event-Based Communication System</h3>
-        <p>To connect the vanilla JavaScript bundle with the React components, we use a custom event system:</p>
-        <ol>
-            <li>When <code>window.procaptcha.execute()</code> is called, it dispatches a <code>procaptcha:execute</code> event</li>
-            <li>The ProcaptchaWidget React component listens for this event</li>
-            <li>When the event is received, the component sets <code>state.showModal = true</code></li>
-            <li>This causes the CAPTCHA modal to appear and verification to begin</li>
-        </ol>
-        <p>This decoupled approach allows the JavaScript bundle to communicate with React components without direct references.</p>
+        <!-- Explanation will be injected by the explanation-injector plugin -->
     </div>
-    <!-- Initialize Procaptcha with onload callback -->
     <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';
@@ -505,20 +656,21 @@ window.procaptcha.execute();
         // 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;
           }
@@ -527,8 +679,199 @@ window.procaptcha.execute();
         // 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>
+	<div class="explanation">
+		<h2>How Invisible Frictionless CAPTCHA Works (Explicit Rendering)</h2>
+		<h3>Implementation Details</h3>
+		<p>This example demonstrates how to use Procaptcha in frictionless mode with explicit rendering:</p>
+		<ol>
+			<li>Import the Procaptcha render function</li>
+			<li>Create a container for the CAPTCHA</li>
+			<li>Render the CAPTCHA explicitly</li>
+			<li>Handle the verification result in the callback function</li>
+		</ol>
+		<h3>Key Code Example</h3>
+		<pre>// Import the render function
+import { render } from &quot;%VITE_BUNDLE_URL%&quot;
+import { CaptchaType } from &quot;@prosopo/types&quot;;
+// Render CAPTCHA
+const widgetId = render(document.getElementById(&#39;procaptcha-container&#39;), {
+    siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
+    captchaType: CaptchaType.frictionless,
+    callback: handleCaptchaResponse,
+    &quot;failed-callback&quot;: handleCaptchaFailed,
+    size: &quot;invisible&quot;
+});</pre>
+		<h3>Execution Flow</h3>
+		<ol>
+			<li>On page load, the render function is called to initialize</li>
+			<li>The CAPTCHA verification happens invisibly in the background</li>
+			<li>When verification is complete, the callback function is called with the token</li>
+			<li>On successful verification, the form can be submitted with the token</li>
+		</ol>
+	</div>
+	</body>
 </html>