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>Connexion - 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 </style>16</head>17<body class="font-sans bg-gray-50">18 <!-- Header -->19 <header class="canada-red text-white shadow-md">20 <div class="container mx-auto px-4 py-3 flex justify-between items-center">21 <div class="flex items-center space-x-2">22 <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">23 <span class="text-xl font-bold">Canada.ca</span>24 </div>25 <button onclick="window.location.href='index.html'" class="text-white hover:underline">26 <i data-feather="home" class="mr-1"></i> Accueil27 </button>28 </div>29 </header>30 31 <!-- Main Content -->32 <main class="container mx-auto px-4 py-12 max-w-md">33 <div class="bg-white rounded-lg shadow-md overflow-hidden">34 <div class="bg-gray-100 px-6 py-4 border-b">35 <h1 class="text-2xl font-bold text-gray-800">Connexion à votre compte ISCC</h1>36 </div>37 <div class="p-6">38 <form id="loginForm">39 <div class="mb-4">40 <label for="username" class="block text-gray-700 font-medium mb-2">Identifiant</label>41 <input type="text" id="username" name="username" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>42 </div>43 <div class="mb-6">44 <label for="password" class="block text-gray-700 font-medium mb-2">Mot de passe</label>45 <input type="password" id="password" name="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>46 </div>47 <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">48 Se connecter49 </button>50 </form>51 <div class="mt-4 text-center">52 <a href="#" class="text-blue-600 hover:underline">Mot de passe oublié?</a>53 </div>54 <div class="mt-6 pt-6 border-t border-gray-200 text-center">55 <p class="text-gray-600">Vous n'avez pas de compte?</p>56 <button onclick="window.location.href='login.html'" class="mt-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded">57 Créer un compte58 </button>59 </div>60 </div>61 </div>62 </main>63 64 <!-- Success Modal -->65 <div id="successModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">66 <div class="bg-white rounded-lg p-6 max-w-sm w-full">67 <div class="text-center">68 <i data-feather="check-circle" class="mx-auto text-green-500 w-12 h-12"></i>69 <h2 class="text-xl font-bold mt-4 mb-2">Connexion réussie!</h2>70 <p class="text-gray-600 mb-4">Vous allez être redirigé vers votre espace personnel.</p>71 <button onclick="redirectToProcedure()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">72 Continuer73 </button>74 </div>75 </div>76 </div>77 78 <script>79 feather.replace();80 81 document.getElementById('loginForm').addEventListener('submit', function(e) {82 e.preventDefault();83 // Show success modal - any credentials will work84 document.getElementById('successModal').classList.remove('hidden');85 });86 87 function redirectToProcedure() {88 window.location.href = 'procedure.html';89 }90 </script>91</body>92</html>93