| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Captura de Prospectos - Hatillo Azua</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #38b2ac 0%, #319795 50%, #2c7a7b 100%); |
| } |
| .contact-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| } |
| #whatsappBtn { |
| transition: all 0.3s ease; |
| } |
| #whatsappBtn:hover { |
| transform: scale(1.05); |
| box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i class="fas fa-store-alt text-3xl mr-3"></i> |
| <h1 class="text-2xl md:text-3xl font-bold">Prospectos Hatillo Azua</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <span class="hidden md:inline-block">¡Amplía tu clientela!</span> |
| <button id="toggleFormBtn" class="bg-white text-teal-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition"> |
| <i class="fas fa-plus mr-2"></i>Nuevo Prospecto |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section id="formSection" class="bg-white rounded-lg shadow-md p-6 mb-8 transition-all duration-300"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Capturar Nuevo Prospecto</h2> |
| <form id="prospectForm" class="space-y-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="nombre" class="block text-sm font-medium text-gray-700 mb-1">Nombre Completo*</label> |
| <input type="text" id="nombre" name="nombre" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"> |
| </div> |
| <div> |
| <label for="telefono" class="block text-sm font-medium text-gray-700 mb-1">Teléfono*</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> |
| <span class="text-gray-500">+1</span> |
| </div> |
| <input type="tel" id="telefono" name="telefono" required |
| class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" |
| placeholder="809-555-1234" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div> |
| <label for="zona" class="block text-sm font-medium text-gray-700 mb-1">Zona en Hatillo*</label> |
| <select id="zona" name="zona" required |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"> |
| <option value="">Seleccione una zona</option> |
| <option value="Centro">Centro</option> |
| <option value="La Guama">La Guama</option> |
| <option value="Los Jovillos">Los Jovillos</option> |
| <option value="El Naranjo">El Naranjo</option> |
| <option value="La Colonia">La Colonia</option> |
| <option value="Otra">Otra</option> |
| </select> |
| </div> |
| <div> |
| <label for="interes" class="block text-sm font-medium text-gray-700 mb-1">Interés Principal</label> |
| <select id="interes" name="interes" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"> |
| <option value="">Seleccione un interés</option> |
| <option value="Electrodomésticos">Electrodomésticos</option> |
| <option value="Tecnología">Tecnología</option> |
| <option value="Hogar">Artículos para el hogar</option> |
| <option value="Alimentos">Productos alimenticios</option> |
| <option value="Otros">Otros</option> |
| </select> |
| </div> |
| <div> |
| <label for="fecha" class="block text-sm font-medium text-gray-700 mb-1">Fecha de Contacto</label> |
| <input type="date" id="fecha" name="fecha" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="notas" class="block text-sm font-medium text-gray-700 mb-1">Notas Adicionales</label> |
| <textarea id="notas" name="notas" rows="2" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"></textarea> |
| </div> |
|
|
| <div class="flex justify-end space-x-3 pt-2"> |
| <button type="reset" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition"> |
| Limpiar |
| </button> |
| <button type="submit" class="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition flex items-center"> |
| <i class="fas fa-save mr-2"></i> Guardar Prospecto |
| </button> |
| </div> |
| </form> |
| </section> |
|
|
| |
| <section class="bg-white rounded-lg shadow-md p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-semibold text-gray-800">Prospectos Capturados</h2> |
| <div class="flex items-center space-x-3"> |
| <div class="relative"> |
| <input type="text" id="searchInput" placeholder="Buscar prospecto..." |
| class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| <select id="filterZona" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"> |
| <option value="">Todas las zonas</option> |
| <option value="Centro">Centro</option> |
| <option value="La Guama">La Guama</option> |
| <option value="Los Jovillos">Los Jovillos</option> |
| <option value="El Naranjo">El Naranjo</option> |
| <option value="La Colonia">La Colonia</option> |
| <option value="Otra">Otra</option> |
| </select> |
| </div> |
| </div> |
|
|
| |
| <div class="overflow-x-auto"> |
| <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">Nombre</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Teléfono</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Zona</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Interés</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> |
| </tr> |
| </thead> |
| <tbody id="contactsTableBody" class="bg-white divide-y divide-gray-200"> |
| |
| </tbody> |
| </table> |
| </div> |
|
|
| |
| <div id="emptyState" class="text-center py-12"> |
| <i class="fas fa-users-slash text-4xl text-gray-300 mb-4"></i> |
| <h3 class="text-lg font-medium text-gray-500">No hay prospectos capturados</h3> |
| <p class="text-gray-400 mt-1">Comienza agregando tu primer prospecto usando el formulario</p> |
| <button id="addFirstContactBtn" class="mt-4 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition inline-flex items-center"> |
| <i class="fas fa-plus mr-2"></i> Agregar Prospecto |
| </button> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <div id="whatsappBtn" class="fixed bottom-6 right-6 bg-green-500 text-white p-4 rounded-full shadow-xl cursor-pointer hover:bg-green-600 z-50"> |
| <i class="fab fa-whatsapp text-2xl"></i> |
| <span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-6 w-6 flex items-center justify-center">0</span> |
| </div> |
|
|
| |
| <div id="whatsappModal" 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-md"> |
| <div class="flex justify-between items-center border-b px-6 py-4"> |
| <h3 class="text-lg font-semibold text-gray-800">Enviar mensaje por WhatsApp</h3> |
| <button id="closeWhatsappModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="p-6"> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Seleccionar producto:</label> |
| <select id="productSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"> |
| <option value="">-- Seleccione un producto --</option> |
| <option value="nevera">Nevera 20 pies - RD$25,000</option> |
| <option value="lavadora">Lavadora automática - RD$18,500</option> |
| <option value="tv">TV Smart 55" - RD$32,000</option> |
| <option value="licuadora">Licuadora profesional - RD$3,200</option> |
| <option value="microondas">Microondas 30L - RD$7,800</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Mensaje personalizado:</label> |
| <textarea id="customMessage" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">¡Hola! Soy [Tu Nombre] de [Tu Negocio]. Tenemos excelentes ofertas que podrían interesarte:</textarea> |
| </div> |
| <div class="flex justify-end space-x-3"> |
| <button id="cancelWhatsapp" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition"> |
| Cancelar |
| </button> |
| <button id="sendWhatsapp" class="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition flex items-center"> |
| <i class="fab fa-whatsapp mr-2"></i> Enviar |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const prospectForm = document.getElementById('prospectForm'); |
| const contactsTableBody = document.getElementById('contactsTableBody'); |
| const emptyState = document.getElementById('emptyState'); |
| const toggleFormBtn = document.getElementById('toggleFormBtn'); |
| const formSection = document.getElementById('formSection'); |
| const addFirstContactBtn = document.getElementById('addFirstContactBtn'); |
| const searchInput = document.getElementById('searchInput'); |
| const filterZona = document.getElementById('filterZona'); |
| const whatsappBtn = document.getElementById('whatsappBtn'); |
| const whatsappModal = document.getElementById('whatsappModal'); |
| const closeWhatsappModal = document.getElementById('closeWhatsappModal'); |
| const cancelWhatsapp = document.getElementById('cancelWhatsapp'); |
| const sendWhatsapp = document.getElementById('sendWhatsapp'); |
| |
| |
| let prospects = JSON.parse(localStorage.getItem('prospects')) || []; |
| |
| |
| updateContactsTable(); |
| updateWhatsappBadge(); |
| |
| |
| prospectForm.addEventListener('submit', handleFormSubmit); |
| toggleFormBtn.addEventListener('click', toggleFormSection); |
| addFirstContactBtn.addEventListener('click', toggleFormSection); |
| searchInput.addEventListener('input', filterContacts); |
| filterZona.addEventListener('change', filterContacts); |
| whatsappBtn.addEventListener('click', openWhatsappModal); |
| closeWhatsappModal.addEventListener('click', closeModal); |
| cancelWhatsapp.addEventListener('click', closeModal); |
| sendWhatsapp.addEventListener('click', sendWhatsappMessage); |
| |
| |
| function handleFormSubmit(e) { |
| e.preventDefault(); |
| |
| const formData = new FormData(prospectForm); |
| const prospect = { |
| id: Date.now(), |
| nombre: formData.get('nombre'), |
| telefono: formData.get('telefono'), |
| zona: formData.get('zona'), |
| interes: formData.get('interes'), |
| fecha: formData.get('fecha') || new Date().toISOString().split('T')[0], |
| notas: formData.get('notas'), |
| timestamp: new Date().toISOString() |
| }; |
| |
| prospects.push(prospect); |
| saveProspects(); |
| updateContactsTable(); |
| updateWhatsappBadge(); |
| prospectForm.reset(); |
| |
| |
| alert('Prospecto guardado exitosamente!'); |
| } |
| |
| function updateContactsTable(filteredProspects = null) { |
| const dataToDisplay = filteredProspects || prospects; |
| |
| if (dataToDisplay.length > 0) { |
| emptyState.classList.add('hidden'); |
| contactsTableBody.innerHTML = ''; |
| |
| dataToDisplay.forEach(prospect => { |
| const row = document.createElement('tr'); |
| row.className = 'hover:bg-gray-50'; |
| row.innerHTML = ` |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 bg-teal-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-user text-teal-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">${prospect.nombre}</div> |
| <div class="text-sm text-gray-500">${prospect.notas || 'Sin notas'}</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="text-sm text-gray-900">${formatPhoneNumber(prospect.telefono)}</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-teal-100 text-teal-800"> |
| ${prospect.zona} |
| </span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| ${prospect.interes || 'No especificado'} |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| ${formatDate(prospect.fecha)} |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
| <button onclick="deleteProspect(${prospect.id})" class="text-red-600 hover:text-red-900 mr-3"> |
| <i class="fas fa-trash"></i> |
| </button> |
| <button onclick="prepareWhatsappMessage('${prospect.telefono}', '${prospect.nombre}')" class="text-green-600 hover:text-green-900"> |
| <i class="fab fa-whatsapp"></i> |
| </button> |
| </td> |
| `; |
| contactsTableBody.appendChild(row); |
| }); |
| } else { |
| emptyState.classList.remove('hidden'); |
| } |
| } |
| |
| function filterContacts() { |
| const searchTerm = searchInput.value.toLowerCase(); |
| const zonaFilter = filterZona.value; |
| |
| let filtered = prospects; |
| |
| if (zonaFilter) { |
| filtered = filtered.filter(p => p.zona === zonaFilter); |
| } |
| |
| if (searchTerm) { |
| filtered = filtered.filter(p => |
| p.nombre.toLowerCase().includes(searchTerm) || |
| p.telefono.includes(searchTerm) || |
| (p.notas && p.notas.toLowerCase().includes(searchTerm)) |
| ); |
| } |
| |
| updateContactsTable(filtered); |
| } |
| |
| function toggleFormSection() { |
| formSection.classList.toggle('hidden'); |
| if (!formSection.classList.contains('hidden')) { |
| formSection.scrollIntoView({ behavior: 'smooth' }); |
| } |
| } |
| |
| function saveProspects() { |
| localStorage.setItem('prospects', JSON.stringify(prospects)); |
| } |
| |
| function updateWhatsappBadge() { |
| const badge = whatsappBtn.querySelector('span'); |
| badge.textContent = prospects.length; |
| } |
| |
| function openWhatsappModal() { |
| whatsappModal.classList.remove('hidden'); |
| } |
| |
| function closeModal() { |
| whatsappModal.classList.add('hidden'); |
| } |
| |
| function sendWhatsappMessage() { |
| const productSelect = document.getElementById('productSelect'); |
| const customMessage = document.getElementById('customMessage'); |
| |
| if (!productSelect.value) { |
| alert('Por favor seleccione un producto'); |
| return; |
| } |
| |
| |
| const phoneNumber = "18295551234"; |
| const productText = productSelect.options[productSelect.selectedIndex].text; |
| const message = encodeURIComponent(`${customMessage.value}\n\nProducto: ${productText}\n\n¿Te interesa?`); |
| |
| |
| window.open(`https://wa.me/${phoneNumber}?text=${message}`, '_blank'); |
| |
| closeModal(); |
| } |
| |
| function formatPhoneNumber(phone) { |
| |
| return phone.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3'); |
| } |
| |
| function formatDate(dateString) { |
| const options = { year: 'numeric', month: 'short', day: 'numeric' }; |
| return new Date(dateString).toLocaleDateString('es-DO', options); |
| } |
| |
| |
| window.deleteProspect = function(id) { |
| if (confirm('¿Estás seguro de eliminar este prospecto?')) { |
| prospects = prospects.filter(p => p.id !== id); |
| saveProspects(); |
| updateContactsTable(); |
| updateWhatsappBadge(); |
| } |
| }; |
| |
| window.prepareWhatsappMessage = function(phone, name) { |
| document.getElementById('customMessage').value = `¡Hola ${name}! Soy [Tu Nombre] de [Tu Negocio]. Tenemos excelentes ofertas que podrían interesarte:`; |
| openWhatsappModal(); |
| |
| }; |
| }); |
| </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=leandrogm/caja" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
