Bonjour, je viens de créé un script htlm mais je m'y connais pas du tout je souhaiterai recevoir par mail lorsque quelqu'un clique sur le bouton inscription voici le script:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Journée de Rugby Féminin - OSGL</title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter%3Awght%40400%3B600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
#rugbyCanvas {
background-color: #f0f0f0; /* Un gris très clair pour le fond du canvas */
border: 2px solid #ddd; /* Une bordure subtile */
border-radius: 8px; /* Des bords arrondis pour adoucir l'aspect */
box-shadow: 5px 5px 15px rgba(0,0,0,0.1); /* Une légère ombre pour donner de la profondeur */
margin-bottom: 20px; /* Espacement sous le canvas */
}
.container {
max-width: 800px; /* Augmentation de la largeur maximale pour un meilleur affichage sur grand écran */
margin: 0 auto; /* Centrage de la page */
padding: 20px; /* Ajout dePadding autour du contenu */
background-color: #ffffff; /* Fond blanc pour le conteneur principal */
border-radius: 12px; /* Bords arrondis pour le conteneur */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombre plus douce pour le conteneur */
}
h1 {
color: #4c1d95; /* Une couleur violette riche, assortie au thème предполагаемый */
text-align: center; /* Titre centré */
margin-bottom: 25px; /* Augmentation de l'espacement sous le titre */
font-size: 2.5em; /* Augmentation de la taille de la police du titre */
font-weight: 600; /* Gras pour le titre */
}
p {
color: #555; /* Un gris légèrement plus foncé pour le corps du texte */
line-height: 1.7; /* Amélioration de l'interlignage pour une meilleure lisibilité */
margin-bottom: 20px; /* Augmentation de l'espacement sous les paragraphes */
font-size: 1.1em; /* Augmentation de la taille de la police du texte */
}
#eventInfo {
background-color: #f9f0ff; /* Un fond lavande très clair */
padding: 20px;
border-radius: 12px;
margin-bottom: 25px; /* Augmentation de l'espacement sous la section d'informations sur l'événement */
border: 1px solid #e0d4f5; /* Bordure légèrement plus visible */
}
#eventInfo h2 {
color: #4c1d95; /* Violet foncé */
margin-bottom: 15px;
font-size: 1.8em; /* Augmentation de la taille de la police */
font-weight: 600;
}
#eventInfo ul {
list-style-type: disc; /* Style de liste à puces */
padding-left: 25px; /* Ajout de padding à gauche pour la liste */
color: #555;
font-size: 1.1em;
line-height: 1.7;
}
#registrationForm {
background-color: #f0fdf4; /* Un fond vert très clair */
padding: 25px;
border-radius: 12px;
border: 1px solid #d1fae5;
}
#registrationForm h2 {
color: #15803d; /* Vert foncé */
margin-bottom: 20px;
font-size: 1.8em;
font-weight: 600;
}
#registrationForm form {
display: flex;
flex-direction: column;
gap: 15px; /* Augmentation de l'espacement entre les éléments du formulaire */
}
#registrationForm label {
color: #333; /* Couleur de texte plus foncée pour les labels */
font-weight: 500; /* Légèrement en gras pour les labels */
display: block; /* Assurer que les labels prennent toute la largeur */
margin-bottom: 5px; /* Ajout d'un peu d'espace sous les labels */
font-size: 1.1em;
}
#registrationForm input[type="text"],
#registrationForm input[type="email"],
#registrationForm textarea {
padding: 12px; /* Augmentation du padding à l'intérieur des inputs */
border: 1px solid #ccc; /* Bordure légèrement plus claire */
border-radius: 6px; /* Bords légèrement plus arrondis */
width: 100%; /* Assurer que les inputs prennent toute la largeur de leur conteneur */
box-sizing: border-box; /* Inclure le padding et la bordure dans la largeur et la hauteur totales */
font-size: 1.1em; /* Augmentation de la taille de la police */
transition: border-color 0.3s ease; /* Transition douce pour la couleur de la bordure */
}
#registrationForm input[type="text"]:focus,
#registrationForm input[type="email"]:focus,
#registrationForm textarea:focus {
border-color: #4c1d95; /* Couleur de bordure violette au focus */
outline: none; /* Supprime la bordure d'outline par défaut, généralement moche */
box-shadow: 0 0 5px rgba(76, 29, 149, 0.3); /* Ajoute une légère ombre au focus pour plus de clarté */
}
#registrationForm textarea {
resize: vertical; /* Permet à l'utilisateur de redimensionner verticalement la textarea */
height: 100px; /* Définir une hauteur minimale raisonnable */
}
#registrationForm button {
background-color: #4c1d95; /* Violet */
color: white;
padding: 12px 25px; /* Augmentation du padding du bouton */
border: none;
border-radius: 6px; /* Bords arrondis pour le bouton */
cursor: pointer;
font-size: 1.2em; /* Augmentation de la taille de la police du bouton */
transition: background-color 0.3s ease; /* Transition douce pour la couleur de fond */
font-weight: 600; /* Gras pour le texte du bouton */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Légère ombre pour le bouton */
}
#registrationForm button:hover {
background-color: #6b21a8; /* Un violet légèrement plus foncé au survol */
}
#registrationForm button:disabled {
background-color: #a78bfa; /* Un violet plus clair pour l'état désactivé */
cursor: not-allowed; /* Changer le curseur pour indiquer que le bouton est désactivé */
opacity: 0.7; /* Réduire l'opacité pour indiquer visuellement la désactivation */
box-shadow: none; /* Supprimer l'ombre pour l'état désactivé */
}
#message {
margin-top: 25px; /* Augmentation de la marge au-dessus du message */
padding: 15px;
border-radius: 8px;
text-align: center; /* Centrer le texte du message */
font-size: 1.1em; /* Taille de police plus grande pour le message */
font-weight: 500; /* Message en medium */
}
.success {
background-color: #e6f4e5;
color: #15803d;
border: 1px solid #d1fae5;
}
.error {
background-color: #fee2e2;
color: #b91c1c;
border: 1px solid #fecaca;
}
</style>
</head>
<body class="bg-gray-100"> <div class="container">
<h1>Journée de Rugby Féminin à l'OSGL</h1>
<canvas id="rugbyCanvas" width="800" height="400"></canvas>
<p>
Venez nombreux participer à une journée exceptionnelle dédiée au rugby féminin,
organisée par l'OSGL. Cet événement est une occasion unique de célébrer
la ion, la force et l'esprit d'équipe qui animent le rugby féminin.
Que vous soyez joueuse, rice ou simplement curieuse de découvrir
ce sport, cette journée est faite pour vous !
</p>
<div id="eventInfo">
<h2>Informations sur l'événement</h2>
<ul>
<li><strong>Date :</strong> 31 mai 2025</li>
<li><strong>Lieu :</strong> OSGL (lieu exact à préciser)</li>
<li><strong>Heure :</strong> À partir de 9h00</li>
<li><strong>Activités :</strong>
<ul>
<li>Tournoi amical</li>
<li>Initiation au rugby pour débutantes</li>
<li>Démonstrations et ateliers techniques</li>
<li>Rencontre avec des joueuses professionnelles</li>
<li>Animations et stands partenaires</li>
</ul>
</li>
<li><strong>Restauration :</strong> Buvette et restauration sur place</li>
</ul>
</div>
<div id="registrationForm">
<h2>Inscription</h2>
<form id="inscriptionForm">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Message (optionnel) :</label>
<textarea id="message" name="message"></textarea>
<button type="submit">S'inscrire</button>
</form>
<div id="message" style="display:none;"></div>
</div>
</div>
<script>
const canvas = document.getElementById('rugbyCanvas');
const ctx = canvas.getContext('2d');
function drawRugbyField() {
// Dimensions du terrain (simulées)
const terrainLargeur = canvas.width - 40;
const terrainHauteur = canvas.height - 40;
const xDepart = 20;
const yDepart = 20;
// Couleur de fond du terrain
ctx.fillStyle = '#66bb6a'; // Vert
ctx.fillRect(xDepart, yDepart, terrainLargeur, terrainHauteur);
// Lignes blanches
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 2;
// Ligne médiane
ctx.beginPath();
ctx.moveTo(xDepart + terrainLargeur / 2, yDepart);
ctx.lineTo(xDepart + terrainLargeur / 2, yDepart + terrainHauteur);
ctx.stroke();
// Lignes des 22 mètres
ctx.beginPath();
ctx.moveTo(xDepart + terrainLargeur * 0.22, yDepart);
ctx.lineTo(xDepart + terrainLargeur * 0.22, yDepart + terrainHauteur);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(xDepart + terrainLargeur * 0.78, yDepart);
ctx.lineTo(xDepart + terrainLargeur * 0.78, yDepart + terrainHauteur);
ctx.stroke();
// Buts (approximatifs)
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(xDepart, yDepart + terrainHauteur / 4);
ctx.lineTo(xDepart, yDepart + terrainHauteur * 0.75);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(xDepart + terrainLargeur, yDepart + terrainHauteur / 4);
ctx.lineTo(xDepart + terrainLargeur, yDepart + terrainHauteur * 0.75);
ctx.stroke();
}
drawRugbyField();
const inscriptionForm = document.getElementById('inscriptionForm');
const messageDiv = document.getElementById('message');
inscriptionForm.addEventListener('submit', (event) => {
event.preventDefault();
const nom = document.getElementById('nom').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// Validation simple
if (!nom || !email) {
showMessage('Veuillez remplir tous les champs obligatoires.', 'error');
return;
}
if (!isValidEmail(email)) {
showMessage('Veuillez entrer une adresse email valide.', 'error');
return;
}
// Envoi des données (simulé)
console.log('Données envoyées :');
console.log('Nom :', nom);
console.log('Email :', email);
console.log('Message :', message);
showMessage('Votre inscription a été prise en compte ! Nous vous erons prochainement.', 'success');
inscriptionForm.reset();
});
function showMessage(message, type) {
messageDiv.textContent = message;
messageDiv.className = 'message ' + type;
messageDiv.style.display = 'block';
setTimeout(() => {
messageDiv.style.display = 'none';
}, 5000);
}
function isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
</script>
</body>
</html>
Windows / Edge 134.0.0.0
Afficher la suite
enfaite le but c'est de cree un lien d'invitation a un journée deourverte et lors de l'inscription de la personne ca m'envoi un aml pour me dire ce mail c'est inscrit
As-tu un site dynamique, avec, par exemple, du PHP?