Spaces:
Configuration error
Configuration error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VoidCaptcha - Implementation Instructions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <!-- Google tag (gtag.js) --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag(){dataLayer.push(arguments);} | |
| gtag('js', new Date()); | |
| gtag('config', 'G-XXXXXXXXXX'); | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #111827; | |
| color: #f3f4f6; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6366f1, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| pre { | |
| background-color: #1e293b; | |
| color: #f8fafc; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| overflow-x: auto; | |
| } | |
| code { | |
| font-family: 'Courier New', Courier, monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-xl font-bold gradient-text">VoidCaptcha</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="instructions.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Instructions</a> | |
| <a href="privacy.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Privacy</a> | |
| <a href="tos.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Terms</a> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="sm:hidden hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="index.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> | |
| <a href="instructions.html" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Instructions</a> | |
| <a href="privacy.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Privacy</a> | |
| <a href="tos.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Terms</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="flex-grow"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Implementation <span class="gradient-text">Instructions</span> | |
| </h1> | |
| <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4"> | |
| Get VoidCaptcha up and running on your website in just a few simple steps. | |
| </p> | |
| </div> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Basic Implementation | |
| </h3> | |
| <p class="mt-1 max-w-2xl text-sm text-gray-500"> | |
| Add VoidCaptcha to any form on your website. | |
| </p> | |
| </div> | |
| <div class="border-t border-gray-200 px-4 py-5 sm:p-0"> | |
| <div class="sm:divide-y sm:divide-gray-200"> | |
| <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> | |
| <dt class="text-sm font-medium text-gray-500"> | |
| 1. Include the script | |
| </dt> | |
| <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> | |
| <p class="mb-4">Add this script tag just before your closing <code></body></code> tag:</p> | |
| <div class="mb-4"> | |
| <p class="mt-4 text-sm text-gray-400"> Code | |
| </p> | |
| <pre><code>// voidcaptcha.js | |
| (function(){ | |
| const COLORS=["red","blue"]; | |
| const BASE_TINY=15.19202383; | |
| let target=null, tries=0, cooldown=5000, blockedUntil=0, verified=false, countdownTimer=null; | |
| function createOverlay(){ | |
| if(document.getElementById("voidcaptcha-overlay")) return; | |
| // full screen overlay | |
| const overlay=document.createElement("div"); | |
| overlay.id="voidcaptcha-overlay"; | |
| overlay.style.cssText=` | |
| position:fixed;top:0;left:0;width:100%;height:100%; | |
| background:#000;display:flex;justify-content:center;align-items:center; | |
| z-index:2147483647;flex-direction:column; | |
| `; | |
| // container card | |
| const card=document.createElement("div"); | |
| card.style.cssText=` | |
| background:#111214;color:#eee;padding:26px;border-radius:14px; | |
| text-align:center;box-shadow:0 18px 60px rgba(0,0,0,0.7); | |
| max-width:380px;width:92%;display:flex;flex-direction:column;align-items:center; | |
| `; | |
| const title=document.createElement("h2"); | |
| title.innerText="VoidCaptcha"; | |
| title.style.margin="0 0 10px 0"; | |
| title.style.fontSize="20px"; | |
| // checkbox container | |
| const cbContainer=document.createElement("div"); | |
| cbContainer.style.margin="10px 0 20px 0"; | |
| const checkbox=document.createElement("input"); | |
| checkbox.type="checkbox"; | |
| checkbox.id="voidcaptcha-checkbox"; | |
| checkbox.style.width="24px"; checkbox.style.height="24px"; checkbox.style.cursor="pointer"; | |
| const label=document.createElement("label"); | |
| label.style.color="#eee"; label.style.cursor="pointer"; label.style.marginLeft="8px"; | |
| label.innerText="I'm not a robot"; | |
| cbContainer.appendChild(checkbox); cbContainer.appendChild(label); | |
| // links | |
| const links=document.createElement("div"); | |
| links.style.fontSize="12px"; links.style.color="#aaa"; links.style.marginTop="8px"; | |
| links.innerHTML=`<a href="https://example.com" target="_blank" style="color:#8ab4f8;">Privacy Policy</a> | <a href="https://example.com" target="_blank" style="color:#8ab4f8;">Terms of Service</a>`; | |
| // instruction & result | |
| const instruction=document.createElement("p"); | |
| instruction.style.margin="10px 0 12px 0"; | |
| instruction.style.color="#cfcfcf"; instruction.style.fontSize="14px"; | |
| const result=document.createElement("div"); | |
| result.style.fontWeight="700"; result.style.minHeight="20px"; result.style.marginTop="10px"; | |
| // box container (hidden until checkbox checked) | |
| const boxesWrap=document.createElement("div"); | |
| boxesWrap.style.margin="6px 0 8px 0"; boxesWrap.style.display="none"; boxesWrap.style.justifyContent="center"; | |
| card.appendChild(title); | |
| card.appendChild(cbContainer); | |
| card.appendChild(instruction); | |
| card.appendChild(boxesWrap); | |
| card.appendChild(result); | |
| card.appendChild(links); | |
| overlay.appendChild(card); | |
| document.body.appendChild(overlay); | |
| // create box | |
| function makeBox(color){ | |
| const el=document.createElement("div"); el.dataset.color=color; | |
| el.style.cssText=` | |
| display:inline-block;width:120px;height:120px;margin:8px;cursor:pointer; | |
| border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.45); | |
| background:${color};transition: transform .12s ease, filter .12s ease; | |
| `; | |
| el.addEventListener("mouseover",()=>el.style.transform="translateY(-3px)"); | |
| el.addEventListener("mouseout",()=>el.style.transform="translateY(0px)"); | |
| boxesWrap.appendChild(el); | |
| el.addEventListener("click",(e)=>onBoxClick(e,el,result)); | |
| return el; | |
| } | |
| const redBox=makeBox("red"), blueBox=makeBox("blue"); | |
| function setTarget(){ | |
| target=COLORS[Math.floor(Math.random()*COLORS.length)]; | |
| instruction.innerText=`Click the ${target} box`; | |
| } | |
| function setCooldown(){ | |
| blockedUntil=Date.now()+cooldown; | |
| cooldown=Math.min(cooldown*2,3600000); // max 1 hour | |
| if(cooldown>=3600000) result.innerText="⏳ Maximum wait reached! Next fail = infinite wait"; | |
| redBox.style.pointerEvents="none"; blueBox.style.pointerEvents="none"; | |
| clearInterval(countdownTimer); | |
| countdownTimer=setInterval(()=>{ | |
| const left=Math.max(0,Math.ceil((blockedUntil-Date.now())/1000)); | |
| result.innerText=`⏳ Wait ${left}s before trying again...`; | |
| if(left<=0){ | |
| clearInterval(countdownTimer); countdownTimer=null; tries=0; | |
| redBox.style.pointerEvents="auto"; blueBox.style.pointerEvents="auto"; result.innerText=""; | |
| setTarget(); | |
| } | |
| },300); | |
| } | |
| function failAttempt(msg){ | |
| tries++; | |
| if(msg) result.innerText=msg; | |
| if(tries>=2){ | |
| if(cooldown>=3600000){ // infinite wait | |
| blockedUntil=1e20; | |
| result.innerText="⏳ Infinite wait! You failed too many times."; | |
| }else setCooldown(); | |
| }else setTimeout(()=>{result.innerText=""; setTarget();},350); | |
| } | |
| function pass(){ | |
| verified=true; | |
| overlay.style.transition="opacity .36s ease"; overlay.style.opacity="0"; | |
| setTimeout(()=>{if(overlay.parentNode) overlay.parentNode.removeChild(overlay);},380); | |
| checkbox.checked=true; checkbox.disabled=true; | |
| } | |
| function onBoxClick(e,el,result){ | |
| if(Date.now()<blockedUntil) return; | |
| const color=el.dataset.color; | |
| if(color!==target){el.style.filter="blur(2px)"; setTimeout(()=>el.style.filter="",350); setTimeout(setTarget,350); return;} | |
| const rect=el.getBoundingClientRect(); | |
| const clickX=e.clientX-rect.left, clickY=e.clientY-rect.top; | |
| const forbiddenX=(rect.width/100)*BASE_TINY+1; | |
| const forbiddenY=(rect.height/100)*BASE_TINY+1; | |
| if(Math.abs(clickX-rect.width/2)<forbiddenX && Math.abs(clickY-rect.height/2)<forbiddenY){ | |
| failAttempt("❌ Try Again!"); return; | |
| } | |
| pass(); | |
| } | |
| // checkbox click → show boxes | |
| checkbox.addEventListener("change",()=>{ | |
| if(verified){ checkbox.checked=true; checkbox.disabled=true; return;} | |
| if(checkbox.checked){ boxesWrap.style.display="flex"; setTarget();} | |
| }); | |
| } | |
| if(document.readyState==="loading") document.addEventListener("DOMContentLoaded",createOverlay); | |
| else createOverlay(); | |
| })(); | |
| </code></pre> | |
| <p class="mt-4 text-sm text-gray-400">^^^ | |
| code!!! that is actally the voidcaptcha.js code | |
| </p> | |
| </div> | |
| <pre><code><script src="voidcaptcha.js"></script></code></pre> | |
| <p class="mt-4 text-sm text-gray-400">Step 1: Download and include the script above before your closing </body> tag</p> | |
| </dd> | |
| </div> | |
| <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> | |
| <dt class="text-sm font-medium text-gray-500"> | |
| 2. Verify in your backend | |
| </dt> | |
| <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> | |
| <p class="mb-4">When the form is submitted, check for the <code>voidcaptcha-checkbox</code> field in your form data. It will be set to "on" if the user successfully completed the CAPTCHA.</p> | |
| <p>Here's an example in PHP:</p> | |
| <pre><code>if (!isset($_POST['voidcaptcha-checkbox']) || $_POST['voidcaptcha-checkbox'] !== 'on') { | |
| // CAPTCHA verification failed | |
| die('Please complete the CAPTCHA verification.'); | |
| }</code></pre> | |
| </dd> | |
| </div> | |
| <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> | |
| <dt class="text-sm font-medium text-gray-500"> | |
| 3. Customization (optional) | |
| </dt> | |
| <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> | |
| <p class="mb-4">You can customize the colors and behavior by modifying the <code>voidcaptcha.js</code> file:</p> | |
| <pre><code>const COLORS = ["red", "blue"]; // Change these colors | |
| const BASE_TINY = 15.19202383; // Adjust sensitivity | |
| let cooldown = 5000; // Initial cooldown period</code></pre> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900"> | |
| Advanced Usage | |
| </h3> | |
| <p class="mt-1 max-w-2xl text-sm text-gray-500"> | |
| Programmatic control and event listeners. | |
| </p> | |
| </div> | |
| <div class="border-t border-gray-200 px-4 py-5 sm:p-0"> | |
| <div class="sm:divide-y sm:divide-gray-200"> | |
| <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> | |
| <dt class="text-sm font-medium text-gray-500"> | |
| Manual Trigger | |
| </dt> | |
| <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> | |
| <p class="mb-4">You can manually trigger the CAPTCHA by calling:</p> | |
| <pre><code>voidcaptcha.createOverlay();</code></pre> | |
| </dd> | |
| </div> | |
| <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> | |
| <dt class="text-sm font-medium text-gray-500"> | |
| Verification Callback | |
| </dt> | |
| <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> | |
| <p class="mb-4">Listen for verification events:</p> | |
| <pre><code>document.addEventListener('voidcaptcha-verified', function() { | |
| console.log('User verified!'); | |
| // Submit your form or continue with your flow | |
| });</code></pre> | |
| </dd> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-indigo-50 rounded-lg p-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="alert-circle" class="h-5 w-5 text-indigo-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-sm font-medium text-indigo-800"> | |
| Important Note | |
| </h3> | |
| <div class="mt-2 text-sm text-indigo-700"> | |
| <p> | |
| For security reasons, always verify the CAPTCHA on your server-side code. Client-side verification alone is not sufficient as it can be bypassed by malicious users. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> | |
| <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"> | |
| <div class="px-5 py-2"> | |
| <a href="index.html" class="text-base text-gray-500 hover:text-gray-900">Home</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="instructions.html" class="text-base text-gray-500 hover:text-gray-900">Instructions</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="privacy.html" class="text-base text-gray-500 hover:text-gray-900">Privacy Policy</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="tos.html" class="text-base text-gray-500 hover:text-gray-900">Terms of Service</a> | |
| </div> | |
| </nav> | |
| <p class="mt-8 text-center text-base text-gray-400"> | |
| © 2025 VoidCaptcha. All rights reserved. Contact: voidisopenscience@gmail.com | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |