la posibilité de télecharger les infoirmation en pdr - Follow Up Deployment

index.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Business DEVELOPING | Demande Client</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .fade-in {
@@ -41,8 +43,14 @@
         <div class="container mx-auto px-4 py-6">
             <div class="flex justify-between items-center">
                 <div class="flex items-center space-x-2">
-                    <i class="fas fa-chart-line text-2xl"></i>
-                    <h1 class="text-2xl md:text-3xl font-bold">Business DEVELOPING</h1>
+                    <div class="relative">
+                        <i class="fas fa-chart-line text-2xl"></i>
+                        <i class="fas fa-crown absolute -top-3 -right-3 text-yellow-400 text-xs transform rotate-12"></i>
+                    </div>
+                    <div>
+                        <h1 class="text-2xl md:text-3xl font-bold">Business DEVELOPING</h1>
+                        <p class="text-xs text-white/80 -mt-1">By SOIM</p>
+                    </div>
                 </div>
                 <div class="hidden md:block">
                     <span class="bg-blue-500 px-3 py-1 rounded-full text-sm font-medium">DEMANDE CLIENT</span>
@@ -52,8 +60,8 @@
     </header>
 
     <main class="container mx-auto px-4 py-8">
-        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden fade-in">
-            <div class="p-6 md:p-8">
+        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden fade-in border-2 border-blue-500">
+            <div class="p-6 md:p-8 border-l-2 border-r-2 border-blue-500">
                 <h2 class="text-2xl font-bold text-gray-800 mb-6">Formulaire de Demande</h2>
                 
                 <form id="demandeForm" class="space-y-6">
@@ -136,7 +144,10 @@
                         </label>
                     </div>
 
-                    <div class="flex justify-end">
+                    <div class="flex justify-end space-x-4">
+                        <button type="button" onclick="generatePDF()" class="px-6 py-3 bg-gray-600 text-white font-medium rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
+                            <i class="fas fa-file-pdf mr-2"></i> Télécharger PDF
+                        </button>
                         <button type="submit" class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
                             <i class="fas fa-paper-plane mr-2"></i> Envoyer la demande
                         </button>
@@ -162,7 +173,7 @@
         </div>
     </main>
 
-    <footer class="bg-gray-800 text-white py-8 mt-12">
+    <footer class="bg-gray-800 text-white py-8 mt-12 border-t-4 border-gradient-to-r from-blue-500 to-blue-700">
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="mb-4 md:mb-0">
@@ -171,15 +182,9 @@
                     </h2>
                     <p class="text-gray-400 mt-1">Votre partenaire pour le développement de votre entreprise</p>
                 </div>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
-                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
-                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
-                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
-                </div>
             </div>
             <div class="border-t border-gray-700 mt-6 pt-6 text-sm text-gray-400 text-center">
-                <p>© 2023 Business DEVELOPING. Tous droits réservés.</p>
+                <p>© 2025 Business DEVELOPING soim. Tous droits réservés.</p>
             </div>
         </div>
     </footer>
@@ -268,6 +273,63 @@
             });
         }
 
+        // Generate PDF document
+        function generatePDF() {
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF();
+            
+            // Title
+            doc.setFontSize(20);
+            doc.setTextColor(40, 53, 147);
+            doc.text('Demande Client - Business DEVELOPING', 105, 20, { align: 'center' });
+            
+            // Client info section
+            doc.setFontSize(14);
+            doc.setTextColor(0, 0, 0);
+            doc.text('Informations du Client:', 14, 40);
+            
+            // Get form values
+            const formData = {
+                nom: document.getElementById('nom').value,
+                entreprise: document.getElementById('entreprise').value,
+                email: document.getElementById('email').value,
+                telephone: document.getElementById('telephone').value,
+                adresse: document.getElementById('adresse').value,
+                urgent: document.getElementById('urgent').checked ? 'OUI' : 'NON',
+                domaine: document.querySelector('input[name="domaine"]:checked')?.value || 'Non spécifié',
+                commentaire: document.getElementById('commentaire').value
+            };
+            
+            // Create table for client info
+            doc.autoTable({
+                startY: 45,
+                head: [['Champ', 'Valeur']],
+                body: [
+                    ['Nom complet', formData.nom],
+                    ['Entreprise', formData.entreprise || 'Non spécifié'],
+                    ['Email', formData.email],
+                    ['Téléphone', formData.telephone],
+                    ['Adresse', formData.adresse],
+                    ['Demande urgente', formData.urgent],
+                    ['Domaine', formData.domaine]
+                ],
+                theme: 'grid',
+                headStyles: {
+                    fillColor: [59, 130, 246],
+                    textColor: 255
+                }
+            });
+            
+            // Add comment section
+            doc.text('Détails de la demande:', 14, doc.autoTable.previous.finalY + 15);
+            doc.setFontSize(12);
+            doc.text(formData.commentaire, 14, doc.autoTable.previous.finalY + 25, { maxWidth: 180 });
+            
+            // Save the PDF
+            const date = new Date().toLocaleDateString();
+            doc.save(`Demande_Client_${formData.nom}_${date}.pdf`);
+        }
+
         // Initialiser la page
         document.addEventListener('DOMContentLoaded', () => {
             afficherDomaines();

prompts.txt

@@ -1,2 +1,9 @@
 fait moi une application web au nom de business  DEVELOPING pour encoder demande d'un client dans l'application le client doit mettere c'est information dans une zione commentaire et coucher quelle cdomande d'actuivier il veux entre c'etr dommaine : Télécommunications Informatique & services numériques Référencement SEO & visibilité en ligne Création de notoriété / image de marque Développement de sites web Applications mobiles Bâtiment & travaux publics Génie civil Électricité & installations techniques Sécurité (physique et électronique) Bureaux d’études & ingénierie Architecture & urbanisme Création d’entreprise de A à Z Gestion de projet & accompagnement stratégique
-dans vos application rajoute : addrese , et mettre la posibkité de mettre si c'est urgent ; est  change disgan de lapplication met la tres pro
+dans vos application rajoute : addrese , et mettre la posibkité de mettre si c'est urgent ; est  change disgan de lapplication met la tres pro
+supprime les logo des réseau 
+en bas met 2025
+MET LOGO UNE CORON ROI
+CHANGE ICI COMME CELA : © 2025 Business DEVELOPING soim. Tous droits réservés.
+met dans lentete en bas de Business developing : By SOIM
+MET UN CADRE BLUE DANS LE FIORMULAIRE
+la posibilité de télecharger les infoirmation en pdr