// Christmas Light Installation Widget - Global JavaScript Module (function () { 'use strict'; // Prevent multiple initializations if (window.ChristmasWidgetLoaded) return; window.ChristmasWidgetLoaded = true; // CSS Styles const styles = ` /* Christmas Light Installation Widget Styles */ .christmas-widget-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .christmas-widget-container * { margin: 0; padding: 0; box-sizing: border-box; } .christmas-widget-container.hidden { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; } .christmas-widget { background: linear-gradient(135deg, rgb(var(--derivative-color-900)) 0%, rgb(var(--derivative-color-700)) 50%, rgb(var(--derivative-color-500)) 100%); border-radius: 16px; box-shadow: 0 10px 40px rgba(var(--derivative-color-500), 0.3), 0 0 0 1px rgba(var(--primary-color), 0.2); overflow: hidden; position: relative; width: 420px; max-width: calc(100vw - 40px); animation: christmasWidgetSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid rgba(var(--primary-color), 0.3); } @keyframes christmasWidgetSlideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Twinkling Christmas Lights Border */ .christmas-lights-border { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; } .christmas-light-bulb { position: absolute; width: 8px; height: 8px; border-radius: 50%; animation: twinkle 2s infinite alternate; } @keyframes twinkle { 0%, 100% { opacity: 0.3; box-shadow: 0 0 3px currentColor; } 50% { opacity: 0.7; box-shadow: 0 0 8px currentColor, 0 0 12px currentColor; } } .christmas-light-bulb:nth-child(1) { top: 5px; left: 10%; background: rgb(var(--derivative-color-400)); color: rgb(var(--derivative-color-400)); animation-delay: 0s; } .christmas-light-bulb:nth-child(2) { top: 5px; left: 20%; background: rgb(var(--derivative-color-200)); color: rgb(var(--derivative-color-200)); animation-delay: 0.3s; } .christmas-light-bulb:nth-child(3) { top: 5px; left: 30%; background: rgb(var(--secondary-color)); color: rgb(var(--secondary-color)); animation-delay: 0.6s; } .christmas-light-bulb:nth-child(4) { top: 5px; right: 30%; background: rgb(var(--derivative-color-100)); color: rgb(var(--derivative-color-100)); animation-delay: 0.9s; } .christmas-light-bulb:nth-child(5) { top: 5px; right: 20%; background: rgb(var(--secondary-color)); color: rgb(var(--secondary-color)); animation-delay: 1.2s; } .christmas-light-bulb:nth-child(6) { top: 5px; right: 10%; background: rgb(var(--derivative-color-500)); color: rgb(var(--derivative-color-500)); animation-delay: 1.5s; } .christmas-light-bulb:nth-child(7) { bottom: 5px; left: 15%; background: rgb(var(--derivative-color-400)); color: rgb(var(--derivative-color-400)); animation-delay: 0.2s; } .christmas-light-bulb:nth-child(8) { bottom: 5px; left: 35%; background: rgb(var(--secondary-color)); color: rgb(var(--secondary-color)); animation-delay: 0.5s; } .christmas-light-bulb:nth-child(9) { bottom: 5px; right: 35%; background: rgb(var(--derivative-color-200)); color: rgb(var(--derivative-color-200)); animation-delay: 0.8s; } .christmas-light-bulb:nth-child(10) { bottom: 5px; right: 15%; background: rgb(var(--secondary-color)); color: rgb(var(--secondary-color)); animation-delay: 1.1s; } /* Close button */ .christmas-widget-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 15; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .christmas-widget-close:hover { background: white; transform: scale(1.1); } .christmas-widget-close::before, .christmas-widget-close::after { content: ''; position: absolute; width: 16px; height: 2px; background: rgb(var(--derivative-color-900)); border-radius: 2px; } .christmas-widget-close::before { transform: rotate(45deg); } .christmas-widget-close::after { transform: rotate(-45deg); } /* Widget Header */ .christmas-widget-header { padding: 25px 20px 16px; position: relative; z-index: 10; } .christmas-season-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(45deg, rgb(var(--primary-color)), rgb(var(--derivative-color-200))); color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(var(--primary-color), 0.3); } .christmas-season-badge.font-pairing-secondary {} .christmas-season-badge-icon { font-size: 14px; line-height: 1; animation: sparkle 1.5s infinite; } @keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(10deg); } } .christmas-widget-title { font-size: 26px; color: white; font-weight: 700; margin-bottom: 8px; line-height: 1.2; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .christmas-widget-subtitle { font-size: 14px; color: rgb(var(--derivative-color-50)); line-height: 1.4; } /* Image Container */ .christmas-widget-image-wrapper { position: relative; background: rgb(var(--derivative-color-900)); aspect-ratio: 16/9; overflow: hidden; z-index: 5; } .christmas-widget-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .christmas-widget-image-wrapper:hover img { transform: scale(1.05); } .christmas-image-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(var(--derivative-color-900), 0.9) 0%, transparent 100%); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; z-index: 8; } .christmas-discount-tag { background: linear-gradient(45deg, rgb(var(--secondary-color)), rgb(var(--derivative-color-400))); color: white; padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 3px 12px rgba(var(--secondary-color), 0.3); animation: gentlePulse 3s infinite; } @keyframes gentlePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } /* Service Features */ .christmas-features { padding: 16px 20px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); position: relative; z-index: 8; } .christmas-features-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .christmas-feature-item { background: rgba(255, 255, 255, 0.1); color: white; padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); } /* CTA Section */ .christmas-widget-cta { padding: 20px; text-align: center; position: relative; z-index: 10; } .christmas-cta-button { display: block; width: 100%; background: linear-gradient(45deg, rgb(var(--primary-color)), rgb(var(--derivative-color-200))); color: white; padding: 12px 24px; font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 8px; transition: all 0.2s ease; margin-bottom: 0; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 3px 10px rgba(var(--primary-color), 0.3); } .christmas-cta-button:hover { background: linear-gradient(45deg, rgb(var(--derivative-color-200)), rgb(var(--derivative-color-100))); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(var(--primary-color), 0.4); } .christmas-offer-details { margin-top: 12px; font-size: 11px; color: rgb(var(--derivative-color-50)); line-height: 1.4; } /* Floating Snowflakes */ .christmas-snowflakes-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 2; } .christmas-snowflake { position: absolute; color: rgba(255, 255, 255, 0.7); font-size: 16px; opacity: 0; animation: snowfall var(--duration) infinite linear; animation-delay: var(--delay); } @keyframes snowfall { 0% { transform: translateY(-30px) translateX(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(calc(100% + 30px)) translateX(20px) rotate(360deg); opacity: 0; } } .christmas-snowflake:nth-child(1) { left: 10%; --duration: 8s; --delay: 0s; } .christmas-snowflake:nth-child(2) { left: 30%; --duration: 10s; --delay: 2s; } .christmas-snowflake:nth-child(3) { left: 50%; --duration: 9s; --delay: 4s; } .christmas-snowflake:nth-child(4) { left: 70%; --duration: 11s; --delay: 1s; } .christmas-snowflake:nth-child(5) { left: 85%; --duration: 9.5s; --delay: 3s; } /* Reopen button when widget is closed */ .christmas-widget-reopen { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(45deg, rgb(var(--primary-color)), rgb(var(--derivative-color-200))); color: white; border: 2px solid rgb(var(--secondary-color)); border-radius: 50%; width: 60px; height: 60px; font-size: 24px; cursor: pointer; box-shadow: 0 4px 15px rgba(var(--primary-color), 0.4); display: none; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 9998; animation: christmasWidgetGentlePulse 3s infinite; } @keyframes christmasWidgetGentlePulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(var(--primary-color), 0.4); } 50% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(var(--primary-color), 0.5); } } .christmas-widget-reopen:hover { transform: scale(1.1); background: linear-gradient(45deg, rgb(var(--derivative-color-200)), rgb(var(--derivative-color-100))); } .christmas-widget-reopen.show { display: flex; } @keyframes sparkleFloat { 0% { transform: translateY(0) scale(0); opacity: 1; } 50% { transform: translateY(-20px) scale(1); opacity: 1; } 100% { transform: translateY(-40px) scale(0); opacity: 0; } } /* Mobile Responsive */ @media (max-width: 480px) { .christmas-widget-container { bottom: 0; right: 0; left: 0; padding: 0; } .christmas-widget { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; } .christmas-widget-header { padding: 20px 16px 12px; } .christmas-widget-title { font-size: 22px; } .christmas-widget-subtitle { font-size: 13px; } .christmas-widget-cta { padding: 16px; } .christmas-cta-button { padding: 12px 20px; font-size: 14px; } .christmas-widget-close { top: 10px; right: 10px; width: 28px; height: 28px; } .christmas-widget-reopen { bottom: 15px; right: 15px; width: 55px; height: 55px; font-size: 20px; } .christmas-snowflakes-container, .christmas-lights-border { display: none; } } @media (max-width: 768px) and (min-width: 481px) { .christmas-widget { width: 380px; } } /* Reduced motion for accessibility */ @media (prefers-reduced-motion: reduce) { .christmas-snowflake, .christmas-widget, .christmas-widget-reopen, .christmas-light-bulb, .christmas-season-badge-icon, .christmas-discount-tag { animation: none; } .christmas-widget-container, .christmas-widget-close, .christmas-cta-button { transition: none; } } `; // Widget Configuration - Easily customizable const config = { title: 'Professional Christmas Light Installation', subtitle: 'Transform your home into a winter wonderland with our expert holiday lighting services', badge: 'Book Now', discount: 'FREE Quote', imageUrl: 'https://ik.imagekit.io/4wu305uo4/AdobeStock_184503176.jpeg', imageAlt: 'Beautiful Christmas lights on home exterior', ctaText: 'Schedule Free Consultation', ctaUrl: '/contact-us', offerDetails: '*Free design consultation and quote. Professional installation and takedown included. Fully insured service.*', features: ['🏠 Residential & Commercial', '💡 LED Energy Efficient', '🛠️ Install & Removal'], autoShowDelay: 2000, // milliseconds sparkleInterval: 3000 // milliseconds }; // Create and inject styles function injectStyles() { const styleElement = document.createElement('style'); styleElement.id = 'christmas-widget-styles'; styleElement.textContent = styles; document.head.appendChild(styleElement); } // Create widget HTML function createWidget() { const widgetHTML = `

❄️ ❄️ ⭐ ❄️ ✨

${config.features.map(feature => `${feature}`).join('')}

`; document.body.insertAdjacentHTML('beforeend', widgetHTML); } // Widget control functions function closeWidget() { const widget = document.getElementById('christmasPromotionWidget'); const reopenBtn = document.getElementById('christmasReopenButton'); if (widget && reopenBtn) { widget.classList.add('hidden'); setTimeout(() => { reopenBtn.classList.add('show'); }, 300); // Save preference in session storage try { sessionStorage.setItem('christmasPromotionClosed', 'true'); } catch (e) { // Handle cases where sessionStorage is not available console.log('Session storage not available'); } } } function openWidget() { const widget = document.getElementById('christmasPromotionWidget'); const reopenBtn = document.getElementById('christmasReopenButton'); if (widget && reopenBtn) { reopenBtn.classList.remove('show'); setTimeout(() => { widget.classList.remove('hidden'); }, 100); // Clear session preference try { sessionStorage.removeItem('christmasPromotionClosed'); } catch (e) { console.log('Session storage not available'); } } } // Create sparkle effects function createSparkle() { if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; } const widget = document.querySelector('.christmas-widget'); if (!widget) return; const sparkle = document.createElement('div'); sparkle.innerHTML = '✨'; sparkle.style.cssText = ` position: absolute; pointer-events: none; z-index: 20; font-size: 12px; color: rgba(var(--derivative-color-400), 0.6); animation: sparkleFloat 2s ease-out forwards; `; // Random position sparkle.style.left = Math.random() * 100 + '%'; sparkle.style.top = Math.random() * 100 + '%'; widget.appendChild(sparkle); setTimeout(() => sparkle.remove(), 2000); } // Initialize the widget function initializeWidget() { // Inject styles injectStyles(); // Create widget createWidget(); // Set up event listeners const closeBtn = document.querySelector('.christmas-widget-close'); const reopenBtn = document.getElementById('christmasReopenButton'); if (closeBtn) { closeBtn.addEventListener('click', closeWidget); } if (reopenBtn) { reopenBtn.addEventListener('click', openWidget); } // Check if widget was previously closed let wasClosed = false; try { wasClosed = sessionStorage.getItem('christmasPromotionClosed') === 'true'; } catch (e) { // Session storage not available, default to false } if (wasClosed) { const widget = document.getElementById('christmasPromotionWidget'); const reopenBtn = document.getElementById('christmasReopenButton'); if (widget) widget.classList.add('hidden'); if (reopenBtn) reopenBtn.classList.add('show'); } // Handle image loading errors const img = document.querySelector('.christmas-widget-image-wrapper img'); if (img) { img.addEventListener('error', function () { console.log('Christmas widget image failed to load, using fallback'); this.style.background = `linear-gradient(45deg, rgb(var(--derivative-color-900)), rgb(var(--derivative-color-700)))`; this.alt = 'Christmas Light Installation - Image Loading'; }); } // Auto-show widget after delay (if not previously closed) setTimeout(() => { let wasClosed = false; try { wasClosed = sessionStorage.getItem('christmasPromotionClosed') === 'true'; } catch (e) { // Session storage not available } if (!wasClosed) { const widget = document.getElementById('christmasPromotionWidget'); if (widget && widget.classList.contains('hidden')) { widget.classList.remove('hidden'); } } }, config.autoShowDelay); // Start sparkle effects setInterval(createSparkle, config.sparkleInterval); } // Initialize when DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initializeWidget); } else { initializeWidget(); } // Expose configuration for easy customization window.ChristmasWidget = { updateConfig: function (newConfig) { Object.assign(config, newConfig); }, getConfig: function () { return { ...config }; }, show: openWidget, hide: closeWidget, destroy: function () { const widget = document.getElementById('christmasPromotionWidget'); const reopenBtn = document.getElementById('christmasReopenButton'); const styles = document.getElementById('christmas-widget-styles'); if (widget) widget.remove(); if (reopenBtn) reopenBtn.remove(); if (styles) styles.remove(); window.ChristmasWidgetLoaded = false; } }; })();

${config.title}