1 line
7.3 KiB
JavaScript
1 line
7.3 KiB
JavaScript
/* Cookie Banner Management */ (function(){'use strict';class CookieBanner{constructor(){this.cookieKey='odoo_expertos_cookies';this.banner=null;this.init();}init(){const cookieChoice=localStorage.getItem(this.cookieKey);if (!cookieChoice){this.createBanner();requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.showBanner();});});}}createBanner(){const bannerHTML=`<div class="cookie-banner" id="cookieBanner"><div class="cookie-banner-content"><div class="cookie-banner-text"><h3>Política de Cookies</h3><p>Utilizamos cookies para mejorar tu experiencia de aprendizaje en nuestra plataforma de formación Odoo. Las cookies nos ayudan a personalizar el contenido,recordar tu progreso y mejorar nuestros cursos.</p></div><div class="cookie-banner-buttons"><button class="cookie-btn cookie-btn-accept" onclick="cookieBannerInstance.acceptCookies()">Aceptar</button><button class="cookie-btn cookie-btn-reject" onclick="cookieBannerInstance.rejectCookies()">Rechazar</button><button class="cookie-btn cookie-btn-configure" onclick="cookieBannerInstance.configureCookies()">Configurar</button></div></div></div>`;document.body.insertAdjacentHTML('beforeend',bannerHTML);this.banner=document.getElementById('cookieBanner');this.addBannerStyles();}showBanner(){if (this.banner){this.banner.classList.add('active');}}hideBanner(){if (this.banner){this.banner.classList.remove('active');setTimeout(()=>{if (this.banner&&this.banner.parentNode){this.banner.parentNode.removeChild(this.banner);}},500);}}acceptCookies(){this.saveCookieChoice({accepted:true,analytics:true,marketing:true,functional:true,timestamp:new Date().toISOString()});this.hideBanner();this.enableCookies();}rejectCookies(){this.saveCookieChoice({accepted:false,analytics:false,marketing:false,functional:false,timestamp:new Date().toISOString()});this.hideBanner();this.disableCookies();}configureCookies(){const configHTML=`<div class="cookie-config-modal" id="cookieConfigModal"><div class="cookie-config-content"><h2>Configurar Cookies</h2><div class="cookie-config-section"><h3>Cookies Esenciales</h3><p>Necesarias para el funcionamiento básico del sitio.</p><label class="cookie-switch"><input type="checkbox" checked disabled><span class="slider"></span></label></div><div class="cookie-config-section"><h3>Cookies de Análisis</h3><p>Nos ayudan a entender cómo utilizas nuestra plataforma de formación.</p><label class="cookie-switch"><input type="checkbox" id="analyticsCookie"><span class="slider"></span></label></div><div class="cookie-config-section"><h3>Cookies de Marketing</h3><p>Utilizadas para mostrarte cursos relevantes.</p><label class="cookie-switch"><input type="checkbox" id="marketingCookie"><span class="slider"></span></label></div><div class="cookie-config-buttons"><button class="cookie-btn cookie-btn-accept" onclick="cookieBannerInstance.saveConfiguration()">Guardar Preferencias</button><button class="cookie-btn cookie-btn-reject" onclick="cookieBannerInstance.closeConfiguration()">Cancelar</button></div></div></div>`;document.body.insertAdjacentHTML('beforeend',configHTML);const style=document.createElement('style');style.textContent=` .cookie-config-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn 0.3s ease;}.cookie-config-content{background:var(--bg-dark);border:2px solid var(--primary-color);border-radius:10px;padding:2rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;animation:slideUp 0.3s ease;}.cookie-config-content h2{color:var(--primary-color);margin-bottom:1.5rem;}.cookie-config-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,107,53,0.2);display:flex;align-items:center;justify-content:space-between;}.cookie-config-section:last-of-type{border-bottom:none;}.cookie-config-section h3{color:var(--white);font-size:1.1rem;margin-bottom:0.5rem;}.cookie-config-section p{color:var(--text-color);font-size:0.9rem;margin-bottom:0;flex:1;margin-right:1rem;}.cookie-switch{position:relative;display:inline-block;width:50px;height:24px;}.cookie-switch input{opacity:0;width:0;height:0;}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--light-bg);transition:.4s;border-radius:24px;}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:white;transition:.4s;border-radius:50%;}input:checked+.slider{background-color:var(--primary-color);}input:checked+.slider:before{transform:translateX(26px);}input:disabled+.slider{opacity:0.6;cursor:not-allowed;}.cookie-config-buttons{margin-top:2rem;display:flex;gap:1rem;justify-content:center;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes slideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}`;document.head.appendChild(style);}saveConfiguration(){const analytics=document.getElementById('analyticsCookie').checked;const marketing=document.getElementById('marketingCookie').checked;this.saveCookieChoice({accepted:true,analytics:analytics,marketing:marketing,functional:true,timestamp:new Date().toISOString()});this.closeConfiguration();this.hideBanner();if (analytics||marketing){this.enableCookies();}else{this.disableCookies();}}closeConfiguration(){const modal=document.getElementById('cookieConfigModal');if (modal&&modal.parentNode){modal.parentNode.removeChild(modal);}}saveCookieChoice(choice){localStorage.setItem(this.cookieKey,JSON.stringify(choice));}addBannerStyles(){const style=document.createElement('style');style.textContent=` .cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#1a1a1a;border-top:3px solid #FF6B35;padding:1.5rem;transform:translateY(100%);transition:transform 0.5s ease;z-index:9999;box-shadow:0-4px 20px rgba(0,0,0,0.5);}.cookie-banner.active{transform:translateY(0);}.cookie-banner-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}.cookie-banner-text{flex:1;min-width:300px;}.cookie-banner-text h3{color:#FF6B35;margin:0 0 0.5rem 0;font-size:1.2rem;}.cookie-banner-text p{color:#e0e0e0;margin:0;font-size:0.9rem;line-height:1.5;}.cookie-banner-text a{color:#FF6B35;text-decoration:underline;}.cookie-banner-buttons{display:flex;gap:1rem;flex-wrap:wrap;}.cookie-btn{padding:0.75rem 1.5rem;border:none;border-radius:5px;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.5px;}.cookie-btn-accept{background:#FF6B35;color:white;}.cookie-btn-accept:hover{background:#e55a28;transform:translateY(-2px);box-shadow:0 4px 10px rgba(255,107,53,0.4);}.cookie-btn-reject{background:transparent;color:#FF6B35;border:2px solid #FF6B35;}.cookie-btn-reject:hover{background:#FF6B35;color:white;}.cookie-btn-configure{background:#333;color:#e0e0e0;}.cookie-btn-configure:hover{background:#444;}@media (max-width:768px){.cookie-banner-content{flex-direction:column;text-align:center;}.cookie-banner-buttons{justify-content:center;width:100%;}.cookie-btn{font-size:0.8rem;padding:0.6rem 1.2rem;}}`;document.head.appendChild(style);}enableCookies(){console.log('Cookies enabled');}disableCookies(){console.log('Non-essential cookies disabled');}}if (document.readyState==='loading'){document.addEventListener('DOMContentLoaded',function(){window.cookieBannerInstance=new CookieBanner();});}else{window.cookieBannerInstance=new CookieBanner();}})(); |