recaptcha-prank - recaptcha lookalike prank
git clone https://github.com/rj1/infinite-recaptcha
commit cf37aa7ff243ab6fa8a37c6dd17be6417567aa1b author: rj1 <[email protected]> date: Wed, 27 Apr 2022 08:16:01 -0500 first Diffstat:
| A | captcha.css | | | 270 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | captcha.js | | | 109 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | data.js | | | 74 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | index.html | | | 67 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
4 files changed, 520 insertions(+), 0 deletions(-)
diff --git a/captcha.css b/captcha.css @@ -0,0 +1,270 @@ +.container { + font-family: Roboto, helvetica, arial, sans-serif; +} + +.m-p { + margin: 0; + padding: 0; +} + +.block { + display:block; +} + +.line-normal { + line-height: normal; +} + +.checkbox-window { + height: 74px; + width: 300px; + background-color: #f9f9f9; + border-radius: 3px; + border: 1px solid #d3d3d3; +} + +.checkbox-container { + width: 28px; + height: 28px; +} + +.checkbox { + position: relative; + background-color: #fff; + border-radius: 2px; + height: 100%; + width: 100%; + border: 2px solid #c1c1c1; + margin: 21px 0 0 12px; + outline: none; + transition: width 500ms, height 500ms, border-radius 500ms, margin-top 500ms, margin-left 500ms, opacity 900ms; +} + +.checkbox:hover { + border: 2px solid #b2b2b2; +} + +.im-not-a-robot{ + color: #000; + font-weight: 400; + position: relative; + left: 52px; + font-size: 14px; +} + +.captcha-logo { + position: relative; + left: 246px; + bottom: 40px; + width: 33px; + height: 33px; + vertical-align: baseline; +} + +.checkbox-desc { + color: #555555; + position: relative; + font-size: 8px; + text-align: center; + bottom: 41px; + left: 112px; +} + +.checkbox-desc a { + color: #555555; + text-decoration: none; +} + +.checkbox-desc a:hover { + color: #555555; + text-decoration:blueviolet; +} + +.checkbox-name { + font-size: 10px; +} + +.spinner { + visibility: hidden; + position:relative; + height: 35px; + width: 35px; + bottom: 90px; + left: 9px; + opacity:0; + transition: opacity 400ms; +} + +.verify-window { + opacity: 0; + position: absolute; + visibility: hidden; + margin: auto; + width: 400px; + background-color: #fff; + border: 1px solid #cecece; + -webkit-box-shadow: 5px 6px 7px -3px rgba(0,0,0,0.12); + box-shadow: 5px 6px 7px -3px rgba(0,0,0,0.12); + transition: opacity 400ms; +} + +.verify-window-arrow { + opacity: 0; + position: absolute; + visibility: hidden; + transition: opacity 200ms; + width: 10px; + height: 23px; +} + +.verify-container { + padding: 8px; +} + +.verify-header { + background-color: #1a73e8; + padding: 16px 16px 24px 16px; + color: #fff; +} + +.verify-header-text-small { + font-size: 14px; + line-height: normal; +} + +.verify-header-text-medium { + font-size: 16px; +} + +.verify-header-text-big { + font-size: 24px; + font-weight: 700; +} + +.verify-main { + padding: 5px; + display: flex; + justify-content: center; +} + +.verify-area { + height: auto; +} + +.verify-tiles { + border-spacing: 2px 0px; + border-collapse: separate; + margin-top: 5px; + margin-left: -3px; + margin-right: -3px; + max-width: 367px; + transition: 1s; +} + +.verify-tiles td { + height: 128px; + width: 128px; + cursor: pointer; + overflow: hidden; +} + +.imagesquare img { + margin: 0; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + object-fit: cover; + transition: 0.2s; +} + +.tile-selected { + border: 7px solid #fff; + width: -moz-calc(100% - 14px); + width: -webkit-calc(100% - 14px); + width: -o-calc(100% - 14px); + width: calc(100% - 14px); + height: -moz-calc(100% - 14px); + height: -webkit-calc(100% - 14px); + height: -o-calc(100% - 14px); + height: calc(100% - 14px); +} + +.tile-unselected { + width: 100%; + height: 100%; + border: none; +} + +.error { + color: #d14836; + font-size: 14px; + width: 100%; + text-align: center; + margin-bottom: 10px; + display: none; +} + +.verify-footer { + border-top: 1px solid #cecece; + padding: 10px 7px 10px 7px; + color: #737373; + display: grid; + grid-template-columns: auto 102px; + font-size: 13px; +} + +.verify-footer-left { + padding: 5px; +} + +.verify-verify-button { + text-transform: uppercase; + background-color: #5a89e2; + color: #fff; + text-align: center; + width: 100%; + padding: 12px 0 12px 0; + text-decoration: none; + font-weight: 600; + height: min-content; + border-radius: 3px; + font-size: 14px; + border: none; + outline: none; + cursor:pointer; +} + +.footer-left-button { + background-size: 32px 32px; + cursor: pointer; + height: 48px; + opacity: .55; + width: 48px; + padding: 0; + border: 0; + background-repeat: no-repeat; + background-position: center; +} + +.footer-left-button-reload { + background: url('/images/refresh_2x.png'); +} + +.footer-left-button-audio { + background: url('/images/audio_2x.png'); +} + +.footer-left-button-info { + background: url('/images/info_2x.png'); +} + +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + diff --git a/captcha.js b/captcha.js @@ -0,0 +1,109 @@ +let tracker = 1; +let max = Object.keys(imgData).length; +let checkboxContainer = document.getElementById("checkbox-window"); +let checkbox = document.getElementById("checkbox"); +let checkboxSpinner = document.getElementById("spinner"); +let verification = document.getElementById("verify-window"); +let verificationArrow = document.getElementById("verify-window-arrow"); +let verificationButton = document.getElementById("verify-verify-button"); +let error = document.getElementById("error"); + +function fillTiles() { + for(let i = 1; i < 10; i++) { + document.getElementById(i.toString()).src = imgData[tracker][i-1]; + } + + document.getElementById("captcha-name").innerText = imgData[tracker][9]; + + tracker++; + if(tracker > max) { + tracker = 1; + } +} + +function clickTile(i) { + if(document.getElementById(i).className !== "tile-selected") { + document.getElementById(i).className = "tile-selected"; + } else { + document.getElementById(i).className = "tile-unselected"; + } +} + +function clickDetection() { + if(checkbox && verificationButton) { + verificationButton.addEventListener("click", function (e) { + e.preventDefault(); + error.style.display = "block"; + for(let i = 1; i < 10; i++) { + document.getElementById(i).className = "tile-unselected"; + } + fillTiles(); + }); + checkbox.addEventListener("click", function (e) { + e.preventDefault(); + checkbox.disabled = true; + spinner(); + }); + window.addEventListener('click', function(e) { + if(verification.contains(e.target) || checkboxContainer.contains(e.target)) { + } else { + hideVerification(); + } + }); + } +} + +function spinner() { + checkbox.style.width = "4px"; + checkbox.style.height = "4px"; + checkbox.style.borderRadius = "50%"; + checkbox.style.marginLeft = "25px"; + checkbox.style.marginTop = "33px"; + checkbox.style.opacity = "0"; + + setTimeout(function() { + checkboxSpinner.style.visibility = "visible"; + checkboxSpinner.style.opacity = "1"; + }, 500) + setTimeout(function() { + displayVerification(); + }, 900) +} + +function displayVerification() { + verification.style.display = "block"; + verification.style.visibility = "visible"; + verification.style.opacity = "1"; + verification.style.top = checkboxContainer.offsetTop - 80 + "px"; + verification.style.left = checkboxContainer.offsetLeft + 54 + "px"; + + if(verification.offsetTop < 5) { + verification.style.top = "5px"; + } + + if(verification.offsetLeft + verification.offsetWidth > window.innerWidth-10) { + verification.style.left = checkboxContainer.offsetLeft - 8 + "px"; + } else { + verificationArrow.style.top = checkboxContainer.offsetTop + 24 + "px"; + verificationArrow.style.left = checkboxContainer.offsetLeft + 45 + "px"; + verificationArrow.style.visibility = "visible"; + verificationArrow.style.opacity = "1"; + } +} + +function hideVerification() { + verification.style.display = "none"; + verification.style.visibility = "hidden"; + verification.style.opacity = "0"; + verificationArrow.style.visibility = "hidden"; + verificationArrow.style.opacity = "0"; + checkbox.style.width = "100%"; + checkbox.style.height = "100%"; + checkbox.style.borderRadius = "2px"; + checkbox.style.margin = "21px 0 0 12px"; + checkbox.style.opacity = "1"; + checkboxSpinner.style.visibility = "hidden"; + checkboxSpinner.style.opacity = "0"; + checkbox.disabled = false; + verificationButton.disabled = false; +} diff --git a/data.js b/data.js @@ -0,0 +1,74 @@ +var imgData = { + 1: [ + "images/captcha/puppies/1.jpg", + "images/captcha/puppies/2.jpg", + "images/captcha/puppies/3.jpg", + "images/captcha/puppies/4.jpg", + "images/captcha/puppies/5.jpg", + "images/captcha/puppies/6.jpg", + "images/captcha/puppies/7.jpg", + "images/captcha/puppies/8.jpg", + "images/captcha/puppies/9.jpg", + "puppies", + ], + 2: [ + "images/captcha/rhinos/1.jpg", + "images/captcha/rhinos/2.jpg", + "images/captcha/rhinos/3.jpg", + "images/captcha/rhinos/4.jpg", + "images/captcha/rhinos/5.jpg", + "images/captcha/rhinos/6.jpg", + "images/captcha/rhinos/7.jpg", + "images/captcha/rhinos/8.jpg", + "images/captcha/rhinos/9.jpg", + "rhinos" + ], + 3: [ + "images/captcha/hydrants/1.jpg", + "images/captcha/hydrants/2.jpg", + "images/captcha/hydrants/3.jpg", + "images/captcha/hydrants/9.jpg", + "images/captcha/hydrants/4.jpg", + "images/captcha/hydrants/8.jpg", + "images/captcha/hydrants/5.jpg", + "images/captcha/hydrants/6.jpg", + "images/captcha/hydrants/7.jpg", + "fire hydrants" + ], + 4: [ + "images/captcha/trains/1.jpg", + "images/captcha/trains/2.jpg", + "images/captcha/trains/3.jpg", + "images/captcha/trains/9.jpg", + "images/captcha/trains/4.jpg", + "images/captcha/trains/8.jpg", + "images/captcha/trains/5.jpg", + "images/captcha/trains/6.jpg", + "images/captcha/trains/7.jpg", + "trains" + ], + 5: [ + "images/captcha/trains/5.jpg", + "images/captcha/trains/1.jpg", + "images/captcha/trains/3.jpg", + "images/captcha/trains/7.jpg", + "images/captcha/trains/9.jpg", + "images/captcha/trains/4.jpg", + "images/captcha/trains/8.jpg", + "images/captcha/trains/2.jpg", + "images/captcha/trains/6.jpg", + "boats" + ], + 6: [ + "images/captcha/trains/2.jpg", + "images/captcha/trains/6.jpg", + "images/captcha/trains/7.jpg", + "images/captcha/trains/3.jpg", + "images/captcha/trains/9.jpg", + "images/captcha/trains/4.jpg", + "images/captcha/trains/8.jpg", + "images/captcha/trains/5.jpg", + "images/captcha/trains/1.jpg", + "busses" + ], +}; diff --git a/index.html b/index.html @@ -0,0 +1,67 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>captcha</title> + <link href="captcha.css" rel="stylesheet"> + </head> + <body> + <div class="container m-p noselect"> + <div id="checkbox-window" class="checkbox-window m-p block"> + <div class="checkbox-container m-p"> + <button type="button" id="checkbox" class="checkbox m-p line-normal"></button> + </div> + <p class="im-not-a-robot m-p line-normal">I'm not a robot</p> + <img src="images/logo.png" class="captcha-logo line-normal" alt=""> + <p class="checkbox-desc checkbox-name m-p line-normal">reCAPTCHA</p> + <p class="checkbox-desc m-p line-normal"><a href="#">Privacy</a> - <a href="#">Terms</a></p> + <img src="images/loading.gif" id="spinner" class="spinner m-p line-normal"> + </div> + <div id="verify-window" class="verify-window"> + <div class="verify-container"> + <header class="verify-header"> + <span class="verify-header-text-medium m-p block">Select all images with</span> + <span class="verify-header-text-big m-p block" id="captcha-name">kittens</span> + <span class="verify-header-text-medium m-p block"></span> + </header> + <main class="verify-main"> + <div class="verify-area"> + <table class="verify-tiles"> + <tr> + <td><img class="tile-unselected" onclick="clickTile(1)" id="1" src=""></td> + <td><img class="tile-unselected" onclick="clickTile(2)" id="2" src=""></td> + <td><img class="tile-unselected" onclick="clickTile(3)" id="3" src=""></td> + </tr> + <tr> + <td><img class="tile-unselected" onclick="clickTile(4)" id="4" src=""></td> + <td><img class="tile-unselected" onclick="clickTile(5)" id="5" src=""></td> + <td><img class="tile-unselected" onclick="clickTile(6)" id="6" src=""></td> + </tr> + <tr> + <td><img class="tile-unselected" onclick="clickTile(7)" id="7" src=""></td> + <td><img class="tile-unselected" onclick="clickTile(8)" id="8" src=""></td> + <td><img class="tile-unselected" onclick="clickTile(9)" id="9" src=""></td> + </tr> + </table> + </main> + </div> + <div class="error" id="error">Please select all matching images.</div> + <footer class="verify-container verify-footer"> + <div class="verify-footer-left"> + <button class="footer-left-button footer-left-button-reload"></button> + <button class="footer-left-button footer-left-button-audio"></button> + <button class="footer-left-button footer-left-button-info"></button> + </div> + <button type="button" class="verify-verify-button block" id="verify-verify-button">Verify</button> + </footer> + </div> + <img src="images/captcha_arrow.svg" alt="" class="verify-window-arrow" id="verify-window-arrow"/> + </div> + <script src="data.js"></script> + <script src="captcha.js"></script> + <script type="text/javascript"> + clickDetection(); + fillTiles() + </script> + </body> +</html>