Spaces:

Dannylova31
/

bdev

Running

App Files Files Community

bdev / index.html

Dannylova31

Rename index_nologo.html to index.html

aa85d12 verified 8 months ago

raw

history blame contribute delete

19.9 kB

	<!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>