| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Ecobank - Compte de Guillaume Davoine</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"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #1a3a8f 0%, #00a651 100%); |
| } |
| .account-card { |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
| transition: transform 0.3s ease; |
| } |
| .account-card:hover { |
| transform: translateY(-5px); |
| } |
| .transaction-card:hover { |
| background-color: #f8fafc; |
| } |
| .locked-account { |
| position: relative; |
| overflow: hidden; |
| } |
| .locked-account::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0, 0, 0, 0.4); |
| z-index: 1; |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="50px" height="50px"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>'); |
| background-repeat: no-repeat; |
| background-position: center; |
| background-size: 80px; |
| } |
| #loginModal { |
| display: none; |
| position: fixed; |
| z-index: 100; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.7); |
| } |
| .modal-content { |
| animation: modalopen 0.5s; |
| } |
| @keyframes modalopen { |
| from { opacity: 0; transform: translateY(-50px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| |
| <nav class="gradient-bg text-white p-4 shadow-lg"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-university text-2xl"></i> |
| <span class="font-bold text-xl">Ecobank</span> |
| </div> |
| <div class="hidden md:flex space-x-6 items-center"> |
| <a href="#" class="hover:text-gray-200">Accueil</a> |
| <a href="#" class="hover:text-gray-200">Transactions</a> |
| <a href="#" class="hover:text-gray-200">Services</a> |
| <a href="#" class="hover:text-gray-200">Assistance</a> |
| <button onclick="openLogin()" class="bg-white text-green-800 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">Connexion</button> |
| </div> |
| <button class="md:hidden text-2xl" onclick="toggleMobileMenu()"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| |
| <div id="mobileMenu" class="md:hidden hidden mt-4 pb-2"> |
| <a href="#" class="block py-2 hover:bg-white hover:text-green-800 px-4 rounded">Accueil</a> |
| <a href="#" class="block py-2 hover:bg-white hover:text-green-800 px-4 rounded">Transactions</a> |
| <a href="#" class="block py-2 hover:bg-white hover:text-green-800 px-4 rounded">Services</a> |
| <a href="#" class="block py-2 hover:bg-white hover:text-green-800 px-4 rounded">Assistance</a> |
| <button onclick="openLogin()" class="w-full text-left py-2 hover:bg-white hover:text-green-800 px-4 rounded font-semibold">Connexion</button> |
| </div> |
| </nav> |
|
|
| |
| <div id="loginModal" class="flex items-center justify-center"> |
| <div class="modal-content bg-white rounded-lg w-full max-w-md p-6 mx-4"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Connexion à Ecobank</h2> |
| <span class="cursor-pointer text-xl" onclick="closeLogin()">×</span> |
| </div> |
| <form id="loginForm"> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="username">Identifiant</label> |
| <input type="text" id="username" class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" value="GD68943"> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-2" for="password">Mot de passe</label> |
| <div class="relative"> |
| <input type="password" id="password" class="w-full p-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" value="Eco@Davoine2023"> |
| <span class="absolute right-3 top-2 cursor-pointer text-gray-500" onclick="togglePasswordVisibility()"> |
| <i id="eyeIcon" class="far fa-eye"></i> |
| </span> |
| </div> |
| </div> |
| <button type="button" onclick="attemptLogin()" class="w-full gradient-bg text-white py-2 rounded-lg font-semibold hover:opacity-90"> |
| Se connecter |
| </button> |
| </form> |
| <div class="mt-4 text-center"> |
| <a href="#" class="text-sm text-green-700 hover:underline">Mot de passe oublié ?</a> |
| </div> |
| <div id="loginError" class="hidden mt-4 p-2 bg-red-100 text-red-700 rounded text-center"></div> |
| </div> |
| </div> |
|
|
| |
| <main class="container mx-auto py-8 px-4" id="mainContent"> |
| <div class="flex flex-col md:flex-row gap-6"> |
| |
| <div class="w-full md:w-1/3"> |
| <div class="bg-white rounded-xl p-6 account-card relative locked-account"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <h2 class="text-xl font-semibold text-gray-800">Compte Bloqué</h2> |
| <p class="text-gray-600">Guillaume Davoine</p> |
| </div> |
| <div class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium"> |
| Vérification requise |
| </div> |
| </div> |
| |
| <div class="my-6"> |
| <p class="text-gray-500 text-sm">Solde disponible</p> |
| <p class="text-3xl font-bold text-gray-800">698.000 €</p> |
| </div> |
| |
| <div class="border-t pt-4"> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">Numéro de compte</span> |
| <span class="font-medium">BE76 9876 5432 1098</span> |
| </div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-600">IBAN</span> |
| <span class="font-medium">ECBKBEBXBE76 9876 5432 1098</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-600">Statut</span> |
| <span class="font-medium text-red-600">Compte bloqué</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl p-6 mt-6 shadow"> |
| <h3 class="font-semibold text-lg mb-4">Actions rapides</h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <button class="flex items-center justify-center py-3 px-4 border rounded-lg hover:bg-gray-50 text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
| <i class="fas fa-exchange-alt mr-2"></i> Virement |
| </button> |
| <button class="flex items-center justify-center py-3 px-4 border rounded-lg hover:bg-gray-50 text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
| <i class="fas fa-money-bill-wave mr-2"></i> Retrait |
| </button> |
| <button class="flex items-center justify-center py-3 px-4 border rounded-lg hover:bg-gray-50 text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
| <i class="fas fa-file-invoice-dollar mr-2"></i> Paiement |
| </button> |
| <button class="flex items-center justify-center py-3 px-4 border rounded-lg hover:bg-gray-50 text-gray-700"> |
| <i class="fas fa-lock mr-2"></i> Sécurité |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="w-full md:w-2/3"> |
| <div class="bg-white rounded-xl p-6 shadow"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-semibold text-gray-800">Dernières transactions</h2> |
| <button class="text-green-700 hover:underline disabled:opacity-50 disabled:cursor-not-allowed" disabled>Voir plus</button> |
| </div> |
| |
| <div class="space-y-4"> |
| |
| <div class="p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded-lg"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-exclamation-circle text-yellow-500"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-yellow-700"> |
| Votre compte est actuellement bloqué. Aucune opération (retrait, virement ou paiement) ne peut être effectuée pour le moment. Veuillez contacter le service client pour plus d'informations. |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex items-center p-4 border rounded-lg transaction-card"> |
| <div class="bg-red-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-ban text-red-500"></i> |
| </div> |
| <div class="flex-grow"> |
| <h3 class="font-medium text-gray-900">Opération refusée</h3> |
| <p class="text-sm text-gray-500">Transaction #TRX789456</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-medium text-gray-900">-1.250 €</p> |
| <p class="text-sm text-gray-500">20/06/2023</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center p-4 border rounded-lg transaction-card"> |
| <div class="bg-red-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-ban text-red-500"></i> |
| </div> |
| <div class="flex-grow"> |
| <h3 class="font-medium text-gray-900">Retrait bloqué</h3> |
| <p class="text-sm text-gray-500">Agence Bruxelles Centre</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-medium text-gray-900">-5.000 €</p> |
| <p class="text-sm text-gray-500">15/06/2023</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center p-4 border rounded-lg transaction-card"> |
| <div class="bg-yellow-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-exclamation-triangle text-yellow-500"></i> |
| </div> |
| <div class="flex-grow"> |
| <h3 class="font-medium text-gray-900">Virement en attente</h3> |
| <p class="text-sm text-gray-500">Vers compte BE65 4321 9876 5432</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-medium text-gray-900">-25.000 €</p> |
| <p class="text-sm text-gray-500">10/06/2023</p> |
| </div> |
| </div> |
| |
| <div class="flex items-center p-4 border rounded-lg transaction-card"> |
| <div class="bg-green-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-plus-circle text-green-500"></i> |
| </div> |
| <div class="flex-grow"> |
| <h3 class="font-medium text-gray-900">Dépôt initial</h3> |
| <p class="text-sm text-gray-500">Ouverture de compte</p> |
| </div> |
| <div class="text-right"> |
| <p class="font-medium text-green-600">+698.000 €</p> |
| <p class="text-sm text-gray-500">01/06/2023</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl p-6 mt-6 shadow"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Besoin d'aide ?</h2> |
| <p class="text-gray-600 mb-4">Votre compte a été bloqué par mesure de sécurité. Pour le débloquer, veuillez contacter notre service client :</p> |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-200"> |
| <div class="flex items-start mb-3"> |
| <i class="fas fa-phone-alt text-blue-500 mr-3 mt-1"></i> |
| <div> |
| <h4 class="font-medium text-blue-800">Service client Ecobank</h4> |
| <p class="text-blue-600">+32 800 123 456</p> |
| <p class="text-sm text-gray-500">Disponible 24h/24, 7j/7</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <i class="fas fa-envelope text-blue-500 mr-3 mt-1"></i> |
| <div> |
| <h4 class="font-medium text-blue-800">Email</h4> |
| <p class="text-blue-600">support@ecobank.be</p> |
| <p class="text-sm text-gray-500">Réponse sous 24 heures</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-4 p-4 bg-gray-50 rounded-lg"> |
| <h4 class="font-medium text-gray-800 mb-2">Vos identifiants</h4> |
| <div class="flex items-center justify-between bg-gray-100 p-2 rounded"> |
| <span class="text-gray-700">Identifiant:</span> |
| <span class="font-mono bg-white px-2 py-1 rounded">GD68943</span> |
| </div> |
| <div class="flex items-center justify-between bg-gray-100 p-2 rounded mt-2"> |
| <span class="text-gray-700">Mot de passe:</span> |
| <span class="font-mono bg-white px-2 py-1 rounded">Eco@Davoine2023</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| |
| <footer class="gradient-bg text-white py-8 mt-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="font-bold text-lg mb-4">Ecobank</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:underline">À propos de nous</a></li> |
| <li><a href="#" class="hover:underline">Carrières</a></li> |
| <li><a href="#" class="hover:underline">Presse</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-4">Services</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:underline">Comptes bancaires</a></li> |
| <li><a href="#" class="hover:underline">Prêts</a></li> |
| <li><a href="#" class="hover:underline">Investissements</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-4">Assistance</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:underline">Centre d'aide</a></li> |
| <li><a href="#" class="hover:underline">Contactez-nous</a></li> |
| <li><a href="#" class="hover:underline">Sécurité</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg mb-4">Légal</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:underline">Conditions générales</a></li> |
| <li><a href="#" class="hover:underline">Vie privée</a></li> |
| <li><a href="#" class="hover:underline">Cookies</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-300 mt-8 pt-8 text-center text-sm"> |
| <p>© 2023 Ecobank. Tous droits réservés. Banque agréée et régulée par la Banque Nationale de Belgique.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function toggleMobileMenu() { |
| const menu = document.getElementById('mobileMenu'); |
| menu.classList.toggle('hidden'); |
| } |
| |
| |
| function togglePasswordVisibility() { |
| const passwordInput = document.getElementById('password'); |
| const eyeIcon = document.getElementById('eyeIcon'); |
| |
| if (passwordInput.type === 'password') { |
| passwordInput.type = 'text'; |
| eyeIcon.classList.remove('fa-eye'); |
| eyeIcon.classList.add('fa-eye-slash'); |
| } else { |
| passwordInput.type = 'password'; |
| eyeIcon.classList.remove('fa-eye-slash'); |
| eyeIcon.classList.add('fa-eye'); |
| } |
| } |
| |
| |
| function openLogin() { |
| document.getElementById('loginModal').style.display = 'flex'; |
| } |
| |
| |
| function closeLogin() { |
| document.getElementById('loginModal').style.display = 'none'; |
| document.getElementById('loginError').classList.add('hidden'); |
| } |
| |
| |
| function attemptLogin() { |
| const username = document.getElementById('username').value; |
| const password = document.getElementById('password').value; |
| const errorDiv = document.getElementById('loginError'); |
| |
| if (username === 'GD68943' && password === 'Eco@Davoine2023') { |
| alert('Vous avez été identifié avec succès. Cependant, votre compte reste bloqué. Veuillez contacter le service client.'); |
| closeLogin(); |
| } else { |
| errorDiv.textContent = 'Identifiant ou mot de passe incorrect'; |
| errorDiv.classList.remove('hidden'); |
| } |
| } |
| |
| |
| window.onclick = function(event) { |
| const modal = document.getElementById('loginModal'); |
| if (event.target == modal) { |
| closeLogin(); |
| } |
| } |
| </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=Ray771286/ecobank" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
