Splashui — Captcha?ap=1
.footer-note { font-size: 0.7rem; text-align: center; color: #6a7290; margin-top: 1rem; } </style> </head> <body>
// ----- INTERACTIVE MODE UI (full splash captcha) ----- function buildInteractiveUI() { // challenge description: select all images with a bus (classic captcha style) const items = [ { emoji: '🚗', label: 'car', isTarget: false }, { emoji: '🚌', label: 'bus', isTarget: true }, { emoji: '🚲', label: 'bicycle', isTarget: false }, { emoji: '🚌', label: 'bus', isTarget: true }, { emoji: '✈️', label: 'plane', isTarget: false }, { emoji: '🚛', label: 'truck', isTarget: false } ]; splashui captcha?ap=1
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); } } .footer-note { font-size: 0.7rem
// construct full interactive UI dynamicContainer.innerHTML = ''; // reset const challengeDiv = document.createElement('div'); challengeDiv.className = 'challenge-text'; challengeDiv.innerHTML = '🔍 <strong>Select all squares with a bus</strong><span style="float:right;">⏱️ demo</span>'; dynamicContainer.appendChild(challengeDiv); isTarget: false }
.sub { color: #9aa4bf; font-size: 0.85rem; margin-top: 0.2rem; }
items.forEach((item, idx) => { const tile = document.createElement('div'); tile.className = 'grid-item'; if (selectedIndices.has(idx)) tile.classList.add('selected'); tile.textContent = item.emoji; tile.style.fontSize = '2.5rem'; tile.style.display = 'flex'; tile.style.alignItems = 'center'; tile.style.justifyContent = 'center'; tile.addEventListener('click', (e) => { e.stopPropagation(); if (selectedIndices.has(idx)) { selectedIndices.delete(idx); } else { selectedIndices.add(idx); } renderGrid(); // re-render }); gridContainer.appendChild(tile); }); return gridContainer; }