<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🥚</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-color: #f9f9f9;
            margin: 0;
            overflow: hidden;
        }

        .captcha-container {
            background-color: #ffffff;
            border: 1px solid #d3d3d3;
            width: 400px;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            max-height: 90vh;
            overflow-y: auto;
        }

        .captcha-title {
            background-color: #4285f4;
            color: #ffffff;
            padding: 10px;
            border-bottom: 1px solid #d3d3d3;
            text-align: left;
        }

        .captcha-title .main-instruction {
            font-size: 1em;
            display: block;
            margin-bottom: 5px;
        }

        .captcha-title .target {
            font-size: 1.2em;
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }

        .captcha-title .sub-instruction {
            font-size: 1em;
            font-weight: normal;
            display: block;
        }

        .captcha-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            padding: 10px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .captcha-cell {
            width: 100%;
            aspect-ratio: 736 / 1103;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
            border: 1px solid #d3d3d3;
            background-color: #e0e0e0;
            position: relative;
        }

        .captcha-cell.selected {
            border-color: #4285f4;
            border-width: 2px;
        }

        .verify-button {
            margin: 10px;
            padding: 10px;
            font-size: 1em;
            background-color: #4285f4;
            color: #ffffff;
            border: none;
            cursor: pointer;
            width: calc(100% - 20px);
            box-sizing: border-box;
        }

        .verify-button:hover {
            background-color: #357ae8;
        }

        .verify-button.disabled {
            background-color: #d3d3d3;
            cursor: not-allowed;
        }

        .recaptcha-container {
            display: flex;
            align-items: center;
            padding: 10px;
            position: relative;
            width: 100%;
            box-sizing: border-box;
        }

        .recaptcha-checkbox {
            width: 24px;
            height: 24px;
            border: 3px solid #d3d3d3;
            margin-right: 10px;
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .recaptcha-checkbox.checked {
            animation: spin 1s linear infinite;
            border-top: 3px solid #4285f4;
            border-radius: 50%;
        }

        .recaptcha-label {
            font-size: 1em;
            cursor: pointer;
        }

        .recaptcha-logo {
            margin-left: auto;
            width: 40px;
            height: auto;
        }

        .recaptcha-footer {
            text-align: left;
            font-size: 0.8em;
            color: #666;
            padding-left: 10px;
            padding-top: 5px;
        }

        .validation-message {
            text-align: center;
            font-size: 1em;
            color: #4285f4;
            margin-top: 10px;
            display: none;
        }

        .success-message {
            text-align: center;
            margin-top: 20px;
            display: none;
        }

        .success-message img {
            max-width: 100%;
        }

        .success-message p {
            font-size: 1.2em;
            color: green;
        }

        @media (min-width: 1200px) {
            .captcha-container {
                max-width: 500px;
            }

            .captcha-title {
                padding: 15px;
            }
        }

        @keyframes fadeToWhite {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="captcha-container" id="captcha-container">
    <div class="recaptcha-container" id="recaptcha-container">
        <div class="recaptcha-checkbox" id="recaptcha-checkbox"></div>
        <label for="recaptcha-checkbox" class="recaptcha-label">I'm not a robot</label>
        <img src="https://cdnlogo.com/logos/r/76/recaptcha.svg" alt="reCAPTCHA Logo" class="recaptcha-logo">

        <div class="recaptcha-footer">
            reCAPTCHA<br>
            Privacy - Terms
        </div>
    </div>
    <div class="captcha-title" id="captcha-title" style="display: none;">
        <span class="main-instruction">Select all images with</span>
        <span class="target" id="captcha-target">crosswalks</span>
        <span class="sub-instruction">Click verify once there are none left.</span>
    </div>
    <div class="captcha-grid" id="captcha-grid" style="display: none;">
        <!-- Captcha cells will be generated here -->
    </div>
    <button class="verify-button" id="verify-button" style="display: none;">VERIFY</button>
    <div class="validation-message" id="validation-message">Validating, please wait...</div>
</div>
<div class="success-message" id="success-message">
    <h1>🐣</h1>
    <div class="tenor-gif-embed" data-postid="13820643" data-share-method="host" data-aspect-ratio="1"
         data-width="100%"><a href="https://tenor.com/view/dog-eye-wink-youre-the-best-gif-13820643">Dog Eye GIF</a>from
        <a href="https://tenor.com/search/dog-gifs">Dog GIFs</a></div>
    <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
    <p>You deserve a cookie 🍪 (or promotion?)</p>
</div>

</body>
</html>