- 👋 Hi, I’m @BAHATI44
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Inscription BuloMED">
<meta name="keywords" content="inscription, BuloMED, santé">
<meta name="author" content="Salomo B.M">
<title>Inscription BuloMED</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
<link rel="icon" type="image/png" sizes="32x32" href="BuloMED.PNG">
<!-- Sécurité supplémentaire -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https: 'unsafe-inline' 'unsafe-eval';">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-Frame-Options" content="DENY">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-wrapper {
position: relative;
padding: 5px;
border-radius: 15px;
background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff, #ff00ff, #ffff00);
background-size: 200% 200%;
animation: gradientAnimation 3s ease infinite;
display: flex;
}
/* Exemple de media queries pour petits Ă©crans */
@media (max-width: 600px) {
.form-container {
width: 90%;
/* Utiliser une largeur en pourcentage pour s'adapter */
max-width: none;
/* Supprimer la limite fixe */
padding: 10px;
/* Réduire les espaces si nécessaire */
}
.form-group input {
width: 100%;
/* Assurer que les inputs prennent toute la largeur disponible */
font-size: 1rem;
/* Ajuster la taille de police pour plus de lisibilité */
}
.button-container {
flex-direction: column;
/* Sur petits Ă©crans, empiler les boutons */
gap: 5px;
}
}
/* Optionnel : règles pour les écrans moyens */
@media (min-width: 601px) and (max-width: 1024px) {
.form-container {
width: 80%;
padding: 12px;
}
.form-group input {
font-size: 1.1rem;
}
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.form-container {
background-color: #7b7c7c;
padding: 15px;
border-radius: 8px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 350px;
position: relative;
z-index: 1;
}
.form-container h2 {
text-align: center;
margin-bottom: 25px;
color: #fff;
}
.form-group {
margin-bottom: 15px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 95%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 8px;
}
.password-toggle {
position: absolute;
right: 10px;
top: 35px;
cursor: pointer;
}
.loading-spinner {
display: none;
border: 3px solid #f3f3f3;
border-top: 3px solid #4CAF50;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Nouveau style pour aligner les boutons cĂ´te Ă cĂ´te */
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
}
.button-container button {
flex: 1;
}
/* Style du popup de succès */
.success-popup {
display: none;
position: fixed;
top: 20px;
right: 20px;
background-color: #4CAF50;
color: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
</style>
</head>
<body>
<div class="form-wrapper">
<div class="form-container">
<h2>Inscription</h2>
<form id="registrationForm">
<div class="form-group">
<label for="username">Nom d'utilisateur</label>
<input type="text" id="username" name="username" maxlength="50" placeholder="Saisir le nom D'utilisateur" required>
<div class="error" id="usernameError"></div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="50" placeholder="Saisir l'Email" required>
<div class="error" id="emailError"></div>
</div>
<div class="form-group">
<label for="password">Mot de passe</label>
<input type="password" id="password" name="password" maxlength="50" placeholder="Saisir Votre Mot de Passe" required>
<i class="fa fa-eye password-toggle" id="togglePassword"></i>
<div class="password-strength" id="passwordStrength"></div>
<div class="error" id="passwordError"></div>
</div>
<div class="form-group">
<label for="phone">Numéro de téléphone</label>
<input type="tel" id="phone" name="phone" maxlength="13" required>
<div class="error" id="phoneError"></div>
</div>
<!-- Conteneur pour les deux boutons -->
<div class="button-container">
<button type="submit">
<span class="button-text">S'inscrire</span>
<div class="loading-spinner"></div>
</button>
<button type="button" id="loginButton">Se connecter</button>
</div>
</form>
</div>
</div>
<!-- Popup de succès -->
<div id="successPopup" class="success-popup">Connexion réussie !</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
// Empêcher le clic droit pour bloquer l'accès au menu contextuel
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
// Bloquer les raccourcis clavier (Ctrl+Shift+I, Ctrl+U, F12, etc.)
document.addEventListener('keydown', function(e) {
if (e.ctrlKey || e.keyCode === 123 || e.keyCode === 85) {
e.preventDefault();
return false;
}
});
// Détection des outils de développement
setInterval(function() {
if (window.outerWidth - window.innerWidth > 100 ||
window.outerHeight - window.innerHeight > 100) {
window.location.href = "about:blank";
}
}, 1000);
// Empêcher la sélection de texte
document.body.style.userSelect = 'none';
document.body.style.webkitUserSelect = 'none';
// Initialisation des éléments du formulaire
document.addEventListener('DOMContentLoaded', function() {
const phoneInput = document.getElementById('phone');
const passwordInput = document.getElementById('password');
const passwordStrength = document.getElementById('passwordStrength');
const togglePassword = document.getElementById('togglePassword');
const form = document.getElementById('registrationForm');
const loginButton = document.getElementById('loginButton');
const successPopup = document.getElementById('successPopup');
// Initialisation du sélecteur de numéro de téléphone
if (window.intlTelInput) {
const iti = window.intlTelInput(phoneInput, {
initialCountry: "auto",
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});
} else {
console.error("intlTelInput library is not loaded correctly.");
}
// VĂ©rification de la force du mot de passe
passwordInput.addEventListener('input', function() {
const hasMixedCase = /(?=.*[a-z])(?=.*[A-Z])/.test(this.value);
const hasNumbers = /\d/.test(this.value);
const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(this.value);
if (hasMixedCase && hasNumbers && hasSpecial) {
passwordStrength.className = 'password-strength strong';
} else if ((hasMixedCase && hasNumbers) || (hasNumbers && hasSpecial)) {
passwordStrength.className = 'password-strength medium';
} else {
passwordStrength.className = 'password-strength weak';
}
});
// Basculer la visibilité du mot de passe
togglePassword.addEventListener('click', function() {
const type = passwordInput.type === 'password' ? 'text' : 'password';
passwordInput.type = type;
this.classList.toggle('fa-eye-slash');
});
// Gestion de la soumission du formulaire
form.addEventListener('submit', function(event) {
event.preventDefault();
const button = form.querySelector('button[type="submit"]');
button.disabled = true;
button.querySelector('.loading-spinner').style.display = 'inline-block';
button.querySelector('.button-text').textContent = 'Traitement...';
// Simuler un traitement de 1,5 seconde
setTimeout(() => {
button.querySelector('.loading-spinner').style.display = 'none';
button.disabled = false;
button.querySelector('.button-text').textContent = 'S\'inscrire';
// Afficher le popup de succès
successPopup.style.display = 'block';
setTimeout(() => {
successPopup.style.display = 'none';
}, 3000);
// Redirection vers la page d'accueil après 3 secondes
setTimeout(() => {
window.location.href = 'accueil.html';
}, 3000);
}, 1500);
});
// Navigation vers la page de connexion
loginButton.addEventListener('click', function() {
window.location.href = 'connexion.html';
});
});
</script>
</body>
</html>