Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RelanceZen - Gestion des relances clients</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-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 3px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-indigo-600 text-white shadow-md"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-bell text-2xl"></i> | |
| <h1 class="text-2xl font-bold">RelanceZen</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:text-indigo-200 transition">Accueil</a></li> | |
| <li><a href="#" class="hover:text-indigo-200 transition">Clients</a></li> | |
| <li><a href="#" class="hover:text-indigo-200 transition">Statistiques</a></li> | |
| <li><a href="#" class="hover:text-indigo-200 transition">Paramètres</a></li> | |
| </ul> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-xl cursor-pointer"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span> | |
| </div> | |
| <div class="h-8 w-8 rounded-full bg-indigo-400 flex items-center justify-center cursor-pointer"> | |
| <span class="text-white font-medium">JD</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-8"> | |
| <!-- Upload Section --> | |
| <section class="bg-white rounded-lg shadow-md p-6 fade-in"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Importer des clients</h2> | |
| <button id="helpBtn" class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| </div> | |
| <div id="helpText" class="hidden bg-indigo-50 text-indigo-800 p-4 rounded-lg mb-6"> | |
| <p class="mb-2">Format accepté : fichier CSV ou Excel avec les colonnes :</p> | |
| <ul class="list-disc pl-5"> | |
| <li>Nom du client</li> | |
| <li>Email</li> | |
| <li>Montant dû</li> | |
| <li>Date d'échéance</li> | |
| </ul> | |
| </div> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-indigo-400 transition cursor-pointer"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i> | |
| <p class="text-gray-600 mb-2">Glissez-déposez votre fichier ici</p> | |
| <p class="text-sm text-gray-500 mb-4">ou</p> | |
| <label for="fileUpload" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition cursor-pointer"> | |
| Sélectionner un fichier | |
| </label> | |
| <input type="file" id="fileUpload" class="hidden" accept=".csv, .xlsx, .xls"> | |
| </div> | |
| </div> | |
| <div id="fileInfo" class="hidden mt-4 bg-gray-100 p-3 rounded-md"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-excel text-green-500 mr-2"></i> | |
| <span id="fileName" class="font-medium">clients.xlsx</span> | |
| </div> | |
| <button id="removeFile" class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <p class="text-right text-xs text-gray-500 mt-1">100% importé</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Client Table --> | |
| <section class="bg-white rounded-lg shadow-md overflow-hidden fade-in"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Suivi des relances</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-md text-sm hover:bg-indigo-200 transition"> | |
| <i class="fas fa-filter mr-1"></i> Filtrer | |
| </button> | |
| <button class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-md text-sm hover:bg-indigo-200 transition"> | |
| <i class="fas fa-download mr-1"></i> Exporter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto custom-scrollbar"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <span class="text-indigo-600 font-medium">AB</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Alexandre Bernard</div> | |
| <div class="text-sm text-gray-500">[email protected]</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">1,250.00 €</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">15/06/2023</div> | |
| <div class="text-xs text-red-500">+7 jours</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> | |
| En retard | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <span class="text-green-600 font-medium">CD</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Claire Dubois</div> | |
| <div class="text-sm text-gray-500">[email protected]</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">3,420.50 €</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">20/06/2023</div> | |
| <div class="text-xs text-yellow-500">Aujourd'hui</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| À échéance | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <span class="text-blue-600 font-medium">EM</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Élodie Martin</div> | |
| <div class="text-sm text-gray-500">[email protected]</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">850.00 €</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">25/06/2023</div> | |
| <div class="text-xs text-gray-500">Dans 5 jours</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> | |
| À venir | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <input type="checkbox" class="rounded text-indigo-600"> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <span class="text-purple-600 font-medium">TP</span> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Thomas Petit</div> | |
| <div class="text-sm text-gray-500">[email protected]</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">2,150.00 €</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">10/06/2023</div> | |
| <div class="text-xs text-green-500">Payé</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Réglé | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="flex items-center justify-between mt-6"> | |
| <div class="text-sm text-gray-500"> | |
| Affichage de <span class="font-medium">1</span> à <span class="font-medium">4</span> sur <span class="font-medium">12</span> clients | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50"> | |
| Précédent | |
| </button> | |
| <button class="px-3 py-1 border rounded-md text-sm bg-indigo-600 text-white hover:bg-indigo-700"> | |
| 1 | |
| </button> | |
| <button class="px-3 py-1 border rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50"> | |
| 2 | |
| </button> | |
| <button class="px-3 py-1 border rounded-md text-sm bg-white text-gray-700 hover:bg-gray-50"> | |
| Suivant | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-8"> | |
| <!-- Send Reminder --> | |
| <section class="bg-white rounded-lg shadow-md p-6 fade-in"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Envoyer une relance</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Sélectionnez des clients</label> | |
| <select multiple class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 h-32"> | |
| <option>Alexandre Bernard</option> | |
| <option selected>Claire Dubois</option> | |
| <option>Élodie Martin</option> | |
| <option>Thomas Petit</option> | |
| </select> | |
| <p class="mt-1 text-xs text-gray-500">Maintenez Ctrl (Windows) ou Cmd (Mac) pour sélectionner plusieurs clients</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Modèle de relance</label> | |
| <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"> | |
| <option>Relance standard</option> | |
| <option>Relance urgente</option> | |
| <option>Relance amicale</option> | |
| <option>Relance finale</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Personnaliser le message</label> | |
| <textarea rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">Bonjour [Nom], | |
| Nous vous rappelons que votre paiement de [Montant] était attendu pour le [Date]. | |
| Pourriez-vous nous faire parvenir votre règlement dans les plus brefs délais ? | |
| Cordialement, | |
| [Votre nom]</textarea> | |
| </div> | |
| <button id="sendReminderBtn" class="w-full bg-indigo-600 text-white py-3 px-4 rounded-md hover:bg-indigo-700 transition flex items-center justify-center pulse"> | |
| <i class="fas fa-paper-plane mr-2"></i> Envoyer la relance | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="bg-white rounded-lg shadow-md p-6 fade-in"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Témoignages</h2> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <span class="text-indigo-600 font-medium">SL</span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sophie Lambert</div> | |
| <div class="text-xs text-gray-500">Comptable - Entreprise ABC</div> | |
| <div class="mt-2 text-sm text-gray-700"> | |
| "RelanceZen a simplifié notre processus de relance. Nous gagnons plusieurs heures par semaine !" | |
| </div> | |
| <div class="mt-2 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <span class="text-indigo-600 font-medium">MB</span> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Marc Bertrand</div> | |
| <div class="text-xs text-gray-500">Freelance</div> | |
| <div class="mt-2 text-sm text-gray-700"> | |
| "En tant qu'indépendant, les relances prenaient trop de temps. Maintenant c'est automatisé et professionnel." | |
| </div> | |
| <div class="mt-2 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full bg-gray-100 text-indigo-600 py-2 px-4 rounded-md hover:bg-gray-200 transition"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un témoignage | |
| </button> | |
| </section> | |
| <!-- Stats --> | |
| <section class="bg-white rounded-lg shadow-md p-6 fade-in"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Statistiques</h2> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-indigo-700">Clients en retard</div> | |
| <div class="text-2xl font-bold text-indigo-900 mt-1">8</div> | |
| <div class="text-xs text-indigo-500 mt-1">+2 cette semaine</div> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-green-700">Clients réglés</div> | |
| <div class="text-2xl font-bold text-green-900 mt-1">24</div> | |
| <div class="text-xs text-green-500 mt-1">+5 cette semaine</div> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-yellow-700">Relances envoyées</div> | |
| <div class="text-2xl font-bold text-yellow-900 mt-1">32</div> | |
| <div class="text-xs text-yellow-500 mt-1">+12 cette semaine</div> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-blue-700">Montant récupéré</div> | |
| <div class="text-2xl font-bold text-blue-900 mt-1">12,450€</div> | |
| <div class="text-xs text-blue-500 mt-1">+3,200€ cette semaine</div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Email Modal --> | |
| <div id="emailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-900">Aperçu de l'email de relance</h3> | |
| <button id="closeModal" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 mb-4"> | |
| <div class="mb-4"> | |
| <span class="text-sm text-gray-500">De :</span> | |
| <p>[email protected]</p> | |
| </div> | |
| <div class="mb-4"> | |
| <span class="text-sm text-gray-500">À :</span> | |
| <p>[email protected]</p> | |
| </div> | |
| <div class="mb-4"> | |
| <span class="text-sm text-gray-500">Objet :</span> | |
| <p>Relance de paiement - Facture #12345</p> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <p>Bonjour Claire Dubois,</p> | |
| <p class="mt-2">Nous vous rappelons que votre paiement de 3,420.50 € était attendu pour le 20/06/2023.</p> | |
| <p class="mt-2">Pourriez-vous nous faire parvenir votre règlement dans les plus brefs délais ?</p> | |
| <p class="mt-4">Cordialement,<br>[Votre nom]</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelSend" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Annuler | |
| </button> | |
| <button id="confirmSend" class="px-4 py-2 bg-indigo-600 rounded-md text-sm font-medium text-white hover:bg-indigo-700"> | |
| <i class="fas fa-paper-plane mr-2"></i> Confirmer l'envoi | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Success Toast --> | |
| <div id="successToast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center space-x-3 hidden"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| <div> | |
| <p class="font-medium">Relance envoyée avec succès !</p> | |
| <p class="text-sm">L'email a été envoyé à 1 client.</p> | |
| </div> | |
| <button id="closeToast" class="text-white hover:text-green-100 ml-4"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 border-t border-gray-200 py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-3 mb-4 md:mb-0"> | |
| <i class="fas fa-bell text-indigo-600"></i> | |
| <span class="font-medium">RelanceZen</span> | |
| </div> | |
| <div class="text-sm text-gray-500"> | |
| © 2023 RelanceZen. Tous droits réservés. | |
| </div> | |
| <div class="flex space-x-4 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Toggle help text | |
| document.getElementById('helpBtn').addEventListener('click', function() { | |
| const helpText = document.getElementById('helpText'); | |
| helpText.classList.toggle('hidden'); | |
| }); | |
| // File upload simulation | |
| document.getElementById('fileUpload').addEventListener('change', function(e) { | |
| if (e.target.files.length > 0) { | |
| const fileName = e.target.files[0].name; | |
| document.getElementById('fileName').textContent = fileName; | |
| document.getElementById('fileInfo').classList.remove('hidden'); | |
| } | |
| }); | |
| // Remove file | |
| document.getElementById('removeFile').addEventListener('click', function() { | |
| document.getElementById('fileInfo').classList.add('hidden'); | |
| document.getElementById('fileUpload').value = ''; | |
| }); | |
| // Send reminder button | |
| document.getElementById('sendReminderBtn').addEventListener('click', function() { | |
| document.getElementById('emailModal').classList.remove('hidden'); | |
| }); | |
| // Close modal | |
| document.getElementById('closeModal').addEventListener('click', function() { | |
| document.getElementById('emailModal').classList.add('hidden'); | |
| }); | |
| // Cancel send | |
| document.getElementById('cancelSend').addEventListener('click', function() { | |
| document.getElementById('emailModal').classList.add('hidden'); | |
| }); | |
| // Confirm send | |
| document.getElementById('confirmSend').addEventListener('click', function() { | |
| document.getElementById('emailModal').classList.add('hidden'); | |
| // Show success toast | |
| const toast = document.getElementById('successToast'); | |
| toast.classList.remove('hidden'); | |
| // Hide toast after 5 seconds | |
| setTimeout(() => { | |
| toast.classList.add('hidden'); | |
| }, 5000); | |
| }); | |
| // Close toast | |
| document.getElementById('closeToast').addEventListener('click', function() { | |
| document.getElementById('successToast').classList.add('hidden'); | |
| }); | |
| </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=LudoSLN/relancezen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |