document.addEventListener('DOMContentLoaded', function() {
// Verificar si estamos en la página principal
if (window.location.pathname === '/' || window.location.pathname === '/index.php') {
const styles = `
.bf-installment-banner {
position: fixed;
top: 24px;
left: 24px;
background: rgba(20, 20, 20, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 14px;
padding: 12px 18px;
color: white;
font-family: 'Inter', sans-serif;
z-index: 1000;
opacity: 0;
transform: translateY(-120%);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
display: flex;
flex-direction: column;
gap: 8px;
width: fit-content;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
visibility: hidden;
}
.bf-installment-banner.show {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.bf-installment-banner-content {
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
padding-right: 16px;
}
.bf-new-badge {
background: #10B981;
padding: 2px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
color: white;
display: inline-flex;
align-items: center;
height: 18px;
}
.bf-message-wrapper {
display: inline-flex;
align-items: center;
gap: 8px;
}
.bf-installment-text {
font-size: 14px;
font-weight: 400;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.95);
font-family: 'Inter', sans-serif;
}
.bf-close-button {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
background: transparent;
transition: all 0.2s ease;
border: none;
padding: 0;
color: rgba(255, 255, 255, 0.9);
}
.bf-close-button:hover {
background: rgba(255, 255, 255, 0.15);
color: white;
}
.bf-close-button svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2.5;
}
.bf-progress-bar {
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.1);
border-radius: 1px;
overflow: hidden;
}
.bf-progress-bar-fill {
width: 100%;
height: 100%;
background: #10B981;
transform-origin: left;
animation: shrink 20s linear forwards;
will-change: transform;
}
@keyframes shrink {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (max-width: 768px) {
.bf-installment-banner {
left: 16px;
right: 16px;
top: auto;
bottom: 24px;
transform: translateY(120%);
padding: 10px 14px;
width: calc(100% - 32px);
max-width: calc(100% - 32px);
}
.bf-installment-banner.show {
transform: translateY(0);
}
.bf-installment-text {
font-size: 13px;
}
.bf-new-badge {
padding: 1px 6px;
font-size: 10px;
}
}
`;
// Inyectar estilos de forma segura
const styleSheet = document.createElement('style');
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);
// Create banner HTML
const bannerHTML = `
<div class="bf-installment-banner">
<div class="bf-installment-banner-content">
<div class="bf-message-wrapper">
<span class="bf-new-badge">New</span>
<span class="bf-installment-text">Monthly payments available</span>
</div>
<button class="bf-close-button" aria-label="Close notification">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>
<div class="bf-progress-bar">
<div class="bf-progress-bar-fill"></div>
</div>
</div>
`;
// Asegurar que los estilos están cargados antes de mostrar el banner
requestAnimationFrame(() => {
document.body.insertAdjacentHTML('beforeend', bannerHTML);
const banner = document.querySelector('.bf-installment-banner');
// Asegurar que el DOM está actualizado antes de mostrar
requestAnimationFrame(() => {
setTimeout(() => {
banner.classList.add('show');
}, 500);
});
// Close button functionality
const closeButton = banner.querySelector('.bf-close-button');
closeButton.addEventListener('click', () => {
banner.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease';
banner.style.opacity = '0';
banner.style.transform = `translateY(${window.innerWidth <= 768 ? '120%' : '-120%'})`;
setTimeout(() => {
banner.remove();
}, 500);
});
// Auto-remove after 20 seconds
setTimeout(() => {
if (banner.isConnected) {
banner.style.transition = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease';
banner.style.opacity = '0';
banner.style.transform = `translateY(${window.innerWidth <= 768 ? '120%' : '-120%'})`;
setTimeout(() => {
if (banner.isConnected) {
banner.remove();
}
}, 500);
}
}, 20000);
});
}
});
