npm - @prosopo/client-bundle-example - Versions diffs - 2.9.4 → 2.10.5 - Mend

@prosopo/client-bundle-example 2.9.4 → 2.10.5

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

package/CHANGELOG.md +151 -0
package/dist/cjs/index.cjs +49 -0
package/dist/index.js +49 -0
package/package.json +8 -13
package/vite.config.ts +2 -1
package/dist/assets/captcha-BaCo3bEP.js +0 -1
package/dist/assets/captcha-DAWM1slf.css +0 -1
package/dist/assets/dummy.txt +0 -0
package/dist/assets/frictionless-explicit-CtnTw8dK.js +0 -1
package/dist/assets/frictionless-implicit-BH7anfOq.js +0 -1
package/dist/assets/image-explicit-Dm_JoW0N.js +0 -4
package/dist/assets/image-implicit-M0Y7U93R.js +0 -1
package/dist/assets/index-Ck5HfpfQ.js +0 -1
package/dist/assets/invisible-frictionless-explicit-CSPYfcNr.js +0 -4
package/dist/assets/invisible-frictionless-implicit-D0saDt4U.js +0 -1
package/dist/assets/invisible-image-explicit-erOMAo-F.js +0 -4
package/dist/assets/invisible-image-implicit-c0sMfk2s.js +0 -1
package/dist/assets/invisible-pow-explicit-BgMt7lhN.js +0 -4
package/dist/assets/invisible-pow-implicit-CnxS8gw2.js +0 -4
package/dist/assets/pow-explicit-BgDWNJK9.js +0 -4
package/dist/assets/pow-implicit-Ck5HfpfQ.js +0 -1
package/dist/frictionless-explicit.html +0 -875
package/dist/frictionless-implicit.html +0 -874
package/dist/image-explicit.html +0 -877
package/dist/index.html +0 -850
package/dist/invisible-frictionless-explicit.html +0 -877
package/dist/invisible-frictionless-implicit.html +0 -884
package/dist/invisible-image-explicit.html +0 -878
package/dist/invisible-image-implicit.html +0 -884
package/dist/invisible-pow-explicit.html +0 -878
package/dist/invisible-pow-implicit.html +0 -878
package/dist/plugins/explanation-injector.ts +0 -250
package/dist/plugins/form-filler-injector.ts +0 -233
package/dist/plugins/navigation-injector.ts +0 -602
package/dist/plugins/status-log-injector.ts +0 -199
package/dist/pow-explicit.html +0 -877
package/dist/pow-implicit.html +0 -881

package/dist/invisible-frictionless-explicit.html DELETED Viewed

@@ -1,877 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <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 {
-        background-color: #2196F3;
-        padding: 0;
-        margin-bottom: 20px;
-        transition: all 0.3s ease;
-        overflow: hidden;
-        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: 60px;
-      }
-      .nav-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 0 20px;
-        position: relative;
-      }
-      .nav-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 12px 0;
-        position: relative;
-        z-index: 20;
-      }
-      .nav-title {
-        color: white;
-        font-size: 1.25rem;
-        font-weight: 600;
-        margin: 0;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .nav-title-text {
-        margin-right: 8px;
-      }
-      .nav-title-hint {
-        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(255,255,255,0.1);
-        color: white;
-        border: none;
-        padding: 8px 12px;
-        cursor: pointer;
-        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(255,255,255,0.2);
-      }
-      .nav-toggle-icon {
-        width: 24px;
-        height: 24px;
-        display: inline-block;
-        position: relative;
-      }
-      .nav-toggle-icon svg {
-        position: absolute;
-        top: 0;
-        left: 0;
-        transition: opacity 0.3s ease;
-      }
-      .nav-toggle-icon .icon-collapse {
-        opacity: 1;
-      }
-      .nav-toggle-icon .icon-expand {
-        opacity: 0;
-      }
-      .collapsed .nav-toggle-icon .icon-collapse {
-        opacity: 0;
-      }
-      .collapsed .nav-toggle-icon .icon-expand {
-        opacity: 1;
-      }
-      .nav-content {
-        padding: 0 0 20px 0;
-        transition: opacity 0.3s ease;
-      }
-      .collapsed .nav-content {
-        opacity: 0;
-      }
-      .nav-sections {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 20px;
-      }
-      .nav-section {
-        flex: 1;
-        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.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;
-        margin: 0;
-        padding: 0;
-      }
-      .nav-group-links li {
-        margin: 6px 0;
-      }
-      .nav-group-links a {
-        color: white;
-        text-decoration: none;
-        font-weight: 500;
-        padding: 6px 8px;
-        display: inline-block;
-        border-radius: 4px;
-        transition: background-color 0.2s ease;
-      }
-      .nav-group-links a:hover {
-        background-color: rgba(255,255,255,0.2);
-      }
-      .nav-group-links .active {
-        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-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-CSPYfcNr.js"></script>
-    <link rel="modulepreload" crossorigin href="/assets/captcha-BaCo3bEP.js">
-    <link rel="stylesheet" crossorigin href="/assets/captcha-DAWM1slf.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>
-          <div id="nav-topbar" class="nav-topbar">
-            <div class="nav-container">
-              <div id="nav-header" class="nav-header">
-                <h1 class="nav-title">
-                  <span class="nav-title-text">Procaptcha Demo Playground</span>
-                  <span class="nav-title-hint">(Click anywhere to see more examples)</span>
-                </h1>
-                <button id="nav-toggle" class="nav-toggle" aria-label="Toggle navigation">
-                  <span class="nav-toggle-icon">
-                    <svg class="icon-collapse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <polyline points="18 15 12 9 6 15"></polyline>
-                    </svg>
-                    <svg class="icon-expand" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                  </span>
-                </button>
-              </div>
-              <div class="nav-content">
-                <div class="nav-sections">
-      <div class="nav-section">
-        <h3>Standard Captchas</h3>
-        <div class="nav-row">
-        <div class="nav-group">
-          <div class="nav-group-title">Image</div>
-          <div class="nav-group-links">
-            <a href="index.html">Implicit</a>
-            <a href="image-explicit.html">Explicit</a>
-          </div>
-        </div>
-        <div class="nav-group">
-          <div class="nav-group-title">Pow</div>
-          <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>
-          <div class="nav-group-links">
-            <a href="frictionless-implicit.html">Implicit</a>
-            <a href="frictionless-explicit.html">Explicit</a>
-          </div>
-        </div>
-        </div>
-      </div>
-      <div class="nav-section">
-        <h3>Invisible Captchas</h3>
-        <div class="nav-row">
-        <div class="nav-group">
-          <div class="nav-group-title">Image</div>
-          <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>
-          <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>
-          <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>
-      </div>
-                </div>
-              </div>
-            </div>
-          </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>
-        <!-- Status log will be injected by the status-log-injector plugin -->
-        <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>
-        <div id="result" class="info-box" style="display: none;"></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';
-        if (navCollapsed) {
-          navBar.classList.add('collapsed');
-        }
-        // Function to expand the navigation
-        function expandNav() {
-          if (navBar.classList.contains('collapsed')) {
-            navBar.classList.remove('collapsed');
-            localStorage.setItem('navCollapsed', 'false');
-          }
-        }
-        // Function to collapse the navigation
-        function collapseNav() {
-          if (!navBar.classList.contains('collapsed')) {
-            navBar.classList.add('collapsed');
-            localStorage.setItem('navCollapsed', 'true');
-          }
-        }
-        // Function to toggle the navigation
-        function toggleNav() {
-          navBar.classList.toggle('collapsed');
-          localStorage.setItem('navCollapsed', navBar.classList.contains('collapsed'));
-        }
-        // Toggle on button click
-        toggleBtn.addEventListener('click', function(e) {
-          e.stopPropagation();
-          toggleNav();
-        });
-        // 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) {
-          if (e.target.tagName === 'A') {
-            return;
-          }
-          toggleNav();
-        });
-        // 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>
-	<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>