Spaces:
Running
Running
Séparer la section sélection de période des relevés bancaires pour une meilleure lisibilité. Améliorer l'affichage des boutons de téléchargement et les aligner clairement à côté des mois. Séparer les actions rapides et la carte bancaire des relevés bancaires pour éviter qu'ils se mélangent. Ajouter un filtre dynamique pour que les relevés s'affichent automatiquement selon la période sélectionnée. - Initial Deployment
3e551a1
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DEA Bank - Interface Bancaire</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> | |
| .digit-input { | |
| width: 40px; | |
| height: 50px; | |
| text-align: center; | |
| font-size: 1.5rem; | |
| margin: 0 5px; | |
| border: 2px solid #ccc; | |
| border-radius: 8px; | |
| outline: none; | |
| } | |
| .digit-input:focus { | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); | |
| } | |
| .card-number { | |
| letter-spacing: 2px; | |
| font-family: monospace; | |
| } | |
| .loading-dots { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .loading-dots span { | |
| width: 8px; | |
| height: 8px; | |
| margin: 0 2px; | |
| background-color: #fff; | |
| border-radius: 50%; | |
| display: inline-block; | |
| animation: bounce 1.4s infinite ease-in-out both; | |
| } | |
| .loading-dots span:nth-child(1) { | |
| animation-delay: -0.32s; | |
| } | |
| .loading-dots span:nth-child(2) { | |
| animation-delay: -0.16s; | |
| } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { | |
| transform: scale(0); | |
| } | |
| 40% { | |
| transform: scale(1.0); | |
| } | |
| } | |
| .rotate { | |
| animation: rotation 2s infinite linear; | |
| } | |
| @keyframes rotation { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(359deg); | |
| } | |
| } | |
| .card-flip { | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .card-flip:hover { | |
| transform: rotateY(10deg); | |
| } | |
| .card-flip.opacity-50 { | |
| opacity: 0.5; | |
| } | |
| .card-flip.bg-red-100 { | |
| background-color: rgba(254, 226, 226, 0.7); | |
| } | |
| .transaction-item:hover { | |
| background-color: #f8fafc; | |
| transform: translateX(5px); | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s forwards; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Login Page --> | |
| <div id="login-page" class="min-h-screen flex flex-col items-center justify-center p-4 bg-gradient-to-br from-blue-900 to-blue-700 text-white"> | |
| <div class="w-full max-w-md bg-white rounded-lg shadow-lg p-8 text-gray-800"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-blue-800">DEA BANK</h1> | |
| <p class="text-gray-600">Connectez-vous à votre espace client</p> | |
| </div> | |
| <form id="login-form" class="space-y-6"> | |
| <div> | |
| <label for="user-id" class="block text-sm font-medium text-gray-700 mb-2">Identifiant</label> | |
| <div class="flex justify-center" id="user-id-container"> | |
| <!-- Digits will be added by JavaScript --> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Mot de passe</label> | |
| <div class="flex justify-center" id="password-container"> | |
| <!-- Digits will be added by JavaScript --> | |
| </div> | |
| </div> | |
| <div id="error-message" class="text-red-500 text-sm text-center hidden"> | |
| Identifiant ou mot de passe incorrect. | |
| </div> | |
| <div class="relative"> | |
| <button type="submit" id="login-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center"> | |
| <span id="login-text">Connexion</span> | |
| <div id="loading-spinner" class="hidden ml-2"> | |
| <div class="loading-dots"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </button> | |
| </div> | |
| </form> | |
| <div class="mt-6 text-center text-sm text-gray-500"> | |
| <p>Pour votre sécurité, vous serez déconnecté après 10 minutes d'inactivité.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard (Hidden by default) --> | |
| <div id="dashboard" class="hidden min-h-screen bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-blue-800 text-white shadow-md"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-university text-2xl"></i> | |
| <h1 class="text-2xl font-bold">DEA BANK</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:block"> | |
| <span id="user-name" class="font-medium">Jean Dupont</span> | |
| </div> | |
| <button id="logout-btn" class="bg-blue-700 hover:bg-blue-600 px-4 py-2 rounded-lg flex items-center space-x-2 transition"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| <span class="hidden md:inline">Déconnexion</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex"> | |
| <!-- Sidebar Navigation --> | |
| <div class="w-64 bg-blue-900 text-white min-h-screen p-4 hidden md:block"> | |
| <div class="flex items-center space-x-2 mb-8 p-2"> | |
| <i class="fas fa-university text-2xl"></i> | |
| <h2 class="text-xl font-bold">DEA BANK</h2> | |
| </div> | |
| <nav class="space-y-2"> | |
| <div id="dashboard-nav-btn" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-blue-800 cursor-pointer"> | |
| <i class="fas fa-home"></i> | |
| <span>Tableau de bord</span> | |
| </div> | |
| <div id="transfer-nav-btn" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-blue-800 cursor-pointer"> | |
| <i class="fas fa-exchange-alt"></i> | |
| <span>Virements</span> | |
| </div> | |
| <div id="beneficiaries-nav-btn" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-blue-800 cursor-pointer"> | |
| <i class="fas fa-users"></i> | |
| <span>Bénéficiaires</span> | |
| </div> | |
| <div id="card-nav-btn" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-blue-800 cursor-pointer"> | |
| <i class="fas fa-credit-card"></i> | |
| <span>Ma carte</span> | |
| </div> | |
| <div id="insurance-nav-btn" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-blue-800 cursor-pointer"> | |
| <i class="fas fa-shield-alt"></i> | |
| <span>Assurances</span> | |
| </div> | |
| <div id="limits-nav-btn" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-blue-800 cursor-pointer"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>Plafonds</span> | |
| </div> | |
| <div id="statement-nav-btn" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-blue-800 cursor-pointer"> | |
| <i class="fas fa-file-invoice"></i> | |
| <span>Relevé bancaire</span> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 container mx-auto px-4 py-6"> | |
| <!-- Account Summary --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Balance Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Votre compte principal</h2> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div> | |
| <p class="text-gray-500">Solde disponible</p> | |
| <p id="account-balance" class="text-4xl font-bold text-blue-800 my-2">4,728.50 €</p> | |
| <p class="text-gray-500 text-sm">IBAN: FR76 **** **** **** **** **** 2345</p> | |
| <button id="show-card-btn" class="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200"> | |
| <i class="fas fa-credit-card mr-2"></i>Voir ma carte | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-4">Actions rapides</h2> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button id="quick-transfer-btn" class="bg-blue-50 hover:bg-blue-100 text-blue-800 p-4 rounded-lg flex flex-col items-center justify-center transition"> | |
| <i class="fas fa-exchange-alt text-2xl mb-2"></i> | |
| <span class="text-sm">Virement</span> | |
| </button> | |
| <button id="beneficiaries-btn" class="bg-green-50 hover:bg-green-100 text-green-800 p-4 rounded-lg flex flex-col items-center justify-center transition"> | |
| <i class="fas fa-users text-2xl mb-2"></i> | |
| <span class="text-sm">Bénéficiaires</span> | |
| </button> | |
| <button id="insurance-btn" class="bg-purple-50 hover:bg-purple-100 text-purple-800 p-4 rounded-lg flex flex-col items-center justify-center transition"> | |
| <i class="fas fa-shield-alt text-2xl mb-2"></i> | |
| <span class="text-sm">Assurance</span> | |
| </button> | |
| <button id="limits-btn" class="bg-yellow-50 hover:bg-yellow-100 text-yellow-800 p-4 rounded-lg flex flex-col items-center justify-center transition"> | |
| <i class="fas fa-chart-line text-2xl mb-2"></i> | |
| <span class="text-sm">Plafonds</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Transactions --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Dernières transactions</h2> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Tout voir</button> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Filtrer</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 gap-4" id="transactions-list"> | |
| <div class="transaction-item bg-white rounded-lg p-4 hover:shadow-md transition duration-200"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">15/06/2023</p> | |
| <p class="font-medium">Virement</p> | |
| <p class="text-sm text-gray-500">Marie Lambert | |
| FR76 6933 8002 2336 0045 6895 086 | |
| </p> | |
| </div> | |
| <p class="text-red-600 font-medium">-150.00 €</p> | |
| </div> | |
| </div> | |
| <div class="transaction-item bg-white rounded-lg p-4 hover:shadow-md transition duration-200"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">12/06/2023</p> | |
| <p class="font-medium">Paiement carte</p> | |
| <p class="text-sm text-gray-500">Amazon.fr</p> | |
| </div> | |
| <p class="text-red-600 font-medium">-89.99 €</p> | |
| </div> | |
| </div> | |
| <div class="transaction-item bg-white rounded-lg p-4 hover:shadow-md transition duration-200"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">10/06/2023</p> | |
| <p class="font-medium">Dépôt</p> | |
| <p class="text-sm text-gray-500">Espèces</p> | |
| </div> | |
| <p class="text-green-600 font-medium">+200.00 €</p> | |
| </div> | |
| </div> | |
| <div class="transaction-item bg-white rounded-lg p-4 hover:shadow-md transition duration-200"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">05/06/2023</p> | |
| <p class="font-medium">Prélèvement</p> | |
| <p class="text-sm text-gray-500">EDF</p> | |
| </div> | |
| <p class="text-red-600 font-medium">-65.30 €</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-center"> | |
| <button id="load-more-transactions" class="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100"> | |
| Charger plus de transactions | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Hidden Sections --> | |
| <!-- Bank Card Section --> | |
| <div id="card-section" class="hidden bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Votre carte bancaire</h2> | |
| <button id="hide-card-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center justify-center md:justify-between space-y-6 md:space-y-0 md:space-x-6"> | |
| <!-- Card Front --> | |
| <div class="card-flip bg-gradient-to-r from-blue-800 to-blue-600 rounded-xl p-6 w-full max-w-md h-56 text-white shadow-lg relative overflow-hidden"> | |
| <div class="absolute top-4 right-4"> | |
| <p class="text-xs font-medium">PLATINUM</p> | |
| </div> | |
| <div class="flex justify-between items-center mb-8"> | |
| <i class="fas fa-sim-card text-2xl"></i> | |
| <i class="fab fa-cc-visa text-4xl"></i> | |
| </div> | |
| <div class="mb-6"> | |
| <p id="card-number" class="card-number text-xl font-mono tracking-widest mb-2">4975 4526 9866 2345</p> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-blue-200">Titulaire de la carte</p> | |
| <p id="card-holder" class="text-sm font-medium">dea anselme</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-blue-200">Expire le</p> | |
| <p id="card-expiry" class="text-sm font-medium">12/25</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="toggle-card-number" class="absolute bottom-4 right-4 bg-blue-900 bg-opacity-30 rounded-full p-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| <!-- Card Back --> | |
| <div class="card-flip bg-gradient-to-r from-gray-800 to-gray-700 rounded-xl p-6 w-full max-w-md h-56 text-white shadow-lg relative overflow-hidden"> | |
| <div class="h-10 bg-black mt-4 mb-6"></div> | |
| <div class="bg-gray-600 h-8 rounded flex items-center px-4 mb-6"> | |
| <p id="card-cvv" class="text-sm font-mono tracking-widest">•••</p> | |
| </div> | |
| <div class="text-xs text-gray-300"> | |
| <p>Pour votre sécurité, le code CVV n'est pas stocké dans notre système. Vous le trouverez au dos de votre carte physique.</p> | |
| </div> | |
| <button id="toggle-card-cvv" class="absolute bottom-4 right-4 bg-gray-900 bg-opacity-30 rounded-full p-2"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 p-3 rounded-lg flex items-center justify-center transition card-actions"> | |
| <i class="fas fa-lock mr-2"></i> | |
| <span class="text-sm">Bloquer la carte</span> | |
| </button> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 p-3 rounded-lg flex flex-col items-center justify-center transition"> | |
| <i class="fas fa-key text-xl mb-2"></i> | |
| <span class="text-sm">Changer le code</span> | |
| </button> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 p-3 rounded-lg flex flex-col items-center justify-center transition"> | |
| <i class="fas fa-bell text-xl mb-2"></i> | |
| <span class="text-sm">Alertes</span> | |
| </button> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 p-3 rounded-lg flex flex-col items-center justify-center transition"> | |
| <i class="fas fa-question-circle text-xl mb-2"></i> | |
| <span class="text-sm">Aide</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Transfer Section --> | |
| <div id="transfer-section" class="hidden bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Effectuer un virement</h2> | |
| <button id="hide-transfer-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <div class="lg:col-span-3"> | |
| <form id="transfer-form"> | |
| <div class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="beneficiary-select" class="block text-sm font-medium text-gray-700 mb-1">Bénéficiaire</label> | |
| <select id="beneficiary-select" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Sélectionner un bénéficiaire</option> | |
| <option value="1">Marie Lambert</option> | |
| <option value="2">Thomas Martin</option> | |
| <option value="3">Sophie Dubois</option> | |
| <option value="new">+ Ajouter un nouveau bénéficiaire</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="beneficiary-iban" class="block text-sm font-medium text-gray-700 mb-1">IBAN</label> | |
| <input type="text" id="beneficiary-iban" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500" placeholder="FR76 XXXX XXXX XXXX XXXX XXXX XXX" readonly> | |
| </div> | |
| </div> | |
| <div id="new-beneficiary-fields" class="hidden space-y-4 bg-gray-50 p-4 rounded-lg"> | |
| <div> | |
| <label for="new-beneficiary-firstname" class="block text-sm font-medium text-gray-700 mb-1">Prénom</label> | |
| <input type="text" id="new-beneficiary-firstname" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="new-beneficiary-lastname" class="block text-sm font-medium text-gray-700 mb-1">Nom</label> | |
| <input type="text" id="new-beneficiary-lastname" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="new-beneficiary-iban" class="block text-sm font-medium text-gray-700 mb-1">IBAN</label> | |
| <input type="text" id="new-beneficiary-iban" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500" placeholder="FR76 XXXX XXXX XXXX XXXX XXXX XXX"> | |
| </div> | |
| <button type="button" id="save-beneficiary-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200"> | |
| Enregistrer le bénéficiaire | |
| </button> | |
| </div> | |
| <div> | |
| <label for="transfer-amount" class="block text-sm font-medium text-gray-700 mb-1">Montant</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500">€</span> | |
| </div> | |
| <input type="number" id="transfer-amount" class="w-full border border-gray-300 rounded-lg pl-8 pr-4 py-2 focus:ring-blue-500 focus:border-blue-500" placeholder="0.00"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="transfer-reference" class="block text-sm font-medium text-gray-700 mb-1">Référence</label> | |
| <input type="text" id="transfer-reference" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Libellé du virement"> | |
| </div> | |
| <div class="pt-2"> | |
| <button type="submit" id="confirm-transfer-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200"> | |
| Confirmer le virement | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6 lg:col-span-1"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-4">Résumé du virement</h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Solde actuel</span> | |
| <span id="current-balance" class="font-medium">4,728.50 €</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Montant du virement</span> | |
| <span id="transfer-amount-preview" class="font-medium">0.00 €</span> | |
| </div> | |
| <div class="border-t border-gray-200 my-2"></div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Nouveau solde</span> | |
| <span id="new-balance-preview" class="font-medium text-blue-800">4,728.50 €</span> | |
| </div> | |
| </div> | |
| <div id="security-verification" class="hidden mt-6 bg-white p-4 rounded-lg border border-gray-200"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-3">Vérification de sécurité</h4> | |
| <p class="text-xs text-gray-500 mb-3">Pour confirmer ce virement, veuillez entrer le code reçu par SMS.</p> | |
| <div class="flex justify-center space-x-2 mb-4" id="sms-code-container"> | |
| <!-- Digits will be added by JavaScript --> | |
| </div> | |
| <button id="confirm-sms-btn" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200"> | |
| Confirmer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Beneficiaries Section --> | |
| <div id="beneficiaries-section" class="hidden bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Vos bénéficiaires</h2> | |
| <button id="hide-beneficiaries-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="beneficiaries-list"> | |
| <!-- Beneficiaries cards will be added here --> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="add-beneficiary-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| Ajouter un bénéficiaire | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Insurance Section --> | |
| <div id="insurance-section" class="hidden bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Partner Credit Assurance</h2> | |
| <button id="hide-insurance-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-blue-50 rounded-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-shield-alt text-blue-800 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-blue-800">Protection Emprunteur</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4">Assurance qui couvre les risques de décès, invalidité et perte d'emploi pour votre crédit immobilier.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Couverture jusqu'à 300 000€</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Prise en charge des mensualités en cas d'incapacité</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Délai de carence réduit à 30 jours</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-blue-800 font-medium">À partir de 15€/mois</span> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 text-sm"> | |
| Souscrire | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 rounded-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-home text-green-800 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-green-800">Assurance Habitation</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4">Protection complète pour votre logement contre les dommages, vols et responsabilité civile.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Couverture des dommages matériels</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Protection contre le vol et le vandalisme</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Assistance 24h/24</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-800 font-medium">À partir de 12€/mois</span> | |
| <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 text-sm"> | |
| Souscrire | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-car text-purple-800 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-purple-800">Assurance Auto</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4">Protection tous risques pour votre véhicule avec assistance routière incluse.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Couverture tous risques</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Assistance 0km</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Véhicule de remplacement</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-purple-800 font-medium">À partir de 25€/mois</span> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 text-sm"> | |
| Souscrire | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 rounded-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-umbrella text-yellow-800 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-yellow-800">Assurance Voyage</h3> | |
| </div> | |
| <p class="text-gray-700 mb-4">Protection pour vos voyages à l'étranger avec couverture médicale et annulation.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Frais médicaux à l'étranger</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Rapatriement sanitaire</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Annulation et interruption de voyage</span> | |
| </li> | |
| </ul> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-800 font-medium">À partir de 5€/jour</span> | |
| <button class="bg-yellow-600 hover:bg-yellow-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 text-sm"> | |
| Souscrire | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Limits Section --> | |
| <div id="limits-section" class="hidden bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Vos plafonds de transaction</h2> | |
| <button id="hide-limits-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="bg-gray-50 rounded-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-700">Virements bancaires</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Actif</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Plafond quotidien</p> | |
| <p class="text-lg font-medium">2,000 €</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Plafond mensuel</p> | |
| <p class="text-lg font-medium">10,000 €</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Utilisation ce mois</p> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 35%"></div> | |
| </div> | |
| <span class="text-sm font-medium">3,500 €</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| Demander une augmentation | |
| </button> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-700">Paiements par carte</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Actif</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Plafond quotidien</p> | |
| <p class="text-lg font-medium">1,500 €</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Plafond mensuel</p> | |
| <p class="text-lg font-medium">7,500 €</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Utilisation ce mois</p> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 60%"></div> | |
| </div> | |
| <span class="text-sm font-medium">4,500 €</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| Demander une augmentation | |
| </button> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-700">Retraits d'espèces</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Actif</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Plafond quotidien</p> | |
| <p class="text-lg font-medium">500 €</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Plafond mensuel</p> | |
| <p class="text-lg font-medium">2,000 €</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Utilisation ce mois</p> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div> | |
| </div> | |
| <span class="text-sm font-medium">500 €</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| Demander une augmentation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Statement Section --> | |
| <div id="statement-section" class="hidden bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-700">Vos relevés bancaires</h2> | |
| <button id="hide-statement-btn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Sélectionnez une période</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm"> | |
| Ce mois-ci | |
| </button> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 px-4 py-2 rounded-lg text-sm"> | |
| Le mois dernier | |
| </button> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 px-4 py-2 rounded-lg text-sm"> | |
| Trimestre en cours | |
| </button> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 px-4 py-2 rounded-lg text-sm"> | |
| Année en cours | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Historique des relevés</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between items-center bg-white p-3 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Juillet 2023</p> | |
| <p class="text-sm text-gray-500">Du 01/07/2023 au 31/07/2023</p> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-download mr-1"></i>Télécharger | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-center bg-white p-3 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Juin 2023</p> | |
| <p class="text-sm text-gray-500">Du 01/06/2023 au 30/06/2023</p> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-download mr-1"></i>Télécharger | |
| </button> | |
| </div> | |
| <div class="flex justify-between items-center bg-white p-3 rounded-lg"> | |
| <div> | |
| <p class="font-medium">Mai 2023</p> | |
| <p class="text-sm text-gray-500">Du 01/05/2023 au 31/05/2023</p> | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| <i class="fas fa-download mr-1"></i>Télécharger | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Options d'export</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 px-4 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-file-pdf mr-1"></i>PDF | |
| </button> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 px-4 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-file-excel mr-1"></i>Excel | |
| </button> | |
| <button class="bg-blue-50 hover:bg-blue-100 text-blue-800 px-4 py-2 rounded-lg text-sm"> | |
| <i class="fas fa-file-csv mr-1"></i>CSV | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification --> | |
| <div id="notification" class="fixed bottom-4 right-4 w-80 bg-white rounded-lg shadow-lg p-4 hidden slide-in"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-0.5"> | |
| <i id="notification-icon" class="fas fa-info-circle text-blue-500 text-xl"></i> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <h3 id="notification-title" class="text-sm font-medium text-gray-900">Notification</h3> | |
| <p id="notification-message" class="mt-1 text-sm text-gray-500">Message de notification ici.</p> | |
| <button id="download-receipt" class="hidden mt-2 text-blue-600 hover:text-blue-800 text-xs font-medium"> | |
| <i class="fas fa-download mr-1"></i>Télécharger le bordereau | |
| </button> | |
| </div> | |
| </div> | |
| <button id="close-notification" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Login functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Create digit inputs for user ID (02883733) | |
| const userIdContainer = document.getElementById('user-id-container'); | |
| for (let i = 0; i < 8; i++) { | |
| const input = document.createElement('input'); | |
| input.type = 'text'; | |
| input.maxLength = 1; | |
| input.className = 'digit-input'; | |
| input.dataset.position = i; | |
| userIdContainer.appendChild(input); | |
| } | |
| // Create digit inputs for password (002873) | |
| const passwordContainer = document.getElementById('password-container'); | |
| for (let i = 0; i < 6; i++) { | |
| const input = document.createElement('input'); | |
| input.type = 'password'; | |
| input.maxLength = 1; | |
| input.className = 'digit-input'; | |
| input.dataset.position = i; | |
| passwordContainer.appendChild(input); | |
| } | |
| // Auto-focus and move between inputs | |
| const digitInputs = document.querySelectorAll('.digit-input'); | |
| digitInputs.forEach((input, index) => { | |
| input.addEventListener('input', function() { | |
| if (this.value.length === 1) { | |
| if (index < digitInputs.length - 1) { | |
| digitInputs[index + 1].focus(); | |
| } | |
| } | |
| }); | |
| input.addEventListener('keydown', function(e) { | |
| if (e.key === 'Backspace' && this.value.length === 0) { | |
| if (index > 0) { | |
| digitInputs[index - 1].focus(); | |
| } | |
| } | |
| }); | |
| }); | |
| // Login form submission | |
| const loginForm = document.getElementById('login-form'); | |
| loginForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Show loading spinner | |
| document.getElementById('login-text').classList.add('hidden'); | |
| document.getElementById('loading-spinner').classList.remove('hidden'); | |
| // Get entered values | |
| let userId = ''; | |
| let password = ''; | |
| for (let i = 0; i < 8; i++) { | |
| userId += document.querySelector(`#user-id-container input[data-position="${i}"]`).value || ''; | |
| } | |
| for (let i = 0; i < 6; i++) { | |
| password += document.querySelector(`#password-container input[data-position="${i}"]`).value || ''; | |
| } | |
| // Check credentials (02883733 / 002873) | |
| setTimeout(() => { | |
| if (userId === '02883733' && password === '002873') { | |
| // Successful login | |
| document.getElementById('login-page').classList.add('hidden'); | |
| document.getElementById('dashboard').classList.remove('hidden'); | |
| // Initialize dashboard | |
| initDashboard(); | |
| } else { | |
| // Show error | |
| document.getElementById('error-message').classList.remove('hidden'); | |
| // Reset form | |
| digitInputs.forEach(input => input.value = ''); | |
| digitInputs[0].focus(); | |
| } | |
| // Hide loading spinner | |
| document.getElementById('login-text').classList.remove('hidden'); | |
| document.getElementById('loading-spinner').classList.add('hidden'); | |
| }, 2000); | |
| }); | |
| // Logout button | |
| document.getElementById('logout-btn').addEventListener('click', function() { | |
| document.getElementById('dashboard').classList.add('hidden'); | |
| document.getElementById('login-page').classList.remove('hidden'); | |
| // Reset login form | |
| digitInputs.forEach(input => input.value = ''); | |
| document.getElementById('error-message').classList.add('hidden'); | |
| // Show logout notification | |
| showNotification('Déconnexion réussie', 'Vous avez été déconnecté avec succès.', 'check-circle', 'green'); | |
| }); | |
| // Initialize dashboard | |
| function initDashboard() { | |
| // Update IBAN when beneficiary changes | |
| document.getElementById('beneficiary-select').addEventListener('change', function() { | |
| const ibanField = document.getElementById('beneficiary-iban'); | |
| switch(this.value) { | |
| case '1': ibanField.value = 'FR76 3000 2005 0111 1243 6943 033'; break; | |
| case '2': ibanField.value = 'FR76 3000 2005 0111 1243 6943 044'; break; | |
| case '3': ibanField.value = 'FR76 3000 2005 0111 1243 6943 055'; break; | |
| default: ibanField.value = ''; | |
| } | |
| }); | |
| // Dashboard navigation button | |
| document.getElementById('dashboard-nav-btn').addEventListener('click', function() { | |
| hideAllSectionsExcept(''); | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| this.classList.add('bg-blue-700'); | |
| }); | |
| // Transfer navigation button | |
| document.getElementById('transfer-nav-btn').addEventListener('click', function() { | |
| document.getElementById('transfer-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('transfer-section'); | |
| document.getElementById('transfer-section').scrollIntoView({ behavior: 'smooth' }); | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| this.classList.add('bg-blue-700'); | |
| }); | |
| // Beneficiaries navigation button | |
| document.getElementById('beneficiaries-nav-btn').addEventListener('click', function() { | |
| document.getElementById('beneficiaries-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('beneficiaries-section'); | |
| document.getElementById('beneficiaries-section').scrollIntoView({ behavior: 'smooth' }); | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| this.classList.add('bg-blue-700'); | |
| }); | |
| // Card navigation button | |
| document.getElementById('card-nav-btn').addEventListener('click', function() { | |
| document.getElementById('card-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('card-section'); | |
| document.getElementById('card-section').scrollIntoView({ behavior: 'smooth' }); | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| this.classList.add('bg-blue-700'); | |
| }); | |
| // Insurance navigation button | |
| document.getElementById('insurance-nav-btn').addEventListener('click', function() { | |
| document.getElementById('insurance-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('insurance-section'); | |
| document.getElementById('insurance-section').scrollIntoView({ behavior: 'smooth' }); | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| this.classList.add('bg-blue-700'); | |
| }); | |
| // Limits navigation button | |
| document.getElementById('limits-nav-btn').addEventListener('click', function() { | |
| document.getElementById('limits-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('limits-section'); | |
| document.getElementById('limits-section').scrollIntoView({ behavior: 'smooth' }); | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| this.classList.add('bg-blue-700'); | |
| }); | |
| // Statement navigation button | |
| document.getElementById('statement-nav-btn').addEventListener('click', function() { | |
| document.getElementById('statement-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('statement-section'); | |
| document.getElementById('statement-section').scrollIntoView({ behavior: 'smooth' }); | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| this.classList.add('bg-blue-700'); | |
| }); | |
| // Load more transactions button | |
| document.getElementById('load-more-transactions').addEventListener('click', function() { | |
| const transactionsList = document.getElementById('transactions-list'); | |
| // Sample additional transactions | |
| const moreTransactions = [ | |
| { | |
| date: '01/06/2023', | |
| type: 'Paiement carte', | |
| description: 'Carrefour', | |
| amount: -42.15, | |
| isPositive: false | |
| }, | |
| { | |
| date: '28/05/2023', | |
| type: 'Virement', | |
| description: 'Thomas Martin', | |
| amount: 300.00, | |
| isPositive: true | |
| }, | |
| { | |
| date: '25/05/2023', | |
| type: 'Prélèvement', | |
| description: 'Free Mobile', | |
| amount: -19.99, | |
| isPositive: false | |
| } | |
| ]; | |
| moreTransactions.forEach(transaction => { | |
| const transactionItem = document.createElement('div'); | |
| transactionItem.className = 'transaction-item bg-white rounded-lg p-4 hover:shadow-md transition duration-200 fade-in'; | |
| transactionItem.innerHTML = ` | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">${transaction.date}</p> | |
| <p class="font-medium">${transaction.type}</p> | |
| <p class="text-sm text-gray-500">${transaction.description}</p> | |
| </div> | |
| <p class="${transaction.isPositive ? 'text-green-600' : 'text-red-600'} font-medium"> | |
| ${transaction.isPositive ? '+' : ''}${transaction.amount.toFixed(2)} € | |
| </p> | |
| </div> | |
| `; | |
| transactionsList.appendChild(transactionItem); | |
| }); | |
| }); | |
| // Generate beneficiaries cards | |
| generateBeneficiaries(); | |
| // Show card button | |
| document.getElementById('show-card-btn').addEventListener('click', function() { | |
| document.getElementById('card-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('card-section'); | |
| document.getElementById('card-section').scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| // Hide card button | |
| document.getElementById('hide-card-btn').addEventListener('click', function() { | |
| document.getElementById('card-section').classList.add('hidden'); | |
| }); | |
| // Quick transfer button | |
| document.getElementById('quick-transfer-btn').addEventListener('click', function() { | |
| document.getElementById('transfer-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('transfer-section'); | |
| document.getElementById('transfer-section').scrollIntoView({ behavior: 'smooth' }); | |
| // Also highlight the transfer nav button | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| document.getElementById('transfer-nav-btn').classList.add('bg-blue-700'); | |
| }); | |
| // Hide transfer button | |
| document.getElementById('hide-transfer-btn').addEventListener('click', function() { | |
| document.getElementById('transfer-section').classList.add('hidden'); | |
| }); | |
| // Beneficiaries button | |
| document.getElementById('beneficiaries-btn').addEventListener('click', function() { | |
| document.getElementById('beneficiaries-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('beneficiaries-section'); | |
| document.getElementById('beneficiaries-section').scrollIntoView({ behavior: 'smooth' }); | |
| // Also highlight the beneficiaries nav button | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| document.getElementById('beneficiaries-nav-btn').classList.add('bg-blue-700'); | |
| }); | |
| // Hide beneficiaries button | |
| document.getElementById('hide-beneficiaries-btn').addEventListener('click', function() { | |
| document.getElementById('beneficiaries-section').classList.add('hidden'); | |
| }); | |
| // Insurance button | |
| document.getElementById('insurance-btn').addEventListener('click', function() { | |
| document.getElementById('insurance-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('insurance-section'); | |
| document.getElementById('insurance-section').scrollIntoView({ behavior: 'smooth' }); | |
| // Also highlight the insurance nav button | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| document.getElementById('insurance-nav-btn').classList.add('bg-blue-700'); | |
| }); | |
| // Hide insurance button | |
| document.getElementById('hide-insurance-btn').addEventListener('click', function() { | |
| document.getElementById('insurance-section').classList.add('hidden'); | |
| }); | |
| // Limits button | |
| document.getElementById('limits-btn').addEventListener('click', function() { | |
| document.getElementById('limits-section').classList.remove('hidden'); | |
| hideAllSectionsExcept('limits-section'); | |
| document.getElementById('limits-section').scrollIntoView({ behavior: 'smooth' }); | |
| // Also highlight the limits nav button | |
| document.querySelectorAll('nav div').forEach(el => el.classList.remove('bg-blue-700')); | |
| document.getElementById('limits-nav-btn').classList.add('bg-blue-700'); | |
| }); | |
| // Hide limits button | |
| document.getElementById('hide-limits-btn').addEventListener('click', function() { | |
| document.getElementById('limits-section').classList.add('hidden'); | |
| }); | |
| // Hide statement button | |
| document.getElementById('hide-statement-btn').addEventListener('click', function() { | |
| document.getElementById('statement-section').classList.add('hidden'); | |
| }); | |
| // Add beneficiary button | |
| document.getElementById('add-beneficiary-btn').addEventListener('click', function() { | |
| document.getElementById('beneficiary-select').value = 'new'; | |
| document.getElementById('new-beneficiary-fields').classList.remove('hidden'); | |
| }); | |
| // Save beneficiary button | |
| document.getElementById('save-beneficiary-btn').addEventListener('click', function() { | |
| const firstName = document.getElementById('new-beneficiary-firstname').value; | |
| const lastName = document.getElementById('new-beneficiary-lastname').value; | |
| const iban = document.getElementById('new-beneficiary-iban').value; | |
| if (firstName && lastName && iban) { | |
| // In a real app, you would save this to a database | |
| showNotification('Bénéficiaire ajouté', `${firstName} ${lastName} a été ajouté à vos bénéficiaires.`, 'check-circle', 'green'); | |
| // Reset form | |
| document.getElementById('new-beneficiary-firstname').value = ''; | |
| document.getElementById('new-beneficiary-lastname').value = ''; | |
| document.getElementById('new-beneficiary-iban').value = ''; | |
| document.getElementById('new-beneficiary-fields').classList.add('hidden'); | |
| document.getElementById('beneficiary-select').value = ''; | |
| } else { | |
| showNotification('Erreur', 'Veuillez remplir tous les champs.', 'exclamation-circle', 'red'); | |
| } | |
| }); | |
| // Beneficiary select change | |
| document.getElementById('beneficiary-select').addEventListener('change', function() { | |
| if (this.value === 'new') { | |
| document.getElementById('new-beneficiary-fields').classList.remove('hidden'); | |
| } else { | |
| document.getElementById('new-beneficiary-fields').classList.add('hidden'); | |
| } | |
| }); | |
| // Transfer amount preview | |
| document.getElementById('transfer-amount').addEventListener('input', function() { | |
| const amount = parseFloat(this.value) || 0; | |
| const currentBalance = parseFloat(document.getElementById('account-balance').textContent.replace(/[^0-9.-]+/g, '')); | |
| const newBalance = currentBalance - amount; | |
| document.getElementById('transfer-amount-preview').textContent = amount.toFixed(2) + ' €'; | |
| document.getElementById('new-balance-preview').textContent = newBalance.toFixed(2) + ' €'; | |
| }); | |
| // Transfer form submission | |
| document.getElementById('transfer-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const amount = parseFloat(document.getElementById('transfer-amount').value); | |
| const beneficiary = document.getElementById('beneficiary-select').value; | |
| const reference = document.getElementById('transfer-reference').value; | |
| if (!amount || amount <= 0) { | |
| showNotification('Erreur', 'Veuillez entrer un montant valide.', 'exclamation-circle', 'red'); | |
| return; | |
| } | |
| if (!beneficiary) { | |
| showNotification('Erreur', 'Veuillez sélectionner un bénéficiaire.', 'exclamation-circle', 'red'); | |
| return; | |
| } | |
| // For large amounts, show security verification | |
| if (amount > 500) { | |
| document.getElementById('security-verification').classList.remove('hidden'); | |
| // Generate random 4-digit code | |
| const code = Math.floor(1000 + Math.random() * 9000); | |
| // Create digit inputs for SMS code | |
| const smsCodeContainer = document.getElementById('sms-code-container'); | |
| smsCodeContainer.innerHTML = ''; | |
| for (let i = 0; i < 4; i++) { | |
| const input = document.createElement('input'); | |
| input.type = 'text'; | |
| input.maxLength = 1; | |
| input.className = 'digit-input'; | |
| input.dataset.position = i; | |
| smsCodeContainer.appendChild(input); | |
| } | |
| // Focus first digit | |
| smsCodeContainer.querySelector('input').focus(); | |
| // Auto-move between inputs | |
| const smsInputs = smsCodeContainer.querySelectorAll('input'); | |
| smsInputs.forEach((input, index) => { | |
| input.addEventListener('input', function() { | |
| if (this.value.length === 1) { | |
| if (index < smsInputs.length - 1) { | |
| smsInputs[index + 1].focus(); | |
| } | |
| } | |
| }); | |
| input.addEventListener('keydown', function(e) { | |
| if (e.key === 'Backspace' && this.value.length === 0) { | |
| if (index > 0) { | |
| smsInputs[index - 1].focus(); | |
| } | |
| } | |
| }); | |
| }); | |
| // Confirm SMS button | |
| document.getElementById('confirm-sms-btn').addEventListener('click', function() { | |
| let enteredCode = ''; | |
| smsInputs.forEach(input => { | |
| enteredCode += input.value || ''; | |
| }); | |
| if (enteredCode === code.toString()) { | |
| // Code is correct, proceed with transfer | |
| processTransfer(amount, beneficiary, reference); | |
| document.getElementById('security-verification').classList.add('hidden'); | |
| } else { | |
| showNotification('Erreur', 'Le code de vérification est incorrect.', 'exclamation-circle', 'red'); | |
| } | |
| }); | |
| // Show notification with the code (in a real app, this would be sent via SMS) | |
| showNotification('Code de vérification', `Votre code de vérification est ${code}.`, 'mobile-alt', 'blue'); | |
| } else { | |
| // Small amount, no verification needed | |
| processTransfer(amount, beneficiary, reference); | |
| } | |
| }); | |
| // Toggle card number visibility | |
| let cardNumberVisible = false; | |
| document.getElementById('toggle-card-number').addEventListener('click', function() { | |
| cardNumberVisible = !cardNumberVisible; | |
| if (cardNumberVisible) { | |
| document.getElementById('card-number').textContent = '1234 5678 9012 3456'; | |
| this.innerHTML = '<i class="fas fa-eye-slash"></i>'; | |
| } else { | |
| document.getElementById('card-number').textContent = '•••• •••• •••• 3456'; | |
| this.innerHTML = '<i class="fas fa-eye"></i>'; | |
| } | |
| }); | |
| // Card state | |
| let isCardBlocked = false; | |
| // Toggle CVV visibility | |
| let cvvVisible = false; | |
| document.getElementById('toggle-card-cvv').addEventListener('click', function() { | |
| if (!isCardBlocked) { | |
| cvvVisible = !cvvVisible; | |
| if (cvvVisible) { | |
| document.getElementById('card-cvv').textContent = '123'; | |
| this.innerHTML = '<i class="fas fa-eye-slash"></i>'; | |
| } else { | |
| document.getElementById('card-cvv').textContent = '•••'; | |
| this.innerHTML = '<i class="fas fa-eye"></i>'; | |
| } | |
| } | |
| }); | |
| // Block card button | |
| document.querySelector('.card-actions button:first-child').addEventListener('click', function() { | |
| isCardBlocked = !isCardBlocked; | |
| if (isCardBlocked) { | |
| // Show card as blocked | |
| document.querySelectorAll('.card-flip').forEach(card => { | |
| card.classList.add('opacity-50'); | |
| card.classList.add('bg-red-100'); | |
| }); | |
| document.getElementById('card-number').textContent = '•••• •••• •••• ••••'; | |
| document.getElementById('card-cvv').textContent = '•••'; | |
| this.innerHTML = '<i class="fas fa-unlock mr-2"></i>Débloquer la carte'; | |
| showNotification('Carte bloquée', 'Votre carte a été bloquée avec succès.', 'lock', 'red'); | |
| } else { | |
| // Show card as unblocked | |
| document.querySelectorAll('.card-flip').forEach(card => { | |
| card.classList.remove('opacity-50'); | |
| card.classList.remove('bg-red-100'); | |
| }); | |
| document.getElementById('card-number').textContent = '•••• •••• •••• 3456'; | |
| this.innerHTML = '<i class="fas fa-lock mr-2"></i>Bloquer la carte'; | |
| showNotification('Carte débloquée', 'Votre carte a été débloquée avec succès.', 'unlock', 'green'); | |
| } | |
| }); | |
| // Close notification | |
| document.getElementById('close-notification').addEventListener('click', function() { | |
| document.getElementById('notification').classList.add('hidden'); | |
| }); | |
| // Auto logout after 10 minutes of inactivity | |
| let inactivityTimer; | |
| function resetInactivityTimer() { | |
| clearTimeout(inactivityTimer); | |
| inactivityTimer = setTimeout(logoutDueToInactivity, 10 * 60 * 1000); // 10 minutes | |
| } | |
| function logoutDueToInactivity() { | |
| document.getElementById('dashboard').classList.add('hidden'); | |
| document.getElementById('login-page').classList.remove('hidden'); | |
| // Reset login form | |
| digitInputs.forEach(input => input.value = ''); | |
| document.getElementById('error-message').classList.add('hidden'); | |
| showNotification('Déconnexion automatique', 'Vous avez été déconnecté pour cause d\'inactivité.', 'clock', 'blue'); | |
| } | |
| // Reset timer on any user activity | |
| window.addEventListener('mousemove', resetInactivityTimer); | |
| window.addEventListener('keypress', resetInactivityTimer); | |
| window.addEventListener('click', resetInactivityTimer); | |
| window.addEventListener('scroll', resetInactivityTimer); | |
| // Start the timer | |
| resetInactivityTimer(); | |
| } | |
| // Helper function to hide all sections except one | |
| function hideAllSectionsExcept(sectionId) { | |
| const sections = ['card-section', 'transfer-section', 'beneficiaries-section', 'insurance-section', 'limits-section', 'statement-section']; | |
| sections.forEach(id => { | |
| if (id !== sectionId) { | |
| document.getElementById(id).classList.add('hidden'); | |
| } | |
| }); | |
| } | |
| // Helper function to generate beneficiaries cards | |
| function generateBeneficiaries() { | |
| const beneficiariesList = document.getElementById('beneficiaries-list'); | |
| beneficiariesList.innerHTML = ''; | |
| const beneficiaries = [ | |
| { | |
| name: 'Marie Lambert', | |
| type: 'Virement régulier', | |
| iban: 'FR76 **** **** **** **** **** 6789', | |
| date: '15/03/2023', | |
| initials: 'ML', | |
| color: 'blue' | |
| }, | |
| { | |
| name: 'Thomas Martin', | |
| type: 'Virement occasionnel', | |
| iban: 'FR76 **** **** **** **** **** 1234', | |
| date: '22/04/2023', | |
| initials: 'TM', | |
| color: 'green' | |
| }, | |
| { | |
| name: 'Sophie Dubois', | |
| type: 'Virement régulier', | |
| iban: 'FR76 **** **** **** **** **** 9876', | |
| date: '05/05/2023', | |
| initials: 'SD', | |
| color: 'purple' | |
| } | |
| ]; | |
| beneficiaries.forEach(beneficiary => { | |
| const card = document.createElement('div'); | |
| card.className = 'bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition duration-200'; | |
| card.innerHTML = ` | |
| <div class="flex items-start space-x-3 mb-4"> | |
| <div class="flex-shrink-0 h-12 w-12 bg-${beneficiary.color}-100 rounded-full flex items-center justify-center"> | |
| <span class="text-${beneficiary.color}-800 font-medium text-lg">${beneficiary.initials}</span> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-900">${beneficiary.name}</h3> | |
| <p class="text-sm text-gray-500">${beneficiary.type}</p> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-500">IBAN</span> | |
| <span class="text-sm font-medium">${beneficiary.iban}</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-500">Date d'ajout</span> | |
| <span class="text-sm font-medium">${beneficiary.date}</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex space-x-2"> | |
| <button class="flex-1 bg-blue-50 hover:bg-blue-100 text-blue-600 py-2 px-3 rounded text-sm"> | |
| <i class="fas fa-edit mr-1"></i> Modifier | |
| </button> | |
| <button class="flex-1 bg-red-50 hover:bg-red-100 text-red-600 py-2 px-3 rounded text-sm"> | |
| <i class="fas fa-trash-alt mr-1"></i> Supprimer | |
| </button> | |
| </div> | |
| `; | |
| beneficiariesList.appendChild(card); | |
| }); | |
| } | |
| // Helper function to process a transfer | |
| function processTransfer(amount, beneficiaryId, reference) { | |
| // Get current balance | |
| const currentBalanceElement = document.getElementById('account-balance'); | |
| let currentBalance = parseFloat(currentBalanceElement.textContent.replace(/[^0-9.-]+/g, '')); | |
| // Check if sufficient funds | |
| if (amount > currentBalance) { | |
| showNotification('Erreur', 'Fonds insuffisants pour effectuer ce virement.', 'exclamation-circle', 'red'); | |
| return; | |
| } | |
| // Update balance | |
| const newBalance = currentBalance - amount; | |
| currentBalanceElement.textContent = newBalance.toFixed(2) + ' €'; | |
| // Update transfer preview | |
| document.getElementById('new-balance-preview').textContent = newBalance.toFixed(2) + ' €'; | |
| // Get beneficiary name | |
| let beneficiaryName = ''; | |
| switch(beneficiaryId) { | |
| case '1': beneficiaryName = 'Marie Lambert'; break; | |
| case '2': beneficiaryName = 'Thomas Martin'; break; | |
| case '3': beneficiaryName = 'Sophie Dubois'; break; | |
| default: beneficiaryName = 'Nouveau bénéficiaire'; | |
| } | |
| // Add to transactions list | |
| const transactionsList = document.getElementById('transactions-list'); | |
| const date = new Date(); | |
| const formattedDate = date.toLocaleDateString('fr-FR', { | |
| day: '2-digit', | |
| month: '2-digit', | |
| year: 'numeric' | |
| }); | |
| const row = document.createElement('tr'); | |
| row.className = 'transaction-item hover:bg-gray-50 transition duration-150 fade-in'; | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formattedDate}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Virement</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${beneficiaryName}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">FR76 **** **** **** **** **** ${Math.floor(1000 + Math.random() * 9000)}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">-${amount.toFixed(2)} €</td> | |
| `; | |
| // Insert at the top | |
| if (transactionsList.firstChild) { | |
| transactionsList.insertBefore(row, transactionsList.firstChild); | |
| } else { | |
| transactionsList.appendChild(row); | |
| } | |
| // Reset form | |
| document.getElementById('transfer-form').reset(); | |
| document.getElementById('transfer-amount-preview').textContent = '0.00 €'; | |
| document.getElementById('new-balance-preview').textContent = newBalance.toFixed(2) + ' €'; | |
| // Show success notification with download option | |
| showNotification('Virement effectué', | |
| `Votre virement de ${amount.toFixed(2)}€ a été effectué avec succès.`, | |
| 'check-circle', | |
| 'green', | |
| true, | |
| amount, | |
| beneficiaryName, | |
| reference, | |
| formattedDate); | |
| // Hide transfer section after 3 seconds | |
| setTimeout(() => { | |
| document.getElementById('transfer-section').classList.add('hidden'); | |
| }, 3000); | |
| } | |
| // Helper function to show notifications | |
| function showNotification(title, message, icon, color, showDownload = false, amount = 0, beneficiary = '', reference = '', date = '') { | |
| const notification = document.getElementById('notification'); | |
| const iconElement = document.getElementById('notification-icon'); | |
| const titleElement = document.getElementById('notification-title'); | |
| const messageElement = document.getElementById('notification-message'); | |
| // Set notification content | |
| titleElement.textContent = title; | |
| messageElement.textContent = message; | |
| iconElement.className = `fas fa-${icon} text-${color}-500 text-xl`; | |
| // Add download button if needed | |
| const downloadBtn = document.getElementById('download-receipt'); | |
| if (downloadBtn) { | |
| if (showDownload) { | |
| downloadBtn.classList.remove('hidden'); | |
| downloadBtn.onclick = function() { | |
| generateReceipt(amount, beneficiary, reference, date); | |
| }; | |
| } else { | |
| downloadBtn.classList.add('hidden'); | |
| } | |
| } | |
| // Show notification | |
| notification.classList.remove('hidden'); | |
| notification.classList.add('slide-in'); | |
| // Auto-hide after 5 seconds | |
| setTimeout(() => { | |
| notification.classList.add('hidden'); | |
| }, 5000); | |
| } | |
| // Function to generate and download receipt | |
| function generateReceipt(amount, beneficiary, reference, date) { | |
| // Create receipt content | |
| const receiptContent = ` | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Bordereau de virement - DEA Bank</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 20px; } | |
| .header { text-align: center; margin-bottom: 30px; } | |
| .logo { font-size: 24px; font-weight: bold; color: #1e40af; } | |
| .title { font-size: 18px; margin-top: 10px; } | |
| .details { width: 100%; border-collapse: collapse; margin-top: 20px; } | |
| .details th, .details td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } | |
| .details th { background-color: #f8fafc; } | |
| .footer { margin-top: 30px; font-size: 12px; color: #666; text-align: center; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="logo">DEA BANK</div> | |
| <div class="title">Bordereau de virement</div> | |
| </div> | |
| <table class="details"> | |
| <tr> | |
| <th>Date du virement</th> | |
| <td>${date}</td> | |
| </tr> | |
| <tr> | |
| <th>Montant</th> | |
| <td>${amount.toFixed(2)} €</td> | |
| </tr> | |
| <tr> | |
| <th>Bénéficiaire</th> | |
| <td>${beneficiary}</td> | |
| </tr> | |
| <tr> | |
| <th>Référence</th> | |
| <td>${reference || 'Non spécifiée'}</td> | |
| </tr> | |
| <tr> | |
| <th>Numéro de transaction</th> | |
| <td>${'TR' + Date.now().toString().slice(-8)}</td> | |
| </tr> | |
| </table> | |
| <div class="footer"> | |
| <p>Ce document fait foi de votre virement bancaire.</p> | |
| <p>Conservez-le pour vos archives.</p> | |
| <p>DEA Bank - ${new Date().getFullYear()}</p> | |
| </div> | |
| <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=Anselmehacklab/dea-bank-2-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |
| `; | |
| // Create blob and download link | |
| const blob = new Blob([receiptContent], { type: 'text/html' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `Bordereau_virement_${date.replace(/\//g, '-')}.html`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |