tailwind.config = {
theme: {
extend: {
fontFamily: { sans: [‘Inter’, ‘sans-serif’] },
colors: {
amazon: {
dark: ‘#131921’,
light: ‘#232f3e’,
search: ‘#febd69’,
orange: ‘#fa8900’,
cta: ‘#FFD814’,
link: ‘#007185’,
price: ‘#B12704’,
},
retail: {
teal: ‘#008f98’,
pink: ‘#e91e63’,
yellow: ‘#ffc107’,
}
},
boxShadow: {
‘card’: ‘0 0 0 1px #e3e6e6, 0 4px 10px rgba(0,0,0,0.05)’,
}
}
}
}
body { background-color: #E3E6E6; }
.search-focus:focus-within { box-shadow: 0 0 0 3px #F3A847; }
.hide { display: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.banner-pattern {
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.2) 1px, transparent 0);
background-size: 20px 20px;
}
.whatsapp-float {
position: fixed; bottom: 20px; right: 20px;
background-color: #25d366; color: white;
border-radius: 50%; width: 60px; height: 60px;
display: flex; align-items: center; justify-content: center;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2); z-index: 100;
transition: all 0.3s ease;
}
.whatsapp-float:hover { transform: scale(1.1); }
.loader {
border: 4px solid #f3f3f3; border-top: 4px solid #fa8900;
border-radius: 50%; width: 40px; height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Estilos del Modal de Ubicación */
#locationModal { transition: opacity 0.3s ease; }
.dept-btn:hover { background-color: #f3f4f6; border-color: #fa8900; }
/* Ajuste de imágenes de producto */
.product-img { mix-blend-mode: multiply; }
Consultando precios en farmacias…
Tu salud no espera.
Encuentra el mejor precio hoy.
Compara precios entre Farmacias Económicas, San Nicolás y más. Recibe en casa.
Gripe y Tos
Ver antigripales
Vitaminas
Ver Neurobión
Bebé
Ver Pañales
Farmacias Aliadas
San Nicolás
Económica
Farmacia Uno
Ver mapa de cobertura
HOT Ofertas del Mes
Marcas Oficiales
Promociones Especiales
¿Tienes una farmacia independiente?
Únete a la red digital de salud para la comunidad latina en Estados Unidos.
Resultados
// CATÁLOGO DE PRODUCTOS Y PRECIOS
const internalData = [
// — GRIPE Y TOS —
// Usamos placehold.co con el nombre del producto para simular la imagen real llamativa
{ id: ‘virogrip’, name: «Viro-Grip Granulado Limón AM/PM (Sobre)», brand: «Vijosa», price: 0.35, old: 0.44, category: «gripe», seller: «Farmacia La Buena», tags: [«gripe», «tos»], image: «https://placehold.co/400×400/fff/008f98?text=Viro-Grip+Limon» },
{ id: ‘sudagrip’, name: «Sudagrip Antigripal Jarabe 120ml», brand: «Paill», price: 4.00, old: 5.78, category: «gripe», seller: «Farmacia Uno», tags: [«gripe», «tos», «jarabe»], image: «https://placehold.co/400×400/fff/fa8900?text=Sudagrip+Jarabe» },
{ id: ‘tabcin’, name: «Tabcin Noche Gelcaps (Caja 12u)», brand: «Bayer», price: 3.10, old: 3.45, category: «gripe», seller: «Farmacia Económica», tags: [«gripe», «noche»], image: «https://placehold.co/400×400/1e3a8a/fff?text=Tabcin+Noche» },
{ id: ‘panotos’, name: «Panotos Jarabe Miel y Limón», brand: «Paill», price: 5.50, old: 6.25, category: «gripe», seller: «Farmacia San Nicolás», tags: [«tos», «jarabe»], image: «https://placehold.co/400×400/fff/000?text=Panotos+Miel» },
// — VITAMINAS —
{ id: ‘neurobion’, name: «Neurobión DC 25000 Inyectable (Jeringa)», brand: «Merck», price: 9.09, old: 10.50, category: «vitaminas», seller: «Farmacia San Nicolás», tags: [«vitamina», «energia»], image: «https://placehold.co/400×400/f3e5f5/9c27b0?text=Neurobion+DC» },
{ id: ‘dolo_neurobion’, name: «Dolo-Neurobión N Tabletas (Caja 20u)», brand: «Merck», price: 6.00, old: 7.06, category: «vitaminas», seller: «Farmacia Económica», tags: [«vitamina», «dolor»], image: «https://placehold.co/400×400/fff/d32f2f?text=Dolo+Neurobion» },
{ id: ‘sukrol’, name: «Sukrol Jarabe Cerebro y Nervios», brand: «Sukrol», price: 8.50, old: 9.75, category: «vitaminas», seller: «Super Farmacia», tags: [«cerebro», «energia»], image: «https://placehold.co/400×400/fff/1565c0?text=Sukrol+Jarabe» },
{ id: ‘centrum’, name: «Centrum Silver Adulto (Frasco 60u)», brand: «Pfizer», price: 18.00, old: 22.99, category: «vitaminas», seller: «Super Farmacia», tags: [«multivitaminico», «mayor»], image: «https://placehold.co/400×400/fff/ff9800?text=Centrum+Silver» },
// — BEBÉ —
{ id: ‘similac1’, name: «Fórmula Similac 1 HMO (Lata 350g)», brand: «Abbott», price: 17.15, old: 18.50, category: «bebe», seller: «Farmacia San Nicolás», tags: [«leche», «formula»], image: «https://placehold.co/400×400/e0f7fa/006064?text=Similac+1+HMO» },
{ id: ‘huggies1’, name: «Pañales Huggies Natural Care Etapa 1 (50u)», brand: «Huggies», price: 15.60, old: 16.50, category: «bebe», seller: «Super Farmacia», tags: [«pañal», «recien nacido»], image: «https://placehold.co/400×400/fff/e91e63?text=Huggies+RN» },
{ id: ‘huggies_pants’, name: «Huggies Active Sec Pants Etapa 4 (44u)», brand: «Huggies», price: 13.50, old: 14.99, category: «bebe», seller: «Farmacia La Buena», tags: [«pañal», «pants»], image: «https://placehold.co/400×400/fff/d81b60?text=Huggies+Pants» },
{ id: ‘pedialyte’, name: «Pedialyte 500ml Sabor Fresa», brand: «Abbott», price: 3.50, old: 4.25, category: «bebe», seller: «Farmacia Económica», tags: [«suero», «deshidratacion»], image: «https://placehold.co/400×400/fff/f44336?text=Pedialyte+Fresa» },
// — DOLOR —
{ id: ‘panadol’, name: «Panadol Ultra (Caja 16 Tabletas)», brand: «GSK», price: 3.35, old: 4.45, category: «dolor», seller: «Farmacia Económica», tags: [«dolor», «cabeza»], image: «https://placehold.co/400×400/fff/1976d2?text=Panadol+Ultra» },
{ id: ‘voltaren’, name: «Voltaren Emulgel 60g», brand: «GSK», price: 12.00, old: 14.50, category: «dolor», seller: «Super Farmacia», tags: [«golpes», «crema»], image: «https://placehold.co/400×400/fff/ef6c00?text=Voltaren+Gel» }
];
// LÓGICA GENERAL
if (typeof productsData === ‘undefined’) { var productsData = internalData; }
if (typeof lucide !== ‘undefined’) lucide.createIcons(); else window.addEventListener(‘load’, () => lucide.createIcons());
window.addEventListener(‘load’, () => {
renderContent();
renderDepartments();
// Agregar listeners para ENTER
addEnterListeners();
});
function renderContent() {
const offers = productsData.filter(p => p.old > p.price).slice(0, 8);
const slider = document.getElementById(‘offersSlider’);
if(slider) slider.innerHTML = offers.map(p => createRetailCard(p)).join(»);
filterPromos(‘all’);
}
function createRetailCard(product) {
const hasDiscount = product.old > product.price;
const discountPercent = hasDiscount ? Math.round(((product.old – product.price) / product.old) * 100) : 0;
const link = `producto.html?id=${product.id}`;
// Usamos la imagen del producto si existe, si no, un placeholder genérico
const imgUrl = product.image || `https://placehold.co/400×400/fff/008f98?text=${encodeURIComponent(product.name)}`;
return `
${product.name}
${hasDiscount ? `
` : ‘
‘}
`;
}
function filterPromos(cat) {
const grid = document.getElementById(‘promosGrid’);
if(!grid) return;
const buttons = document.querySelectorAll(‘[role=»tab»]’);
buttons.forEach(btn => {
if(btn.textContent.toLowerCase().includes(cat === ‘all’ ? ‘todos’ : cat)) {
btn.classList.add(‘bg-slate-800’, ‘text-white’, ‘border-slate-800’);
btn.classList.remove(‘bg-white’, ‘text-slate-600’, ‘border-slate-300’);
} else {
btn.classList.remove(‘bg-slate-800’, ‘text-white’, ‘border-slate-800’);
btn.classList.add(‘bg-white’, ‘text-slate-600’, ‘border-slate-300’);
}
});
let items = (cat === ‘all’) ? productsData.slice(0, 10) : productsData.filter(p => p.category === cat || p.tags.includes(cat)).slice(0, 10);
grid.innerHTML = items.length ? items.map(p => createRetailCard(p)).join(») : ‘
‘;
if (typeof lucide !== ‘undefined’) lucide.createIcons();
}
// BÚSQUEDA Y OTROS
function addEnterListeners() {
const inputs = document.querySelectorAll(‘input[type=»text»]’);
inputs.forEach(input => {
input.addEventListener(‘keypress’, function (e) {
if (e.key === ‘Enter’) {
if(this.id === ‘searchInputMobile’) performSearchMobile();
else performSearch();
}
});
});
}
function performSearch() { const q = document.getElementById(‘searchInput’).value; if(q) executeSearch(q); }
function performSearchMobile() { const q = document.getElementById(‘searchInputMobile’).value; if(q) executeSearch(q); }
function searchByTag(tag) { const d = document.getElementById(‘searchInput’); if(d) d.value = tag; executeSearch(tag); }
function clearSearch() {
document.getElementById(‘homeContent’).classList.remove(‘hide’);
document.getElementById(‘resultsContent’).classList.add(‘hide’);
document.getElementById(‘loaderSection’).classList.add(‘hide’);
window.scrollTo(0,0);
}
function executeSearch(query) {
if(!query) return;
document.getElementById(‘homeContent’).classList.add(‘hide’);
document.getElementById(‘resultsContent’).classList.add(‘hide’);
document.getElementById(‘loaderSection’).classList.remove(‘hide’);
setTimeout(() => {
document.getElementById(‘loaderSection’).classList.add(‘hide’);
document.getElementById(‘resultsContent’).classList.remove(‘hide’);
const grid = document.getElementById(‘resultsGrid’);
const title = document.getElementById(‘resultsTitle’);
title.innerText = `Resultados para «${query}»`;
const results = productsData.filter(p => p.name.toLowerCase().includes(query.toLowerCase()) || p.tags.some(t => t.includes(query.toLowerCase())) || p.category.includes(query.toLowerCase()));
grid.className = «grid grid-cols-2 md:grid-cols-4 gap-4″;
grid.innerHTML = results.length ? results.map(p => createRetailCard(p)).join(») : ‘
‘;
if (typeof lucide !== ‘undefined’) lucide.createIcons();
}, 500);
}
// — UBICACIÓN —
// Base de datos de ubicaciones de Estados Unidos
const locationData = { «California»: [«Los Angeles»] };
const modal = document.getElementById(‘locationModal’);
const deptView = document.getElementById(‘departmentsView’);
const distView = document.getElementById(‘districtsView’);
const distGrid = document.getElementById(‘districtsGrid’);
const modalTitle = document.getElementById(‘modalTitle’);
const currentLocationLabel = document.getElementById(‘currentLocationLabel’);
function openLocationModal() { modal.classList.remove(‘hidden’); modal.classList.add(‘flex’); showDepartments(); }
function closeLocationModal() { modal.classList.add(‘hidden’); modal.classList.remove(‘flex’); }
function showDepartments() { deptView.classList.remove(‘hidden’); distView.classList.add(‘hidden’); modalTitle.innerText = «Selecciona tu Departamento»; }
function renderDepartments() {
deptView.innerHTML = »;
Object.keys(locationData).forEach(dept => {
const btn = document.createElement(‘button’);
btn.className = «dept-btn text-left px-4 py-3 border border-gray-200 rounded hover:bg-gray-50 hover:border-amazon-orange transition text-sm font-medium text-gray-700 flex justify-between items-center group»;
btn.innerHTML = `${dept} `;
btn.onclick = () => selectDepartment(dept);
deptView.appendChild(btn);
});
}
function selectDepartment(dept) {
deptView.classList.add(‘hidden’); distView.classList.remove(‘hidden’);
modalTitle.innerText = «Selecciona tu Municipio»;
document.getElementById(‘selectedDeptTitle’).innerText = `MUNICIPIOS DE ${dept}`;
distGrid.innerHTML = »;
locationData[dept].forEach(dist => {
const btn = document.createElement(‘button’);
btn.className = «text-left px-4 py-2 hover:bg-blue-50 hover:text-blue-700 rounded text-sm text-gray-600 border border-transparent hover:border-blue-100 transition»;
btn.innerText = dist;
btn.onclick = () => { currentLocationLabel.innerText = dist; closeLocationModal(); };
distGrid.appendChild(btn);
});
}
modal.addEventListener(‘click’, (e) => { if (e.target === modal) closeLocationModal(); });