Spaces:

Dannylova31
/

bdev

Running

File size: 19,911 Bytes

7f8b3fa

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-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 {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .category-icon {
            transition: all 0.3s ease;
        }
        .category-card:hover .category-icon {
            transform: scale(1.1) rotate(5deg);
        }
        #confirmation {
            display: none;
        }
        .urgent-checked {
            background-color: rgba(239, 68, 68, 0.1);
            border-color: #ef4444;
        }
        .urgent-label {
            transition: all 0.3s ease;
        }
        input:checked ~ .urgent-label {
            color: #ef4444;
            font-weight: 600;
        }
    </style>

<style>
#block-container > div:first-child {
    display: none !important;
}
</style>

</head>
<body class="bg-gray-50 min-h-screen">
    <header class="bg-gradient-to-r from-indigo-600 to-purple-700 text-white shadow-lg">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <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>
                </div>
            </div>
        </div>
    </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 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">
                    <!-- Informations client -->
                    <div class="space-y-4">
                        <h3 class="text-xl font-semibold text-gray-700 border-b pb-2">Vos informations</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="nom" class="block text-sm font-medium text-gray-700 mb-1">Nom complet *</label>
                                <input type="text" id="nom" name="nom" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label for="entreprise" class="block text-sm font-medium text-gray-700 mb-1">Nom de l'entreprise</label>
                                <input type="text" id="entreprise" name="entreprise" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                                <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label for="telephone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone *</label>
                                <input type="tel" id="telephone" name="telephone" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                        </div>
                        <div>
                            <label for="adresse" class="block text-sm font-medium text-gray-700 mb-1">Adresse *</label>
                            <input type="text" id="adresse" name="adresse" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>

                    <!-- Urgence -->
                    <div class="space-y-4">
                        <h3 class="text-xl font-semibold text-gray-700 border-b pb-2">Urgence de la demande</h3>
                        <div class="flex items-center">
                            <input id="urgent" name="urgent" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                            <label for="urgent" class="ml-2 block text-sm font-medium text-gray-700">
                                Cette demande est urgente <span class="text-red-500 font-bold">(Priorité maximum)</span>
                            </label>
                        </div>
                    </div>

                    <!-- Domaine d'activité -->
                    <div class="space-y-4">
                        <h3 class="text-xl font-semibold text-gray-700 border-b pb-2">Domaine d'activité concerné *</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" id="domainesContainer">
                            <!-- Domaines will be inserted by JS -->
                        </div>
                    </div>

                    <!-- Détails de la demande -->
                    <div class="space-y-4">
                        <h3 class="text-xl font-semibold text-gray-700 border-b pb-2">Détails de votre demande *</h3>
                        <div>
                            <label for="commentaire" class="block text-sm font-medium text-gray-700 mb-1">Votre demande</label>
                            <textarea id="commentaire" name="commentaire" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                        </div>
                        <div>
                            <label for="fichiers" class="block text-sm font-medium text-gray-700 mb-1">Joindre des fichiers (optionnel)</label>
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                                <div class="space-y-1 text-center">
                                    <div class="flex text-sm text-gray-600">
                                        <label for="fichiers" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
                                            <span>Télécharger un fichier</span>
                                            <input id="fichiers" name="fichiers" type="file" class="sr-only" multiple>
                                        </label>
                                        <p class="pl-1">ou glisser-déposer</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PDF, DOCX, JPG, PNG jusqu'à 10MB</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center">
                        <input id="confidentialite" name="confidentialite" type="checkbox" required class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="confidentialite" class="ml-2 block text-sm text-gray-700">
                            Je consens au traitement de mes données personnelles conformément à la politique de confidentialité.
                        </label>
                    </div>

                    <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>
                    </div>
                </form>

                <!-- Confirmation -->
                <div id="confirmation" class="text-center py-12 fade-in">
                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
                        <i class="fas fa-check text-green-600 text-xl"></i>
                    </div>
                    <h3 class="mt-3 text-lg font-medium text-gray-900">Demande envoyée avec succès !</h3>
                    <div class="mt-2 text-sm text-gray-500">
                        <p>Nous avons bien reçu votre demande et vous contacterons dans les plus brefs délais.</p>
                    </div>
                    <div class="mt-6">
                        <button onclick="resetForm()" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            <i class="fas fa-plus mr-2"></i> Nouvelle demande
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <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">
                    <h2 class="text-xl font-bold flex items-center">
                        <i class="fas fa-chart-line mr-2"></i> Business DEVELOPING
                    </h2>
                    <p class="text-gray-400 mt-1">Votre partenaire pour le développement de votre entreprise</p>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-6 pt-6 text-sm text-gray-400 text-center">
                <p>© 2025 Business DEVELOPING soim. Tous droits réservés.</p>
            </div>
        </div>
    </footer>

    <script>
        // Domaines d'activité avec icônes
        const domaines = [
            { id: 'telecom', nom: 'Télécommunications', icon: 'fa-tower-cell' },
            { id: 'informatique', nom: 'Informatique & services numériques', icon: 'fa-laptop-code' },
            { id: 'seo', nom: 'Référencement SEO & visibilité en ligne', icon: 'fa-magnifying-glass-chart' },
            { id: 'notoriete', nom: 'Création de notoriété / image de marque', icon: 'fa-certificate' },
            { id: 'web', nom: 'Développement de sites web', icon: 'fa-globe' },
            { id: 'mobile', nom: 'Applications mobiles', icon: 'fa-mobile-screen' },
            { id: 'batiment', nom: 'Bâtiment & travaux publics', icon: 'fa-building' },
            { id: 'genie', nom: 'Génie civil', icon: 'fa-helmet-safety' },
            { id: 'electricite', nom: 'Électricité & installations techniques', icon: 'fa-bolt' },
            { id: 'securite', nom: 'Sécurité (physique et électronique)', icon: 'fa-shield-halved' },
            { id: 'etudes', nom: 'Bureaux d'études & ingénierie', icon: 'fa-file-pen' },
            { id: 'architecture', nom: 'Architecture & urbanisme', icon: 'fa-ruler-combined' },
            { id: 'creation', nom: 'Création d'entreprise de A à Z', icon: 'fa-lightbulb' },
            { id: 'gestion', nom: 'Gestion de projet & accompagnement stratégique', icon: 'fa-diagram-project' }
        ];

        // Afficher les domaines d'activité
        function afficherDomaines() {
            const container = document.getElementById('domainesContainer');
            container.innerHTML = '';
            
            domaines.forEach(domaine => {
                const card = document.createElement('div');
                card.className = 'category-card p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition duration-150 ease-in-out';
                card.innerHTML = `
                    <div class="flex items-center">
                        <div class="mr-3 p-2 bg-blue-100 rounded-full">
                            <i class="fas ${domaine.icon} text-blue-600 category-icon"></i>
                        </div>
                        <div>
                            <input type="radio" id="${domaine.id}" name="domaine" value="${domaine.nom}" class="hidden peer" required>
                            <label for="${domaine.id}" class="text-sm font-medium text-gray-700 peer-checked:text-blue-600 cursor-pointer">${domaine.nom}</label>
                        </div>
                    </div>
                `;
                container.appendChild(card);
                
                // Gérer le clic sur la carte
                card.addEventListener('click', () => {
                    const radio = card.querySelector('input[type="radio"]');
                    radio.checked = true;
                    
                    // Mise à jour du style pour toutes les cartes
                    document.querySelectorAll('.category-card').forEach(c => {
                        if (c === card) {
                            c.classList.add('border-blue-500', 'bg-blue-50');
                        } else {
                            c.classList.remove('border-blue-500', 'bg-blue-50');
                        }
                    });
                });
            });
        }

        // Gérer la soumission du formulaire
        document.getElementById('demandeForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Simuler l'envoi (en production, vous utiliseriez AJAX ou Fetch)
            setTimeout(() => {
                document.getElementById('demandeForm').style.display = 'none';
                document.getElementById('confirmation').style.display = 'block';
                
                // Afficher les données du formulaire (pour démo, serait envoyé au serveur en réalité)
                const formData = new FormData(this);
                console.log('Données du formulaire:', Object.fromEntries(formData));
            }, 1000);
        });

        // Réinitialiser le formulaire
        function resetForm() {
            document.getElementById('demandeForm').reset();
            document.getElementById('demandeForm').style.display = 'block';
            document.getElementById('confirmation').style.display = 'none';
            
            // Réinitialiser le style des cartes de domaine
            document.querySelectorAll('.category-card').forEach(c => {
                c.classList.remove('border-blue-500', 'bg-blue-50');
            });
        }

        // 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();
            
            // Gestion glisser-déposer pour les fichiers
            const dropZone = document.querySelector('.border-dashed');
            const fileInput = document.getElementById('fichiers');
            
            dropZone.addEventListener('dragover', (e) => {
                e.preventDefault();
                dropZone.classList.add('border-blue-500', 'bg-blue-50');
            });
            
            dropZone.addEventListener('dragleave', () => {
                dropZone.classList.remove('border-blue-500', 'bg-blue-50');
            });
            
            dropZone.addEventListener('drop', (e) => {
                e.preventDefault();
                dropZone.classList.remove('border-blue-500', 'bg-blue-50');
                fileInput.files = e.dataTransfer.files;
            });
        });
    </script>
</body>
</html>