Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ajout d'un nouvel archer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .required:after { | |
| content: " *"; | |
| color: #ef4444; | |
| } | |
| input[type="date"]::-webkit-calendar-picker-indicator { | |
| filter: invert(0.5); | |
| } | |
| .file-input-label { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| border: 2px dashed #e5e7eb; | |
| background-color: #f9fafb; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .file-input-label:hover { | |
| border-color: #9ca3af; | |
| background-color: #f3f4f6; | |
| } | |
| .form-section { | |
| background-color: white; | |
| border-radius: 0.75rem; | |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); | |
| overflow: hidden; | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-section-header { | |
| background-color: #f9fafb; | |
| padding: 1rem 1.5rem; | |
| border-bottom: 1px solid #e5e7eb; | |
| } | |
| .form-section-content { | |
| padding: 1.5rem; | |
| } | |
| .input-field { | |
| transition: all 0.2s; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .input-field:focus { | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .select-field { | |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); | |
| background-position: right 0.5rem center; | |
| background-repeat: no-repeat; | |
| background-size: 1.5em 1.5em; | |
| -webkit-print-color-adjust: exact; | |
| print-color-adjust: exact; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-5xl"> | |
| <!-- Header --> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-900"> | |
| <i class="fas fa-user-plus text-primary-600 mr-3"></i>Nouvel archer | |
| </h1> | |
| <p class="text-gray-600 mt-1">Remplissez le formulaire pour enregistrer un nouvel archer dans le club</p> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="flex items-center bg-primary-50 rounded-lg px-4 py-2 border border-primary-100"> | |
| <i class="fas fa-info-circle text-primary-600 mr-2"></i> | |
| <span class="text-sm text-primary-800">Tous les champs marqués d'un * sont obligatoires</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Form --> | |
| <form class="space-y-6"> | |
| <!-- Informations personnelles --> | |
| <div class="form-section"> | |
| <div class="form-section-header"> | |
| <h2 class="text-lg font-semibold text-gray-900 flex items-center"> | |
| <i class="fas fa-id-card text-primary-500 mr-3"></i>Informations personnelles | |
| </h2> | |
| </div> | |
| <div class="form-section-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="lastname" class="block text-sm font-medium text-gray-700 mb-1 required">Nom</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| <input type="text" id="lastname" name="lastname" required | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none" | |
| oninput="this.value = this.value.toUpperCase()"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="firstname" class="block text-sm font-medium text-gray-700 mb-1 required">Prénom</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-signature text-gray-400"></i> | |
| </div> | |
| <input type="text" id="firstname" name="firstname" required | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none" | |
| oninput="this.value = this.value.toUpperCase()"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="birthdate" class="block text-sm font-medium text-gray-700 mb-1 required">Date de naissance</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-calendar-day text-gray-400"></i> | |
| </div> | |
| <input type="date" id="birthdate" name="birthdate" required | |
| class="pl-10 pr-16 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none" | |
| pattern="\d{4}-\d{2}-\d{2}" | |
| oninput="this.value = this.value.replace(/[^0-9-]/g, '').slice(0, 10);"> | |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> | |
| <span id="age-display" class="text-sm text-gray-500 bg-white pl-2 pr-1 rounded">ans</span> | |
| </div> | |
| </div> | |
| <div id="age-warning" class="hidden mt-1 text-xs text-red-600 flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-1"></i> | |
| <span>L'archer a moins de 11 ans</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Adresse et contact --> | |
| <div class="form-section"> | |
| <div class="form-section-header"> | |
| <h2 class="text-lg font-semibold text-gray-900 flex items-center"> | |
| <i class="fas fa-address-book text-primary-500 mr-3"></i>Adresse et contact | |
| </h2> | |
| </div> | |
| <div class="form-section-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="md:col-span-2"> | |
| <label for="address" class="block text-sm font-medium text-gray-700 mb-1 required">Adresse</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-map-marker-alt text-gray-400"></i> | |
| </div> | |
| <input type="text" id="address" name="address" required | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none" | |
| oninput="this.value = this.value.toUpperCase()"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="postal-code" class="block text-sm font-medium text-gray-700 mb-1 required">Code postal</label> | |
| <input type="text" id="postal-code" name="postal-code" required | |
| class="input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| </div> | |
| <div> | |
| <label for="city" class="block text-sm font-medium text-gray-700 mb-1 required">Ville</label> | |
| <input type="text" id="city" name="city" required list="city-list" | |
| class="input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none" | |
| oninput="this.value = this.value.toUpperCase()"> | |
| <datalist id="city-list"></datalist> | |
| </div> | |
| <div> | |
| <label for="department" class="block text-sm font-medium text-gray-700 mb-1">Département</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-map-marked-alt text-gray-400"></i> | |
| </div> | |
| <input type="text" id="department" name="department" readonly | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 bg-gray-50 focus:outline-none"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="region" class="block text-sm font-medium text-gray-700 mb-1">Région</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-globe-europe text-gray-400"></i> | |
| </div> | |
| <input type="text" id="region" name="region" readonly | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 bg-gray-50 focus:outline-none"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone fixe</label> | |
| <div class="flex"> | |
| <div class="relative flex-grow"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-phone text-gray-400"></i> | |
| </div> | |
| <input type="text" id="phone" name="phone" maxlength="10" | |
| class="pl-10 input-field block w-full rounded-l-lg rounded-r-none py-2.5 px-3 focus:outline-none"> | |
| </div> | |
| <div class="bg-gray-50 px-3 py-2 rounded-r-lg border border-l-0 border-gray-300 flex items-center"> | |
| <input type="checkbox" id="red-list" name="red-list" class="h-4 w-4 text-primary-600 focus:ring-primary-500"> | |
| <label for="red-list" class="ml-2 text-sm text-gray-700">Liste rouge</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="mobile" class="block text-sm font-medium text-gray-700 mb-1">Mobile</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-mobile-alt text-gray-400"></i> | |
| </div> | |
| <input type="text" id="mobile" name="mobile" maxlength="10" | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| </div> | |
| <div class="mt-2 flex items-center"> | |
| <input type="checkbox" id="whatsapp" name="whatsapp" class="h-4 w-4 text-primary-600 focus:ring-primary-500"> | |
| <label for="whatsapp" class="ml-2 text-sm text-gray-700">M'intégrer au groupe WhatsApp</label> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1 required">Courriel</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-envelope text-gray-400"></i> | |
| </div> | |
| <input type="email" id="email" name="email" required | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="newsletter" name="newsletter" class="h-4 w-4 text-primary-600 focus:ring-primary-500"> | |
| <label for="newsletter" class="ml-2 text-sm text-gray-700">Me tenir au courant par Courriel</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Caractéristiques physiques --> | |
| <div class="form-section"> | |
| <div class="form-section-header"> | |
| <h2 class="text-lg font-semibold text-gray-900 flex items-center"> | |
| <i class="fas fa-ruler-combined text-primary-500 mr-3"></i>Caractéristiques physiques | |
| </h2> | |
| </div> | |
| <div class="form-section-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div> | |
| <label for="dominant-eye" class="block text-sm font-medium text-gray-700 mb-1 required">Œil directeur</label> | |
| <select id="dominant-eye" name="dominant-eye" required | |
| class="select-field input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| <option value="">Sélectionner</option> | |
| <option value="right">Droit</option> | |
| <option value="left">Gauche</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="hand" class="block text-sm font-medium text-gray-700 mb-1 required">Main</label> | |
| <select id="hand" name="hand" required | |
| class="select-field input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| <option value="">Sélectionner</option> | |
| <option value="right">Droitier</option> | |
| <option value="left">Gaucher</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="height" class="block text-sm font-medium text-gray-700 mb-1">Taille (en cm)</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-ruler-vertical text-gray-400"></i> | |
| </div> | |
| <input type="number" id="height" name="height" min="100" max="250" | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="wingspan" class="block text-sm font-medium text-gray-700 mb-1">Envergure (en cm)</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-arrows-alt-h text-gray-400"></i> | |
| </div> | |
| <input type="number" id="wingspan" name="wingspan" min="100" max="250" | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="category" class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label> | |
| <select id="category" name="category" | |
| class="select-field input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| <option value="">Sélectionner</option> | |
| <option value="poussin">Poussin</option> | |
| <option value="benjamin">Benjamin</option> | |
| <option value="minime">Minime</option> | |
| <option value="cadet">Cadet</option> | |
| <option value="junior">Junior</option> | |
| <option value="senior">Senior</option> | |
| <option value="veteran">Vétéran</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Matériel --> | |
| <div class="form-section"> | |
| <div class="form-section-header"> | |
| <h2 class="text-lg font-semibold text-gray-900 flex items-center"> | |
| <i class="fas fa-bow-arrow text-primary-500 mr-3"></i>Matériel | |
| </h2> | |
| </div> | |
| <div class="form-section-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="bow-size" class="block text-sm font-medium text-gray-700 mb-1">Taille de l'arc théorique</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-ruler text-gray-400"></i> | |
| </div> | |
| <input type="text" id="bow-size" name="bow-size" | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="bow-power" class="block text-sm font-medium text-gray-700 mb-1">Puissance de l'arc théorique</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-bolt text-gray-400"></i> | |
| </div> | |
| <input type="text" id="bow-power" name="bow-power" | |
| class="pl-10 input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="borrowed-arrows" class="block text-sm font-medium text-gray-700 mb-1">Flèches prêtées</label> | |
| <select id="borrowed-arrows" name="borrowed-arrows" | |
| class="select-field input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| <option value="no">Non</option> | |
| <option value="yes">Oui</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="club-bow" class="block text-sm font-medium text-gray-700 mb-1">Arc associé</label> | |
| <select id="club-bow" name="club-bow" | |
| class="select-field input-field block w-full rounded-lg py-2.5 px-3 focus:outline-none"> | |
| <option value="no">Non</option> | |
| <option value="yes">Oui</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Documents --> | |
| <div class="form-section"> | |
| <div class="form-section-header"> | |
| <h2 class="text-lg font-semibold text-gray-900 flex items-center"> | |
| <i class="fas fa-file-alt text-primary-500 mr-3"></i>Documents | |
| </h2> | |
| </div> | |
| <div class="form-section-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Certificat médical</label> | |
| <label for="medical-certificate" class="file-input-label mt-1"> | |
| <i class="fas fa-upload mr-3 text-gray-500"></i> | |
| <span id="medical-certificate-text" class="text-sm text-gray-600">Téléverser le certificat</span> | |
| <input type="file" id="medical-certificate" name="medical-certificate" class="hidden" accept=".pdf,.jpg,.jpeg,.png"> | |
| </label> | |
| <p class="mt-1 text-xs text-gray-500">Formats acceptés: PDF, JPG, PNG</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Questionnaire FFTA</label> | |
| <label for="ffta-questionnaire" class="file-input-label mt-1"> | |
| <i class="fas fa-upload mr-3 text-gray-500"></i> | |
| <span id="ffta-questionnaire-text" class="text-sm text-gray-600">Téléverser le questionnaire</span> | |
| <input type="file" id="ffta-questionnaire" name="ffta-questionnaire" class="hidden" accept=".pdf,.jpg,.jpeg,.png"> | |
| </label> | |
| <p class="mt-1 text-xs text-gray-500">Formats acceptés: PDF, JPG, PNG</p> | |
| </div> | |
| <div id="parental-consent-container" class="hidden"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Autorisation parentale</label> | |
| <label for="parental-consent" class="file-input-label mt-1"> | |
| <i class="fas fa-upload mr-3 text-gray-500"></i> | |
| <span id="parental-consent-text" class="text-sm text-gray-600">Téléverser l'autorisation</span> | |
| <input type="file" id="parental-consent" name="parental-consent" class="hidden" accept=".pdf,.jpg,.jpeg,.png"> | |
| </label> | |
| <p class="mt-1 text-xs text-gray-500">Formats acceptés: PDF, JPG, PNG</p> | |
| </div> | |
| <div id="outing-consent-container" class="hidden"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Autorisation parentale de sortie</label> | |
| <label for="outing-consent" class="file-input-label mt-1"> | |
| <i class="fas fa-upload mr-3 text-gray-500"></i> | |
| <span id="outing-consent-text" class="text-sm text-gray-600">Téléverser l'autorisation</span> | |
| <input type="file" id="outing-consent" name="outing-consent" class="hidden" accept=".pdf,.jpg,.jpeg,.png"> | |
| </label> | |
| <p class="mt-1 text-xs text-gray-500">Formats acceptés: PDF, JPG, PNG</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Actions --> | |
| <div class="flex flex-col-reverse md:flex-row justify-end gap-4 pt-6"> | |
| <button type="reset" class="px-6 py-3 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all"> | |
| <i class="fas fa-times mr-2"></i>Annuler | |
| </button> | |
| <button type="submit" class="px-6 py-3 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all"> | |
| <i class="fas fa-save mr-2"></i>Enregistrer l'archer | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <script> | |
| // Afficher/masquer les champs d'autorisation parentale selon l'âge | |
| document.getElementById('birthdate').addEventListener('change', function() { | |
| const birthDate = new Date(this.value); | |
| const today = new Date(); | |
| let age = today.getFullYear() - birthDate.getFullYear(); | |
| const m = today.getMonth() - birthDate.getMonth(); | |
| if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { | |
| age--; | |
| } | |
| // Afficher un avertissement si l'archer a moins de 10 ans | |
| const ageWarning = document.getElementById('age-warning'); | |
| const ageDisplay = document.getElementById('age-display'); | |
| if (age < 11) { | |
| ageWarning.classList.remove('hidden'); | |
| } else { | |
| ageWarning.classList.add('hidden'); | |
| } | |
| ageDisplay.textContent = age + ' ans'; | |
| // Ajuster la largeur du padding selon la longueur de l'âge | |
| const ageLength = age.toString().length; | |
| document.getElementById('birthdate').classList.remove('pr-16', 'pr-20'); | |
| document.getElementById('birthdate').classList.add(ageLength > 2 ? 'pr-20' : 'pr-16'); | |
| const parentalConsentContainer = document.getElementById('parental-consent-container'); | |
| const outingConsentContainer = document.getElementById('outing-consent-container'); | |
| if (age < 18) { | |
| parentalConsentContainer.classList.remove('hidden'); | |
| outingConsentContainer.classList.remove('hidden'); | |
| } else { | |
| parentalConsentContainer.classList.add('hidden'); | |
| outingConsentContainer.classList.add('hidden'); | |
| document.getElementById('parental-consent').value = ''; | |
| document.getElementById('outing-consent').value = ''; | |
| document.getElementById('parental-consent-text').textContent = 'Téléverser l\'autorisation'; | |
| document.getElementById('outing-consent-text').textContent = 'Téléverser l\'autorisation'; | |
| } | |
| }); | |
| // Mettre à jour le texte des champs de fichier lorsqu'un fichier est sélectionné | |
| document.getElementById('medical-certificate').addEventListener('change', function(e) { | |
| const fileName = e.target.files[0]?.name || 'Téléverser le certificat'; | |
| document.getElementById('medical-certificate-text').textContent = fileName; | |
| }); | |
| document.getElementById('parental-consent').addEventListener('change', function(e) { | |
| const fileName = e.target.files[0]?.name || 'Téléverser l\'autorisation'; | |
| document.getElementById('parental-consent-text').textContent = fileName; | |
| }); | |
| document.getElementById('outing-consent').addEventListener('change', function(e) { | |
| const fileName = e.target.files[0]?.name || 'Téléverser l\'autorisation'; | |
| document.getElementById('outing-consent-text').textContent = fileName; | |
| }); | |
| document.getElementById('ffta-questionnaire').addEventListener('change', function(e) { | |
| const fileName = e.target.files[0]?.name || 'Téléverser le questionnaire'; | |
| document.getElementById('ffta-questionnaire-text').textContent = fileName; | |
| }); | |
| // Fonction pour récupérer département, région et villes depuis le code postal | |
| async function fetchDepartmentAndRegion(postalCode) { | |
| if (!postalCode || postalCode.length < 2) return; | |
| try { | |
| const response = await fetch(`https://geo.api.gouv.fr/communes?codePostal=${postalCode}&fields=nom,codeDepartement,departement,region`); | |
| const data = await response.json(); | |
| if (data && data.length > 0) { | |
| document.getElementById('department').value = `${data[0].departement.nom.toUpperCase()} (${data[0].codeDepartement})`; | |
| document.getElementById('region').value = data[0].region.nom.toUpperCase(); | |
| // Remplir la datalist avec les villes | |
| const cityList = document.getElementById('city-list'); | |
| cityList.innerHTML = ''; | |
| data.forEach(commune => { | |
| const option = document.createElement('option'); | |
| option.value = commune.nom; | |
| cityList.appendChild(option); | |
| }); | |
| } | |
| } catch (error) { | |
| console.error("Erreur lors de la récupération des données:", error); | |
| } | |
| } | |
| // Écouteur pour le champ code postal | |
| document.getElementById('postal-code').addEventListener('change', function() { | |
| fetchDepartmentAndRegion(this.value); | |
| }); | |
| // Calcul automatique de la catégorie selon l'âge | |
| document.getElementById('birthdate').addEventListener('change', function() { | |
| const birthDate = new Date(this.value); | |
| if (isNaN(birthDate.getTime())) return; | |
| const today = new Date(); | |
| let age = today.getFullYear() - birthDate.getFullYear(); | |
| const m = today.getMonth() - birthDate.getMonth(); | |
| if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { | |
| age--; | |
| } | |
| let category = ''; | |
| if (age < 9) category = 'poussin'; | |
| else if (age < 11) category = 'benjamin'; | |
| else if (age < 13) category = 'minime'; | |
| else if (age < 15) category = 'cadet'; | |
| else if (age < 18) category = 'junior'; | |
| else if (age < 50) category = 'senior'; | |
| else category = 'veteran'; | |
| document.getElementById('category').value = category; | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jerome-dreville/arc-archer-add" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |