detedfg/maplepath-express
0
1<!DOCTYPE html>2<html lang="fr">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Formulaire d'immigration - Canada</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 .canada-red {13 background-color: #D52B1E;14 }15 .form-section {16 border-left: 4px solid #D52B1E;17 padding-left: 1rem;18 margin-bottom: 2rem;19 }20 </style>21</head>22<body class="font-sans bg-gray-50">23 <!-- Header -->24 <header class="canada-red text-white shadow-md">25 <div class="container mx-auto px-4 py-3 flex justify-between items-center">26 <div class="flex items-center space-x-2">27 <img src="https://www.canada.ca/content/dam/canada-tbs-sct/migration/hgw-cgf/collaboration/af-finance/2011-03/fip-pfi/2011-03-eng.gif" alt="Government of Canada" class="h-10">28 <span class="text-xl font-bold">Canada.ca</span>29 </div>30 <button onclick="window.location.href='index.html'" class="text-white hover:underline">31 <i data-feather="home" class="mr-1"></i> Accueil32 </button>33 </div>34 </header>35 36 <!-- Main Content -->37 <main class="container mx-auto px-4 py-8">38 <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">39 <div class="bg-gray-100 px-6 py-4 border-b">40 <h1 class="text-2xl font-bold text-gray-800">Formulaire de demande d'immigration</h1>41 </div>42 <div class="p-6">43 <div class="mb-8">44 <h2 class="text-xl font-bold mb-4">Instructions</h2>45 <p class="text-gray-700 mb-4">46 Veuillez remplir ce formulaire avec soin. Tous les champs marqués d'un astérisque (*) sont obligatoires.47 </p>48 <p class="text-gray-700">49 Une fois soumis, vous recevrez un numéro de confirmation par courriel. Vous pouvez suivre l'état de votre demande en ligne à tout moment.50 </p>51 </div>52 53 <form id="immigrationForm" class="space-y-6">54 <!-- Personal Information Section -->55 <div class="form-section">56 <h3 class="text-lg font-bold mb-4">Informations personnelles</h3>57 <div class="grid md:grid-cols-2 gap-6">58 <div>59 <label for="lastname" class="block text-gray-700 font-medium mb-2">Nom de famille *</label>60 <input type="text" id="lastname" name="lastname" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>61 </div>62 <div>63 <label for="firstname" class="block text-gray-700 font-medium mb-2">Prénom *</label>64 <input type="text" id="firstname" name="firstname" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>65 </div>66 <div>67 <label for="age" class="block text-gray-700 font-medium mb-2">Âge *</label>68 <input type="number" id="age" name="age" min="18" max="99" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>69 </div>70 <div>71 <label for="marital" class="block text-gray-700 font-medium mb-2">Situation matrimoniale *</label>72 <select id="marital" name="marital" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>73 <option value="">Sélectionnez...</option>74 <option value="single">Célibataire</option>75 <option value="married">Marié(e)</option>76 <option value="divorced">Divorcé(e)</option>77 <option value="widowed">Veuf(ve)</option>78 </select>79 </div>80 </div>81 </div>82 83 <!-- Country Information Section -->84 <div class="form-section">85 <h3 class="text-lg font-bold mb-4">Informations sur les pays</h3>86 <div class="grid md:grid-cols-2 gap-6">87 <div>88 <label for="origin" class="block text-gray-700 font-medium mb-2">Pays d'origine *</label>89 <input type="text" id="origin" name="origin" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>90 </div>91 <div>92 <label for="current" class="block text-gray-700 font-medium mb-2">Pays actuel *</label>93 <input type="text" id="current" name="current" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>94 </div>95 </div>96 </div>97 98 <!-- Education Section -->99 <div class="form-section">100 <h3 class="text-lg font-bold mb-4">Éducation et qualifications</h3>101 <div>102 <label for="education" class="block text-gray-700 font-medium mb-2">Diplôme universitaire ou professionnel *</label>103 <select id="education" name="education" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>104 <option value="">Sélectionnez...</option>105 <option value="none">Aucun</option>106 <option value="cap">CAP</option>107 <option value="bep">BEP</option>108 <option value="bac">Baccalauréat</option>109 <option value="bts">BTS</option>110 <option value="licence">Licence</option>111 <option value="master">Master</option>112 <option value="doctorat">Doctorat</option>113 </select>114 </div>115 </div>116 117 <!-- Documents Section -->118 <div class="form-section">119 <h3 class="text-lg font-bold mb-4">Documents et vérifications</h3>120 <div class="grid md:grid-cols-2 gap-6">121 <div>122 <label for="passport" class="block text-gray-700 font-medium mb-2">Passeport *</label>123 <select id="passport" name="passport" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>124 <option value="">Sélectionnez...</option>125 <option value="yes-valid">Oui – valide</option>126 <option value="yes-inprogress">Oui – en cours</option>127 <option value="no">Non</option>128 </select>129 </div>130 <div>131 <label for="visa" class="block text-gray-700 font-medium mb-2">Le visa vous a été refusé une fois *</label>132 <select id="visa" name="visa" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>133 <option value="">Sélectionnez...</option>134 <option value="yes">Oui</option>135 <option value="no">Non</option>136 </select>137 </div>138 <div>139 <label for="record" class="block text-gray-700 font-medium mb-2">Casier judiciaire *</label>140 <select id="record" name="record" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>141 <option value="">Sélectionnez...</option>142 <option value="clean">Vierge</option>143 <option value="convictions">Condamnations précisées le cas échéant</option>144 </select>145 </div>146 </div>147 </div>148 149 <!-- Declaration -->150 <div class="border-t border-gray-200 pt-6">151 <div class="flex items-start">152 <input type="checkbox" id="declaration" name="declaration" class="mt-1 mr-2" required>153 <label for="declaration" class="text-gray-700">154 Je déclare que les informations fournies dans ce formulaire sont exactes et complètes. Je comprends que de fausses déclarations peuvent entraîner le rejet de ma demande ou la révocation de mon statut d'immigrant.155 </label>156 </div>157 </div>158 159 <!-- Submit Button -->160 <div class="mt-8 text-center">161 <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg text-lg">162 Soumettre la demande163 </button>164 </div>165 </form>166 </div>167 </div>168 </main>169 170 <!-- Success Modal -->171 <div id="successModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">172 <div class="bg-white rounded-lg p-6 max-w-sm w-full">173 <div class="text-center">174 <i data-feather="check-circle" class="mx-auto text-green-500 w-12 h-12"></i>175 <h2 class="text-xl font-bold mt-4 mb-2">Demande soumise!</h2>176 <p class="text-gray-600 mb-4">Votre formulaire a été envoyé avec succès. Vous recevrez un courriel de confirmation sous peu.</p>177 <button onclick="window.location.href='index.html'" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">178 Retour à l'accueil179 </button>180 </div>181 </div>182 </div>183 184 <script>185 feather.replace();186 187 document.getElementById('immigrationForm').addEventListener('submit', function(e) {188 e.preventDefault();189 190 // Get form data191 const formData = new FormData(this);192 const data = Object.fromEntries(formData);193 194 // Simple email sending simulation (would use EmailJS or backend in real app)195 console.log('Form data:', data);196 console.log('Email would be sent to: Immigrerverslecanada@gmail.com');197 console.log('Content:', `Nouvelle demande de: ${data.firstname} ${data.lastname}`);198 199 // Show success modal200 document.getElementById('successModal').classList.remove('hidden');201 });202 </script>203</body>204</html>205