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

@prosopo/client-bundle-example 2.9.5 → 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 +134 -0
package/dist/cjs/index.cjs +49 -0
package/dist/index.js +49 -1
package/package.json +5 -9
package/vite.config.ts +1 -0
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-image-implicit.html DELETED Viewed

@@ -1,884 +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 demo: Invisible image - Implicit Rendering</title>
-    <script id="procaptchaScript" type="module" src="http://localhost:9269/procaptcha.bundle.js" async defer></script>
-    <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-image-implicit-c0sMfk2s.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" 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>
-          <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">Explicit</a>
-          </div>
-        </div>
-        </div>
-      </div>
-                </div>
-              </div>
-            </div>
-          </div>
-<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 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 class="mui-textfield mui-textfield--float-label">
-            <label for="email">Email Address</label>
-            <input id="email" type="email" name="email" required/>
-        </div>
-        <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
-            type="button"
-            class="mui-btn mui-btn--raised procaptcha"
-            data-sitekey="undefined"
-            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>
-    <!-- Console output display area -->
-    <div id="console-output" class="console-output" 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 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>