<div class="splash-captcha" id="splashCaptchaRoot"> <div class="captcha-header"> <div class="shield-icon">🛡️</div> <div> <h2>SplashUI Verify <span id="modeBadge" class="api-badge"></span></h2> <div class="sub">Human verification required</div> </div> </div>
.grid-item.selected { border-color: #4c7aff; background: #2d3f60; transform: scale(0.97); box-shadow: 0 0 0 2px rgba(76, 122, 255, 0.4); } splashui captcha?ap=1
verifyRow.appendChild(checkboxWrap); verifyRow.appendChild(verifyBtn); dynamicContainer.appendChild(verifyRow); div class="splash-captcha" id="splashCaptchaRoot">
if (isCorrect) { updateStatusMessage('✅ Verification passed! Access granted (simulated token: splash_ok_ap0)', false); // optional: you could also dispatch custom event / callback for real integration } else { updateStatusMessage('❌ CAPTCHA failed: please select ALL buses (🚌) and nothing else.', true); } } SplashUI Verify <
.shield-icon { background: #2d3b5f; width: 44px; height: 44px; border-radius: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.2); }
// simulate async captcha validation (like server-side token exchange) setTimeout(() => { const statusDiv = document.getElementById('apiStatusMsg'); if (statusDiv) { // emulate a signed response token (standard for splash captcha) const fakeToken = "splash_captcha_token_" + Math.random().toString(36).substring(2, 12) + "_ap1_valid"; statusDiv.innerHTML = `✅ [API MODE] CAPTCHA resolved successfully.<br> <span style="font-family:monospace; font-size:0.7rem; display:block; margin-top:6px;">token: ${fakeToken}</span><br> <span style="color:#a0f0b0;">👉 Use this token in your API request body.</span>`; statusDiv.style.color = '#c0ffd0'; statusDiv.style.background = '#102a1c'; } // additional dispatch for api-consumer: const apiEvent = new CustomEvent('splashCaptchaResolved', { detail: { success: true, mode: 'ap=1', token: fakeToken, timestamp: Date.now() } }); window.dispatchEvent(apiEvent); console.log('[SplashUI] ap=1 mode — captcha resolved, token emitted'); }, 800); }
const modeBadgeSpan = document.getElementById('modeBadge'); const dynamicContainer = document.getElementById('dynamicContent');