Fullcare #75
Description
``<!doctype html>
<title>Full Care - Insumos Médicos Descartables</title> <script src="/_sdk/element_sdk.js"></script> <script src="https://cdn.tailwindcss.com"></script> <style> body { box-sizing: border-box; } * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
.smooth-scroll {
scroll-behavior: smooth;
}
.product-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.pulse-button {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
</style>
🧤
Guantes Descartables
Guantes de látex y nitrilo de alta calidad para uso médico.
😷
Mascarillas
Mascarillas quirúrgicas y respiradores N95 certificados.
💉
Jeringas
Jeringas estériles de diferentes capacidades.
🩺
Material Quirúrgico
Gasas, vendas, apósitos y material de curación.
🥼
Batas y Protección
Batas quirúrgicas, gorros y protectores descartables.
🧪
Material de Laboratorio
Tubos, pipetas y contenedores para muestras.
let config = {};
async function onConfigChange(newConfig) {
config = newConfig;
const customFont = config.font_family || defaultConfig.font_family;
const baseFontStack = 'system-ui, -apple-system, sans-serif';
const fontFamily = `${customFont}, ${baseFontStack}`;
const baseSize = config.font_size || defaultConfig.font_size;
const backgroundColor = config.background_color || defaultConfig.background_color;
const surfaceColor = config.surface_color || defaultConfig.surface_color;
const textColor = config.text_color || defaultConfig.text_color;
const primaryColor = config.primary_action_color || defaultConfig.primary_action_color;
const secondaryColor = config.secondary_action_color || defaultConfig.secondary_action_color;
document.body.style.backgroundColor = backgroundColor;
document.body.style.color = textColor;
document.body.style.fontFamily = fontFamily;
const header = document.querySelector('header');
header.style.backgroundColor = surfaceColor;
const companyName = document.getElementById('company-name');
companyName.textContent = config.company_name || defaultConfig.company_name;
companyName.style.fontSize = `${baseSize * 1.5}px`;
companyName.style.color = textColor;
companyName.style.fontFamily = fontFamily;
const tagline = document.getElementById('tagline');
tagline.textContent = config.tagline || defaultConfig.tagline;
tagline.style.fontSize = `${baseSize * 0.875}px`;
tagline.style.color = textColor;
tagline.style.fontFamily = fontFamily;
const callButton = header.querySelector('a[href^="tel:"]');
callButton.style.backgroundColor = primaryColor;
callButton.style.color = surfaceColor;
callButton.style.fontSize = `${baseSize}px`;
callButton.style.fontFamily = fontFamily;
const heroTitle = document.getElementById('hero-title');
heroTitle.textContent = config.hero_title || defaultConfig.hero_title;
heroTitle.style.fontSize = `${baseSize * 2.5}px`;
heroTitle.style.color = textColor;
heroTitle.style.fontFamily = fontFamily;
const heroSubtitle = document.getElementById('hero-subtitle');
heroSubtitle.textContent = config.hero_subtitle || defaultConfig.hero_subtitle;
heroSubtitle.style.fontSize = `${baseSize * 1.25}px`;
heroSubtitle.style.color = textColor;
heroSubtitle.style.fontFamily = fontFamily;
const ctaButton = document.getElementById('cta-button');
ctaButton.textContent = config.cta_button || defaultConfig.cta_button;
ctaButton.style.backgroundColor = primaryColor;
ctaButton.style.color = surfaceColor;
ctaButton.style.fontSize = `${baseSize * 1.125}px`;
ctaButton.style.fontFamily = fontFamily;
const aboutSection = document.querySelector('section:nth-of-type(2) .rounded-2xl');
aboutSection.style.backgroundColor = surfaceColor;
const aboutTitle = document.getElementById('about-title');
aboutTitle.textContent = config.about_title || defaultConfig.about_title;
aboutTitle.style.fontSize = `${baseSize * 2}px`;
aboutTitle.style.color = textColor;
aboutTitle.style.fontFamily = fontFamily;
const aboutText = document.getElementById('about-text');
aboutText.textContent = config.about_text || defaultConfig.about_text;
aboutText.style.fontSize = `${baseSize * 1.125}px`;
aboutText.style.color = textColor;
aboutText.style.fontFamily = fontFamily;
const productsTitle = document.getElementById('products-title');
productsTitle.textContent = config.products_title || defaultConfig.products_title;
productsTitle.style.fontSize = `${baseSize * 2}px`;
productsTitle.style.color = textColor;
productsTitle.style.fontFamily = fontFamily;
const productCards = document.querySelectorAll('.product-card');
productCards.forEach(card => {
card.style.backgroundColor = surfaceColor;
const title = card.querySelector('h4');
const text = card.querySelector('p');
title.style.fontSize = `${baseSize * 1.25}px`;
title.style.color = textColor;
title.style.fontFamily = fontFamily;
text.style.fontSize = `${baseSize}px`;
text.style.color = textColor;
text.style.fontFamily = fontFamily;
});
const contactSection = document.querySelector('#contacto .rounded-2xl');
contactSection.style.backgroundColor = surfaceColor;
const contactTitle = document.getElementById('contact-title');
contactTitle.textContent = config.contact_title || defaultConfig.contact_title;
contactTitle.style.fontSize = `${baseSize * 2}px`;
contactTitle.style.color = textColor;
contactTitle.style.fontFamily = fontFamily;
const contactSubtitle = document.getElementById('contact-subtitle');
contactSubtitle.textContent = config.contact_subtitle || defaultConfig.contact_subtitle;
contactSubtitle.style.fontSize = `${baseSize * 1.125}px`;
contactSubtitle.style.color = textColor;
contactSubtitle.style.fontFamily = fontFamily;
const phoneLink = document.getElementById('phone-link');
phoneLink.textContent = config.phone_number || defaultConfig.phone_number;
phoneLink.style.fontSize = `${baseSize * 1.5}px`;
phoneLink.style.color = primaryColor;
phoneLink.style.fontFamily = fontFamily;
const whatsappButton = contactSection.querySelector('a[href^="https://wa.me"]');
whatsappButton.style.backgroundColor = secondaryColor;
whatsappButton.style.color = surfaceColor;
whatsappButton.style.fontSize = `${baseSize * 1.125}px`;
whatsappButton.style.fontFamily = fontFamily;
const footer = document.querySelector('footer');
footer.style.backgroundColor = surfaceColor;
const footerText = document.getElementById('footer-text');
footerText.textContent = config.footer_text || defaultConfig.footer_text;
footerText.style.fontSize = `${baseSize * 0.875}px`;
footerText.style.color = textColor;
footerText.style.fontFamily = fontFamily;
}
function mapToCapabilities(config) {
return {
recolorables: [
{
get: () => config.background_color || defaultConfig.background_color,
set: (value) => {
config.background_color = value;
window.elementSdk.setConfig({ background_color: value });
}
},
{
get: () => config.surface_color || defaultConfig.surface_color,
set: (value) => {
config.surface_color = value;
window.elementSdk.setConfig({ surface_color: value });
}
},
{
get: () => config.text_color || defaultConfig.text_color,
set: (value) => {
config.text_color = value;
window.elementSdk.setConfig({ text_color: value });
}
},
{
get: () => config.primary_action_color || defaultConfig.primary_action_color,
set: (value) => {
config.primary_action_color = value;
window.elementSdk.setConfig({ primary_action_color: value });
}
},
{
get: () => config.secondary_action_color || defaultConfig.secondary_action_color,
set: (value) => {
config.secondary_action_color = value;
window.elementSdk.setConfig({ secondary_action_color: value });
}
}
],
borderables: [],
fontEditable: {
get: () => config.font_family || defaultConfig.font_family,
set: (value) => {
config.font_family = value;
window.elementSdk.setConfig({ font_family: value });
}
},
fontSizeable: {
get: () => config.font_size || defaultConfig.font_size,
set: (value) => {
config.font_size = value;
window.elementSdk.setConfig({ font_size: value });
}
}
};
}
function mapToEditPanelValues(config) {
return new Map([
["company_name", config.company_name || defaultConfig.company_name],
["tagline", config.tagline || defaultConfig.tagline],
["hero_title", config.hero_title || defaultConfig.hero_title],
["hero_subtitle", config.hero_subtitle || defaultConfig.hero_subtitle],
["cta_button", config.cta_button || defaultConfig.cta_button],
["about_title", config.about_title || defaultConfig.about_title],
["about_text", config.about_text || defaultConfig.about_text],
["products_title", config.products_title || defaultConfig.products_title],
["contact_title", config.contact_title || defaultConfig.contact_title],
["contact_subtitle", config.contact_subtitle || defaultConfig.contact_subtitle],
["phone_number", config.phone_number || defaultConfig.phone_number],
["footer_text", config.footer_text || defaultConfig.footer_text]
]);
}
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig,
onConfigChange,
mapToCapabilities,
mapToEditPanelValues
});
}
</script>