125 lines
4.6 KiB
HTML
Executable File
125 lines
4.6 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Document</title>
|
|
|
|
<style>
|
|
|
|
canvas {
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<div class="container mt-5">
|
|
|
|
<div class="row justify-content-center">
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
|
|
|
<form id="captcha-form" method="post" action="" class="mb-3">
|
|
|
|
<div class="mb-3">
|
|
|
|
<label for="name" class="form-label">Name</label>
|
|
|
|
<input type="text" class="form-control" id="name" name="name" required>
|
|
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
|
|
<label for="email" class="form-label">Email</label>
|
|
|
|
<input type="email" class="form-control" id="email" name="email" required>
|
|
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
|
|
<label for="message" class="form-label">Message</label>
|
|
|
|
<textarea class="form-control" id="message" name="message" required></textarea>
|
|
|
|
</div>
|
|
|
|
<div class="mb-3 d-flex align-items-center">
|
|
|
|
<canvas id="captcha" width="200" height="80"></canvas>
|
|
|
|
<button type="button" class="btn btn-secondary" id="refresh-captcha">
|
|
|
|
<i class="fa fa-refresh"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mb-3">
|
|
|
|
<label for="captcha-input" class="form-label">Enter Captcha</label>
|
|
|
|
<input type="text" class="form-control" id="captcha-input" required>
|
|
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
|
|
<script src="./js/jquery-3.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
$(document).ready(function () {
|
|
|
|
// Generate captcha on page load
|
|
|
|
generateCaptcha();
|
|
|
|
// Handle captcha refresh button click
|
|
|
|
$("#refresh-captcha").click(function () {
|
|
|
|
generateCaptcha();
|
|
|
|
$("#captcha-input").val("");
|
|
|
|
});
|
|
|
|
// Handle form submit
|
|
|
|
$("#captcha-form").submit(function (event) {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
// Validate captcha
|
|
|
|
var captchaInput = $("#captcha-input").val();
|
|
|
|
var captchaCode = sessionStorage.getItem("captchaCode");
|
|
|
|
if (captchaInput != captchaCode) {
|
|
|
|
alert("Invalid captcha code. Please try again.");
|
|
|
|
generateCaptcha();
|
|
|
|
$("#captcha-input").val("");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// Form validation successful, submit form
|
|
|
|
alert("Form submitted successfully.");
|
|
|
|
$("#captcha-form").trigger("reset");
|
|
|
|
generateCaptcha();
|
|
|
|
});
|
|
|
|
|
|
|
|
// Define the function generateCaptcha()
|
|
|
|
function generateCaptcha() {
|
|
|
|
// Get the canvas element with ID captcha and create an instance of its canvas rendering context
|
|
|
|
var a = $("#captcha")[0],
|
|
|
|
b = a.getContext("2d");
|
|
|
|
// Clear the canvas
|
|
|
|
b.clearRect(0, 0, a.width, a.height);
|
|
|
|
// Define the string of characters that can be included in the captcha
|
|
|
|
var f = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
|
|
|
|
e = "",
|
|
|
|
g = -45,
|
|
|
|
h = 45,
|
|
|
|
i = h - g,
|
|
|
|
j = 20,
|
|
|
|
k = 30,
|
|
|
|
l = k - j;
|
|
|
|
// Generate each character of the captcha
|
|
|
|
for (var m = 0; m < 6; m++) {
|
|
|
|
// Select random letter from the pool to be part of the captcha
|
|
|
|
var n = f.charAt(Math.floor(Math.random() * f.length));
|
|
|
|
e += n;
|
|
|
|
|
|
|
|
// Set up the text formatting
|
|
|
|
b.font = j + Math.random() * l + "px Arial";
|
|
|
|
b.textAlign = "center";
|
|
|
|
b.textBaseline = "middle";
|
|
|
|
|
|
|
|
// Set the color of the text
|
|
|
|
b.fillStyle = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
|
|
|
|
|
|
|
|
// Add the character to the canvas
|
|
|
|
var o = g + Math.random() * i;
|
|
|
|
b.translate(20 + m * 30, a.height / 2);
|
|
|
|
b.rotate(o * Math.PI / 180);
|
|
|
|
b.fillText(n, 0, 0);
|
|
|
|
b.rotate(-1 * o * Math.PI / 180);
|
|
|
|
b.translate(-(20 + m * 30), -1 * a.height / 2);
|
|
|
|
}
|
|
|
|
// Set the captcha code in session storage
|
|
|
|
sessionStorage.setItem("captchaCode", e);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
</script> |