Code HTML
###########################################################################
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0">
<title>Formulaire de Randonnée</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-top: 15px;
}
input,
select,
textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
margin-right: 10px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#resultat {
margin-top: 20px;
padding: 15px;
background-color: #f8f9fa;
border: 1px solid #ddd;
text-align: left;
white-space: pre-wrap;
}
.niveau {
font-weight: bold;
color: #0056b3;
}textarea {
resize: none;
}
</style>
</head>
<body>
<h1>Formulaire de Randonnée</h1>
<label for="nom">Nom de la randonnée :</label>
<input type="text" maxlength="100" placeholder="Entrez le nom de la randonnée">
<label for="date">Date de la randonnée :</label>
<input type="date" onchange="afficherJour()">
<label>Jour de la semaine : <span></span></label>
<hr>
<h2>Parking</h2>
<label for="lieu"></label>
<input type="text" maxlength="100"value="Parking Henri Dunant Ave Denis Pauleau Chateaurenard">
<p hidden>
<label for="bloc"></label>
<input type="text" maxlength="100"value="Les paramètres de la randonnée sont donnés à titre indicatif uniquement et n'engage pas la responsabilité de la personne organisant la randonnée. -
Inscription auprès de l'organisateur jeudi avant 19h par SMS. -
L'animateur se réserve le droit de modifier le circuit. -
ÉQUIPEMENT: Les chaussures de randonnée montantes et bâtons de marche sont obligatoires. Prévoir des vêtements de protection (vent, pluie, froid), sac à dos avec pique-nique et de l'eau en quantité suffisante, sa propre pharmacie
"
>
</p>
<label for="heure-rv">Heure de rendez-vous :</label>
<input type="time" onchange="calculerHeureDepart()">
<label>Heure de départ prévue : <span></span></label>
<label for="description">Description du Trajet :</label>
<textarea rows="4" maxlength="200"></textarea>
<label for="parking-depart">Parking de départ :</label>
<input type="text" maxlength="100">
<hr>
<h2>Coûts</h2>
<label for="trajet-km">Distance en km :</label>
<input type="number" oninput="calculerCouts()">
<label for="cout-autoroute">Coût de l'autoroute (€) :</label>
<input type="number" oninput="calculerCouts()">
<p>Total trajet : <span>0</span> €</p>
<p>Coût total : <span>0</span> €</p>
<p>Coût covoiturage (par 4) : <span>0</span> €</p>
<p>Coût covoiturage (par 5) : <span>0</span> €</p>
<hr>
<h2>Informations techniques</h2>
<label for="km">Kilométrage de la randonnée :</label>
<input type="number">
<label for="denivele">Dénivelé (mètres) :</label>
<input type="number">
<label for="duree">Durée totale (HH:MM) :</label>
<input type="time">
<label for="ibp">IBP :</label>
<input type="number" oninput="afficherIBP()">
<p>Effort (IBP) : <span>N/A</span></p>
<label for="technicite">Technicité (1-5) :</label>
<input type="number" oninput="afficherDifficulte('technicite', 'technicite-label')" min="1" max="5">
<p>Technicité : <span>N/A</span></p><label for="risque">Risque (1-5) :</label>
<input type="number" oninput="afficherRisque('risque', 'risque-label')" min="1" max="5">
<p>Risque : <span>N/A</span></p><label for="remarques">Remarques :</label>
<textarea rows="4" maxlength="200"></textarea>
<hr>
<h2>Organisateur</h2>
<label for="organisateur">Choisissez un organisateur :</label>
<select onchange="afficherOrganisateur()">
<option value="">-- Sélectionnez --</option>
<option value="ALEZINA 06 03 18 76 16">ALEZINA 06 03 18 76 16</option>
<option value="ALLIGIER 06 26 01 70 98">ALLIGIER 06 26 01 70 98</option>
<option value="BIZARD 06 88 00 15 85">BIZARD 06 88 00 15 85</option>
<option value="BRIOUDE 06 84 53 70 30">BRIOUDE 06 84 53 70 30</option>
<option value="BRUN 06 82 48 72 61">BRUN 06 82 48 72 61</option>
<option value="CIBRARIO 07 81 69 66 16">CIBRARIO 07 81 69 66 16</option>
<option value="DUPRÉ 06 52 88 26 57">DUPRÉ 06 52 88 26 57</option>
<option value="DUVERNE 06 29 12 33 65">DUVERNE 06 29 12 33 65</option>
<option value="ELISSALDE 06 77 91 03 61">ELISSALDE 06 77 91 03 61</option>
<option value="GRANDPERRIN 06 24 75 90 59">GRANDPERRIN 06 24 75 90 59</option>
<option value="GRANGE 06 21 56 59 70">GRANGE 06 21 56 59 70</option>
<option value="JOUVE 06 74 49 96 90">JOUVE 06 74 49 96 90</option>
<option value="MARTIN 06 08 23 62 85">MARTIN 06 08 23 62 85</option>
<option value="NOUGUIER 06 87 39 93 86">NOUGUIER 06 87 39 93 86</option>
<option value="PALLIER 06 87 92 53 80">PALLIER 06 87 92 53 80</option>
<option value="POMMER 06 62 17 63 49">POMMER 06 62 17 63 49</option>
<option value="RAYNAL 06 80 94 09 42">RAYNAL 06 80 94 09 42</option>
<option value="REYNIER 06 13 09 29 14">REYNIER 06 13 09 29 14</option>
<option value="TAUSSIG 06 20 42 54 33">TAUSSIG 06 20 42 54 33</option>
<option value="VALDARCHI 06 25 70 49 05">VALDARCHI 06 25 70 49 05</option>
<!-- Liste complète des organisateurs -->
</select>
<p>Organisateur : <span>N/A</span></p>
<ul>
<li>Les paramètres de la randonnée sont donnés à titre indicatif uniquement et n'engage pas la responsabilité de la personne organisant la randonnée.</li>
<li>Inscription auprès de l'organisateur <b> jeudi avant 19h par SMS.</b></li>
<li>L'animateur se réserve le droit de modifier le circuit.</li>
<li><b>ÉQUIPEMENT:</b> Les chaussures de randonnée montantes et bâtons de marche sont obligatoires. Prévoir des vêtements de protection (vent, pluie, froid), sac à dos avec pique-nique et de l'eau en quantité suffisante, sa propre pharmacie</li>
</ul><button onclick="genererTexte()">Générer le résumé</button>
<button onclick="envoyerEmail()">Envoyer par email</button>
<div></div>
<script>
function afficherJour() {
const date = document.getElementById("date").value;
if (date) {
const jour = new Date(date).toLocaleDateString('fr-FR', { weekday: 'long' });
document.getElementById("jour-semaine").textContent = jour.charAt(0).toUpperCase() + jour.slice(1);
}
}
function calculerHeureDepart() {
const heureRV = document.getElementById("heure-rv").value;
if (heureRV) {
const [hours, minutes] = heureRV.split(":").map(Number);
const date = new Date();
date.setHours(hours, minutes + 15);
const heureDepart = date.toTimeString().substring(0, 5);
document.getElementById("heure-depart").textContent = heureDepart;
}
}
function calculerCouts() {
const km = parseFloat(document.getElementById("trajet-km").value) || 0;
const autoroute = parseFloat(document.getElementById("cout-autoroute").value) || 0;
const totalTrajet = km * 0.3;
const coutTotal = totalTrajet + autoroute;
document.getElementById("total-trajet").textContent = totalTrajet.toFixed(2);
document.getElementById("cout-total").textContent = coutTotal.toFixed(2);
document.getElementById("covoit4").textContent = (coutTotal / 4).toFixed(2);
document.getElementById("covoit5").textContent = (coutTotal / 5).toFixed(2);
}
function afficherIBP() {
const ibp = parseInt(document.getElementById("ibp").value) || 0;
const effort = document.getElementById("effort");
if (ibp < 25) effort.textContent = "Facile";
else if (ibp <= 50) effort.textContent = "Assez Facile";
else if (ibp <= 75) effort.textContent = "Peu Difficile";
else if (ibp <= 100) effort.textContent = "Assez Difficile";
else effort.textContent = "Difficile";
}
function afficherDifficulte(id, label) {
const niveaux = ["Facile", "Assez Facile", "Peu Difficile", "Assez Difficile", "Difficile"];
const value = document.getElementById(id).value;
document.getElementById(label).textContent = niveaux[value - 1] || "N/A";
}
function afficherRisque(id, label) {
const niveaux = ["Faible", "Assez Faible", "Peu Élevé", "Assez Élevé", "Élevé"];
const value = document.getElementById(id).value;
document.getElementById(label).textContent = niveaux[value - 1] || "N/A";
}
function afficherOrganisateur() {
const organisateur = document.getElementById("organisateur").value;
document.getElementById("organisateur-label").textContent = organisateur;
}
function genererTexte() {
const lieu = document.getElementById("nom").value || "N/A";
const date = document.getElementById("date").value || "N/A";
const dateFormatted = new Date(date).toLocaleDateString("fr-FR");
const lieuRV = document.getElementById("lieu").value || "N/A";
const blocK = document.getElementById("bloc").value || "N/A";
const heureRV = document.getElementById("heure-rv").value || "N/A";
const heureDepart = document.getElementById("heure-depart").textContent || "N/A";
const description = document.getElementById("description").value || "N/A";
const parkingDepart = document.getElementById("parking-depart").value || "N/A";
const totalTrajet = document.getElementById("total-trajet").textContent || "0";
const coutAutoroute = document.getElementById("cout-autoroute").value || "0";
const coutTotal = document.getElementById("cout-total").textContent || "0";
const covoit4 = document.getElementById("covoit4").textContent || "0";
const covoit5 = document.getElementById("covoit5").textContent || "0";
const km = document.getElementById("km").value || "0";
const denivele = document.getElementById("denivele").value || "0";
const duree = document.getElementById("duree").value || "N/A";
const ibp = document.getElementById("ibp").value || "0";
const effort = document.getElementById("effort").textContent || "N/A";
const technicite = document.getElementById("technicite-label").textContent || "N/A";
const techniciteValeur = document.getElementById("technicite").value || "0";
const risque = document.getElementById("risque-label").textContent || "N/A";
const risqueValeur = document.getElementById("risque").value || "0";
const remarques = document.getElementById("remarques").value || "N/A";
const organisateur = document.getElementById("organisateur-label").textContent || "N/A";
const resume = `
Nom de la rando : ${lieu}
Date de la randonnée :${dateFormatted}
Lieu de rendez-vous : ${lieuRV}
Heure de rendez-vous : ${heureRV}
Heure de Départ : ${heureDepart}
Description : ${description}
Parking de Départ de la randonnée : ${parkingDepart}
Coût du Trajet : ${totalTrajet} €
Coût de l'Autoroute : ${coutAutoroute} €
Coût Trajet Total : ${coutTotal} €
Covoiturage (par 4) : ${covoit4} €
Covoiturage (par 5) : ${covoit5} €
Kilométrage Randonnée : ${km} km
Dénivelé : ${denivele} m
Durée : ${duree}
IBP : ${ibp}
E: ${effort}, T: ${techniciteValeur} (${technicite}), R : ${risqueValeur} (${risque})
Remarques : ${remarques}
Nom Organisateur : ${organisateur}
${blocK}
`;
document.getElementById("resultat").textContent = resume;
}
function envoyerEmail() {
const resume = document.getElementById("resultat").textContent;
const sujet = encodeURIComponent("Feuille de route");
const body = encodeURIComponent(resume);
wnd.fe.Location.href = `mailto:contact@lamarmottechateaurenard.com?subject=${sujet}&body=${body}`;
}
</script>
</body>
</html>
j'ai copié ton fichier excel dans un fichier word que j'ai ensuite collé . on perd la gestion des colonnes
MERCREDI
23/10/2024
Lieu :
PARKING DÉPART:
HENRI DUNANT Avenue Denis Pauleau · Châteaurenard (près des Arènes).
Heure RV
Heure Départ
Trajet :
Parking :
KM AR :
PÉAGE AUTOROUTE €
- €
TOTAL COVOITURAGE
€ 0,00
Par Personne/4 :
€ 0,00
Par Personne/5 :
€ 0,00
Données techniques de la randonnée:
Distance
Dénivelé
Durée
IBP HKG :
Effort :
Technique :
Risque :
Remarques :
L'animateur se réserve le droit de modifier le circuit
Organisateur / Tél :
********************************************************************************************************
Inscription auprès de l'organisateur avant 19h par SMS de préférence.
###########################################################################
Votre titre
Voici la place pour votre texte. Cliquez ici et commencez à taper. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem.