159 lines
4.1 KiB
HTML
159 lines
4.1 KiB
HTML
**Captcha Component**
|
|
|
|
**HTML**
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<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>Captcha</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="captcha-container relative overflow-hidden">
|
|
<div class="captcha-box bg-white rounded-lg shadow-md p-4">
|
|
<div class="captcha-image">
|
|
<img src="captcha.png" alt="Captcha" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="captcha-code relative">
|
|
<input type="text" class="w-full p-2 text-center text-lg font-bold">
|
|
<div class="captcha-answer relative">
|
|
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
|
|
Validé
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
**CSS (style.css)**
|
|
```css
|
|
/* Font */
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.captcha-container {
|
|
max-width: 500px;
|
|
margin: 50px auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.captcha-box {
|
|
width: 350px;
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.captcha-image {
|
|
aspect-ratio: 1/1;
|
|
width: 100%;
|
|
}
|
|
|
|
.captcha-code {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.captcha-code input {
|
|
outline: none;
|
|
border: none;
|
|
padding: 10px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.captcha-code button {
|
|
outline: none;
|
|
border: none;
|
|
background-color: #4CAF50;
|
|
color: #fff;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.captcha-code button:hover {
|
|
background-color: #3e8e41;
|
|
}
|
|
|
|
/* Animations */
|
|
.key-frames {
|
|
animation-name: keyframes;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
@keyframes keyframes {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(2);
|
|
}
|
|
}
|
|
|
|
.animate-button {
|
|
animation-name: animate-button;
|
|
animation-duration: 1s;
|
|
}
|
|
|
|
@keyframes animate-button {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
```
|
|
|
|
**JS (script.js)**
|
|
```javascript
|
|
// Génération du captcha aleatoire
|
|
function generateCaptcha() {
|
|
const captcha = {
|
|
code: Math.floor(Math.random() * 1000) + 1,
|
|
image: `https://picsum.photos/200/300?random=${Math.floor(Math.random() * 100)}`
|
|
}
|
|
document.querySelector('.captcha-image img').src = captcha.image;
|
|
document.querySelector('.captcha-code input').value = captcha.code;
|
|
}
|
|
|
|
// Ajout d'événements
|
|
document.querySelector('.captcha-answer button').addEventListener('click', () => {
|
|
const userCode = document.querySelector('.captcha-code input').value;
|
|
const code = document.querySelector('.captcha-code input').dataset.code;
|
|
if (userCode === code) {
|
|
document.querySelector('.captcha-answer button').classList.add('animate-button');
|
|
setTimeout(() => {
|
|
document.querySelector('.captcha-answer button').classList.remove('animate-button');
|
|
}, 1000);
|
|
} else {
|
|
alert('Code non valable');
|
|
}
|
|
});
|
|
|
|
// Appel initial de la fonction pour générer le captcha
|
|
generateCaptcha();
|
|
```
|
|
|
|
**Exemple de fonctionnement**
|
|
|
|
* Lorsque la page est chargée, la fonction `generateCaptcha()` est appelée pour générer un captcha aléatoire.
|
|
* Le captcha aléatoire est affiché sur la page, avec un code numérique de 4 chiffres.
|
|
* L'utilisateur peut saisir le code dans le champ input situé sous l'image du captcha.
|
|
* Lorsque le bouton "Validé" est cliqué, la fonction vérifie si le code entré par l'utilisateur correspond au code généré aléatoirement.
|
|
* Si le code est correct, le bouton "Validé" est animé en effectuant une petite rotation (effet "animate-button").
|
|
* Si le code est incorrect, un message d'erreur est affiché à l'utilisateur.
|
|
|
|
Cette solution crée un composant captcha moderne, responsive, avec animations CSS et un design minimaliste. |