Spaces:
Running
Running
| <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> | |
| /* Custom styles */ | |
| .account-card { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| } | |
| .transaction-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .blur-sensitive { | |
| filter: blur(5px); | |
| transition: filter 0.3s; | |
| } | |
| .blur-sensitive:hover { | |
| filter: none; | |
| } | |
| .menu-item { | |
| position: relative; | |
| } | |
| .menu-item::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: #2563eb; | |
| transition: width 0.3s; | |
| } | |
| .menu-item:hover::after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://www.ecobank.com/images/default-source/default-album/ecobank_logo.png" alt="Ecobank Logo" class="h-10"> | |
| <h1 class="text-xl font-bold text-blue-800">Ecobank CI</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <div class="bg-red-100 text-red-800 rounded-full h-5 w-5 flex items-center justify-center absolute -top-1 -right-1 text-xs">3</div> | |
| <i class="fas fa-bell text-gray-600 text-xl"></i> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">GD</div> | |
| <span class="hidden md:inline font-medium">Guillaume Davoine</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-6"> | |
| <div class="flex flex-col lg:flex-row gap-6"> | |
| <!-- Left Sidebar --> | |
| <aside class="w-full lg:w-1/4 space-y-6"> | |
| <!-- Account Summary --> | |
| <div class="account-card rounded-2xl p-6 text-white"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-blue-200 font-medium">Solde disponible</p> | |
| <h2 class="text-3xl font-bold">3,450,750 XOF</h2> | |
| </div> | |
| <i class="fas fa-wallet text-2xl text-blue-200"></i> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-blue-400 border-opacity-50"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-blue-200">Compte</span> | |
| <span class="font-medium">CI01123456789</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-blue-200">Type</span> | |
| <span class="font-medium">Compte Courant</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-blue-200">IBAN</span> | |
| <span class="font-medium">XXXX XXXX XXXX 7890</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-2xl shadow p-6"> | |
| <h3 class="font-bold text-lg mb-4 text-gray-800">Actions rapides</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-exchange-alt mb-2"></i> | |
| <span class="text-sm">Transfert</span> | |
| </button> | |
| <button class="bg-green-50 hover:bg-green-100 text-green-800 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-file-invoice-dollar mb-2"></i> | |
| <span class="text-sm">Paiement</span> | |
| </button> | |
| <button class="bg-purple-50 hover:bg-purple-100 text-purple-800 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-money-bill-wave mb-2"></i> | |
| <span class="text-sm">Retrait</span> | |
| </button> | |
| <button class="bg-yellow-50 hover:bg-yellow-100 text-yellow-800 rounded-xl p-3 flex flex-col items-center"> | |
| <i class="fas fa-qrcode mb-2"></i> | |
| <span class="text-sm">Scan & Payer</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Sensitive Info (hidden by default) --> | |
| <div class="bg-white rounded-2xl shadow p-6"> | |
| <h3 class="font-bold text-lg mb-4 text-gray-800">Informations de compte</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Identifiant</p> | |
| <p class="font-medium blur-sensitive" onclick="toggleBlur(this)">GDOUINE1234</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Mot de passe</p> | |
| <p class="font-medium blur-sensitive" onclick="toggleBlur(this)">••••••••</p> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-red-50 hover:bg-red-100 text-red-700 py-2 rounded-lg text-sm font-medium"> | |
| <i class="fas fa-lock mr-2"></i> Changer le mot de passe | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Content Area --> | |
| <div class="w-full lg:w-3/4 space-y-6"> | |
| <!-- Menu Tabs --> | |
| <div class="bg-white rounded-2xl shadow"> | |
| <div class="flex overflow-x-auto"> | |
| <button class="menu-item px-6 py-4 font-medium text-blue-600 border-b-2 border-blue-600">Transactions</button> | |
| <button class="menu-item px-6 py-4 font-medium text-gray-500">Factures</button> | |
| <button class="menu-item px-6 py-4 font-medium text-gray-500">Retraits</button> | |
| <button class="menu-item px-6 py-4 font-medium text-gray-500">Paramètres</button> | |
| </div> | |
| </div> | |
| <!-- Recent Transactions --> | |
| <div class="bg-white rounded-2xl shadow p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="font-bold text-lg text-gray-800">Dernières transactions</h3> | |
| <button class="text-blue-600 font-medium text-sm">Voir tout</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Transaction Items --> | |
| <div class="transaction-item bg-gray-50 hover:bg-blue-50 rounded-xl p-4 flex items-center transition duration-200 cursor-pointer"> | |
| <div class="bg-blue-100 text-blue-800 h-10 w-10 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <h4 class="font-medium">Amazon Online</h4> | |
| <p class="text-gray-500 text-sm">15 Juil. 2023 - Carte XXXX 7890</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-red-600 font-medium">- 247,500 XOF</p> | |
| <p class="text-gray-500 text-sm">Complété</p> | |
| </div> | |
| </div> | |
| <div class="transaction-item bg-gray-50 hover:bg-blue-50 rounded-xl p-4 flex items-center transition duration-200 cursor-pointer"> | |
| <div class="bg-green-100 text-green-800 h-10 w-10 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <h4 class="font-medium">Transfert reçu</h4> | |
| <p class="text-gray-500 text-sm">12 Juil. 2023 - Koffi Dan</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-green-600 font-medium">+ 450,000 XOF</p> | |
| <p class="text-gray-500 text-sm">Complété</p> | |
| </div> | |
| </div> | |
| <div class="transaction-item bg-gray-50 hover:bg-blue-50 rounded-xl p-4 flex items-center transition duration-200 cursor-pointer"> | |
| <div class="bg-purple-100 text-purple-800 h-10 w-10 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-file-invoice"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <h4 class="font-medium">Paiement CIE</h4> | |
| <p class="text-gray-500 text-sm">10 Juil. 2023 - Facture électricité</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-red-600 font-medium">- 87,250 XOF</p> | |
| <p class="text-gray-500 text-sm">Complété</p> | |
| </div> | |
| </div> | |
| <div class="transaction-item bg-gray-50 hover:bg-blue-50 rounded-xl p-4 flex items-center transition duration-200 cursor-pointer"> | |
| <div class="bg-yellow-100 text-yellow-800 h-10 w-10 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-money-bill-wave"></i> | |
| </div> | |
| <div class="flex-grow"> | |
| <h4 class="font-medium">Retrait ATM</h4> | |
| <p class="text-gray-500 text-sm">8 Juil. 2023 - Ecobank Adjamé</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-red-600 font-medium">- 200,000 XOF</p> | |
| <p class="text-gray-500 text-sm">Complété</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bill Payments --> | |
| <div class="bg-white rounded-2xl shadow p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="font-bold text-lg text-gray-800">Paiements de factures récents</h3> | |
| <button class="text-blue-600 font-medium text-sm">Payer une facture</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-blue-50 rounded-xl p-4 flex items-center"> | |
| <div class="bg-blue-200 text-blue-800 h-12 w-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">CIE Électricité</h4> | |
| <p class="text-gray-500 text-sm">Dernier paiement: 87,250 XOF</p> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 rounded-xl p-4 flex items-center"> | |
| <div class="bg-green-200 text-green-800 h-12 w-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">SODECI Eau</h4> | |
| <p class="text-gray-500 text-sm">Dernier paiement: 32,500 XOF</p> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-xl p-4 flex items-center"> | |
| <div class="bg-purple-200 text-purple-800 h-12 w-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Orange CI</h4> | |
| <p class="text-gray-500 text-sm">Dernier paiement: 15,000 XOF</p> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 rounded-xl p-4 flex items-center"> | |
| <div class="bg-yellow-200 text-yellow-800 h-12 w-12 rounded-lg flex items-center justify-center mr-4"> | |
| <i class="fas fa-tv"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Canal+</h4> | |
| <p class="text-gray-500 text-sm">Dernier paiement: 25,000 XOF</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <img src="https://www.ecobank.com/images/default-source/default-album/ecobank_logo_white.png" alt="Ecobank Logo" class="h-8"> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-blue-300"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="hover:text-blue-300"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-blue-300"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="hover:text-blue-300"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-700 text-center text-sm text-gray-400"> | |
| <p>© 2023 Ecobank Côte d'Ivoire. Tous droits réservés. | <a href="#" class="hover:text-white">Sécurité</a> | <a href="#" class="hover:text-white">Confidentialité</a></p> | |
| <p class="mt-2">En cas de problème, contactez notre service client au 225 20 21 22 23</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Toggle blur effect for sensitive information | |
| function toggleBlur(element) { | |
| element.classList.toggle('blur-sensitive'); | |
| } | |
| // Update current date | |
| function updateCurrentDate() { | |
| const now = new Date(); | |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; | |
| document.getElementById('current-date').textContent = now.toLocaleDateString('fr-FR', options); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateCurrentDate(); | |
| // Tab switching functionality | |
| const tabs = document.querySelectorAll('.menu-item'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| tabs.forEach(t => t.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600')); | |
| tabs.forEach(t => t.classList.add('text-gray-500')); | |
| this.classList.remove('text-gray-500'); | |
| this.classList.add('text-blue-600', 'border-b-2', 'border-blue-600'); | |
| }); | |
| }); | |
| }); | |
| </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/htt-ecobank-ci" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |