mirror of
https://github.com/PrivateCaptcha/PrivateCaptcha.git
synced 2026-04-27 08:19:34 -05:00
Taras Kushnir
70 lines
3.6 KiB
HTML
70 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class='{{block "html_class" .}}h-full{{end}}'>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Private Captcha</title>
|
|
<link rel="stylesheet" href="/assets/css/style.css">
|
|
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
|
|
<script src="/widget/js/privatecaptcha.js"></script>
|
|
<script type="text/javascript">
|
|
function onCaptchaSolved() {
|
|
// setTimeout(() => document.getElementById('pcWidget')._privateCaptcha.reset(), 2000);
|
|
document.getElementById("my-form").submit();
|
|
}
|
|
function onCaptchaStarted() {
|
|
console.log("Started callback called!");
|
|
}
|
|
function onCaptchaErrored() {
|
|
console.log("Errored callback called!");
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class='h-full pc-vertical-stretch'>
|
|
<div class="flex flex-1 flex-col justify-center px-6 lg:px-8 bg-gray-50">
|
|
<section class="-mt-20">
|
|
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<div class="relative max-w-md mx-auto lg:max-w-lg">
|
|
<div class="relative overflow-hidden bg-gray-50 shadow-xl rounded-xl">
|
|
<div class="px-4 py-6 sm:px-8">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="pc-form-caption">Sample form</h1>
|
|
</div>
|
|
<form id="my-form" action='/submit' method="POST" class="mt-12">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="email" class="pc-form-label"> Email </label>
|
|
<div class="mt-2.5 relative">
|
|
<input type="email" name="email" placeholder="Email address" class="w-full pc-form-input-base pc-form-input-normal" required />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="private-captcha-anchor">
|
|
<div class="private-captcha mt-8"
|
|
id="pcWidget"
|
|
data-display-mode="popup"
|
|
data-sitekey="your-sitekey"
|
|
data-puzzle-endpoint="/{{if .Echo}}echo{{end}}puzzle"
|
|
data-started-callback="onCaptchaStarted"
|
|
data-finished-callback="onCaptchaSolved"
|
|
data-errored-callback="onCaptchaErrored"
|
|
data-styles="--border-radius: .75rem;"
|
|
data-store-variable="_privateCaptcha"
|
|
{{ if .Debug }}data-debug="{{.Debug}}"{{end}}
|
|
{{ if .Mode }}data-start-mode="{{.Mode}}"{{end}}>
|
|
</div>
|
|
<button id="formSubmit" type="button" class="w-full pc-form-button" onclick="let form = document.getElementById('my-form'); if (form.checkValidity()) {this.disabled=true; document.getElementById('pcWidget')._privateCaptcha.execute(); } else {form.reportValidity();}">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|