234 lines
4.6 KiB
HTML
234 lines
4.6 KiB
HTML
**Captcha Complet**
|
|
|
|
Dans cet exemple, nous allons créer un composant de captcha complet avec un design moderne, responsive et animations. Le composant sera composé de trois éléments :
|
|
|
|
1. Un cercle contenant le code captcha.
|
|
2. Un bouton pour résoudre le captcha.
|
|
3. Un cadran de progression pour montrer la progression de résolution du captcha.
|
|
|
|
**HTML**
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Captcha</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="bg-base max-w-screen-lg mx-auto mt-10 md:mt-20 p-5 xl:p-10 shadow-base">
|
|
<h1 class="text-3xl font-bold mb-5">Captcha</h1>
|
|
<div class="flex flex-col lg:flex-row justify-between items-center mb-5">
|
|
<div class="captcha-container bg-white rounded-lg p-5 shadow-sm">
|
|
<img class="w-24 h-24 md:w-40 md:h-40 lg:w-64 lg:h-64 xl:w-96 xl:h-96" src="captcha.png">
|
|
<div class="captcha-code flex justify-center items-center h-16">
|
|
<span class="text-3xl font-bold text-teal-500" id="captcha-code"></span>
|
|
</div>
|
|
</div>
|
|
<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded mb-5 lg:mb-0">Résoudre</button>
|
|
</div>
|
|
<div class="progress-container flex justify-between items-center mb-5">
|
|
<div class="progress-bar w-0 bg-orange-500"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
**CSS**
|
|
```css
|
|
/* style.css */
|
|
|
|
.bg-base {
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.max-w-screen-lg {
|
|
max-width: 768px;
|
|
}
|
|
|
|
.mx-auto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.mt-10 {
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.md:mt-20 {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
.p-5 {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.md:p-10 {
|
|
padding: 2.5rem;
|
|
}
|
|
|
|
.xl:p-10 {
|
|
padding: 5rem;
|
|
}
|
|
|
|
.shadow-base {
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.text-3xl {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mb-5 {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.captcha-container {
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.captcha-container img {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.captcha-code {
|
|
position: relative;
|
|
top: -20px;
|
|
left: -10px;
|
|
}
|
|
|
|
.text-teal-500 {
|
|
color: #00987d;
|
|
}
|
|
|
|
.progress-container {
|
|
background-color: #f7f7f7;
|
|
padding: 1rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 10px;
|
|
background-color: #f7f7f7;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.bg-orange-500 {
|
|
background-color: #ff8c64;
|
|
transition: width 0.5s ease-in-out;
|
|
}
|
|
|
|
.progress-bar {
|
|
animation: prog 2s;
|
|
}
|
|
|
|
@keyframes prog {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.hover:bg-orange-700 {
|
|
background-color: #ff8c64;
|
|
}
|
|
|
|
.text-white {
|
|
color: #fff;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.py-2 {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.px-4 {
|
|
padding-left: 1.25rem;
|
|
padding-right: 1.25rem;
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.bg-orange-500 {
|
|
background-color: #ff8c64;
|
|
transition: background-color 0.5s ease-in-out;
|
|
}
|
|
```
|
|
|
|
**JS**
|
|
```javascript
|
|
// script.js
|
|
|
|
const captchaCode = document.getElementById('captcha-code');
|
|
const captchaContainer = document.querySelector('.captcha-container');
|
|
const solveButton = document.querySelector('button');
|
|
const progressContainer = document.querySelector('.progress-container');
|
|
const progressBar = document.querySelector('.progress-bar');
|
|
|
|
let captchaCodeAnswer = '';
|
|
let progress = 0;
|
|
|
|
function createCaptcha() {
|
|
captchaCodeAnswer = '';
|
|
for (let i = 0; i < 6; i++) {
|
|
captchaCodeAnswer += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
|
|
}
|
|
captchaCode.textContent = captchaCodeAnswer;
|
|
}
|
|
|
|
function generateProgress() {
|
|
progress = Math.floor(Math.random() * 100);
|
|
progressBar.style.width = progress + '%';
|
|
}
|
|
|
|
createCaptcha();
|
|
generateProgress();
|
|
|
|
solveButton.addEventListener('click', () => {
|
|
if (captchaCode.textContent === captchaCodeAnswer) {
|
|
progress = 100;
|
|
progressBar.style.width = progress + '%';
|
|
console.log('Correct answer!');
|
|
} else {
|
|
console.log('Wrong answer!');
|
|
}
|
|
});
|
|
|
|
setInterval(() => {
|
|
generateProgress();
|
|
}, 1000);
|
|
```
|
|
|
|
Notez que l'exemple utilise la fonction `setInterval` pour générer progressivement la progression du captcha. Vous pouvez ajuster le temps et la plage de progression selon votre besoins. |