ea38a12055
Todos los componentes del NIVEL 2 ya están implementados correctamente: - ✅ Notification Bar (#49) - ✅ Navbar (#50) - ✅ Hero Section (#51) - ✅ Sidebar (#52) - ✅ Footer (#53) Solo se actualizó notification-bar.css para usar variables CSS. Próximo paso: NIVEL 3 (Refinamientos visuales) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
230 lines
17 KiB
Plaintext
230 lines
17 KiB
Plaintext
(function(){function init(){setTimeout(function(){const styles=`
|
||
<style>
|
||
#sitespeak-iframe {
|
||
position: fixed;
|
||
right: 0;
|
||
border: none;
|
||
width: 100%;
|
||
box-shadow: rgba(161, 161, 170, 0.2) 0px 10px 30px 0px, rgba(161, 161, 170, 0.2) 0px 0px 0px 1px;
|
||
z-index: 9999999999;
|
||
}
|
||
|
||
#sitespeak-launcher {
|
||
cursor: pointer;
|
||
padding: 0;
|
||
color: #ffffff;
|
||
background-color: transparent;
|
||
border-radius: 9999px;
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 20px;
|
||
width: auto;
|
||
min-width: 50px;
|
||
height: 50px;
|
||
z-index: 9999998;
|
||
font-size: 15px;
|
||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||
font-weight: 400;
|
||
border: none;
|
||
opacity: 0;
|
||
transition: all 250ms cubic-bezier(0.33, 0.00, 0.00, 1.00);
|
||
transition-property: opacity, transform;
|
||
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
#sitespeak-launcher-inner {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: auto;
|
||
min-width: 50px;
|
||
height: 50px;
|
||
border-radius: 9999px;
|
||
background: #4361ee;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
#sitespeak-launcher.open #sitespeak-launcher-inner {
|
||
background: #4361ee !important;
|
||
}
|
||
|
||
#sitespeak-launcher-inner::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -0.5px;
|
||
border-radius: 9999px;
|
||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMzguMDQ1IDIzSDYxLjg1MzJDMjguMzA0NSAyMyAxIDUwLjQzMzUgMSA4NC4xNjVDMSAxMDMuMjY3IDkuNzY3OSAxMjAuMzQ2IDIzLjQ2MzcgMTMxLjU3NUMzOS45MTE3IDE0Ni4zMTQgNzguNjcxIDE3NiA3OC42NzEgMTc2TDc4LjU3MzEgMTQ1LjMxOUgxMzguMDQ1QzE3MS41OTMgMTQ1LjMxOSAxOTguODk4IDExNy44NzUgMTk4Ljg5OCA4NC4xNjVDMTk4Ljg5OCA1MC40NTU0IDE3MS41OTMgMjMgMTM4LjA0NSAyM1pNMTAxLjE4OSAxMTAuMDM1QzY0LjM5ODcgMTEwLjAzNSAzNy45NDI3IDk0LjA4MjIgMzYuMjg5MiA5My4wNzYzTDQ2LjEyMzIgNzYuOTcwNEw1NS44NTkyIDYwLjgzMThDNTcuNTk5OCA2MS44NzA1IDk5LjIwOTIgODYuMjMxNSAxNDUuMzY2IDYwLjQ2TDE2My41OTggOTMuNDkxOEMxNDEuMzg0IDEwNS44OTEgMTE5Ljk0MyAxMTAuMDM1IDEwMS4xNzggMTEwLjAzNUgxMDEuMTg5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
|
||
background-size: 28px;
|
||
background-position: center 12px;
|
||
background-repeat: no-repeat;
|
||
pointer-events: none;
|
||
}
|
||
|
||
#sitespeak-launcher-inner {
|
||
position: relative;
|
||
}
|
||
|
||
#sitespeak-launcher.unread #sitespeak-launcher-inner {
|
||
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgNTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUwMCAxNy44QzQ5OS4zNTQgMTcuOTMxMSA0OTguNjg1IDE4IDQ5OCAxOEM0OTIuNDc3IDE4IDQ4OCAxMy41MjI4IDQ4OCA4QzQ4OCA0LjcyODgxIDQ4OS41NzEgMS44MjQ0NiA0OTEuOTk5IDBIMFY1MEg1MDBWMTcuOFoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=');
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-position: right;
|
||
}
|
||
|
||
#sitespeak-launcher.open #sitespeak-launcher-inner::before {
|
||
background-image: none !important;
|
||
}
|
||
|
||
#sitespeak-launcher.loaded {
|
||
opacity: 1;
|
||
}
|
||
|
||
#sitespeak-launcher:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
#sitespeak-launcher:active {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
#sitespeak-hide-chatbot {
|
||
position: fixed;
|
||
display: block;
|
||
width: 40px;
|
||
height: 50px;
|
||
z-index: 9999998;
|
||
background: transparent;
|
||
}
|
||
|
||
#sitespeak-notification-badge {
|
||
position: absolute;
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
top: 0;
|
||
right: -6px;
|
||
border-radius: 9999px;
|
||
background-color: #f43f5e;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
z-index: 9999998;
|
||
}
|
||
|
||
#sitespeak-launcher.unread #sitespeak-notification-badge {
|
||
display: flex;
|
||
}
|
||
|
||
#sitespeak-welcome-bubble {
|
||
position: fixed;
|
||
left: 20px;
|
||
bottom: 84px;
|
||
padding-right: 40px;
|
||
z-index: 9999997;
|
||
opacity: 0;
|
||
transform: translateY(10px) scale(0.95);
|
||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
display: flex;
|
||
max-width: 520px;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
#sitespeak-welcome-bubble.show {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
visibility: visible;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
#sitespeak-welcome-bubble:hover .sitespeak-welcome-close {
|
||
opacity: 1;
|
||
}
|
||
|
||
.sitespeak-welcome-message {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
box-shadow: rgba(161, 161, 170, 0.2) 0px 10px 30px 0px, rgba(161, 161, 170, 0.2) 0px 0px 0px 1px;
|
||
padding: 16px;
|
||
color: #18181B;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
margin-bottom: 12px;
|
||
position: relative;
|
||
width: fit-content;
|
||
}
|
||
|
||
.sitespeak-welcome-message p {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sitespeak-welcome-message:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.sitespeak-welcome-message:first-child:hover .sitespeak-welcome-close {
|
||
opacity: 1;
|
||
}
|
||
|
||
.sitespeak-welcome-close {
|
||
position: absolute;
|
||
top: -8px;
|
||
right: -8px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: none;
|
||
background: #e4e4e7;
|
||
border-radius: 50%;
|
||
border: 1px solid #d4d4d8;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
padding: 0;
|
||
}
|
||
|
||
.sitespeak-welcome-close:hover {
|
||
color: #18181B !important;
|
||
}
|
||
</style>`;const enableHiding=('0'==='1'&&''!=='1');if(enableHiding){if(localStorage.getItem('sitespeak-chatbot-hide')==='true'){return;}}
|
||
document.head.insertAdjacentHTML('beforeend',styles);let unread=0;let isOpen=false;let welcomeBubble=null;let identifyTraits={};function getChatbotState(){const key=`sitespeak-chatbot-state-66f87ce4-f189-400f-ba2a-5d588845b6c8`;try{const state=localStorage.getItem(key);return state?JSON.parse(state):{isOpen:false};}catch{return{isOpen:false};}}
|
||
function saveChatbotState(state){const key=`sitespeak-chatbot-state-66f87ce4-f189-400f-ba2a-5d588845b6c8`;localStorage.setItem(key,JSON.stringify(state));}
|
||
const persistedState=getChatbotState();isOpen=persistedState.isOpen&&!(''==='1');const welcomeMessages=`Hi there! What can I help you with today?`.split('\n').filter(msg=>msg.trim());const autoShowWelcomeMessage='3s';let logo=`<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.93 139.93" height="28" width="28" style="padding-top:3px;"><g><path d="m125.98,0H55.94C25.1,0,0,25.09,0,55.94c0,17.47,8.06,33.09,20.65,43.36,15.12,13.48,50.75,40.63,50.75,40.63l-.09-28.06h54.67c30.84,0,55.94-25.1,55.94-55.93S156.82,0,125.98,0Zm-33.88,79.6c-33.82,0-58.14-14.59-59.66-15.51l9.04-14.73,8.95-14.76c1.6.95,39.85,23.23,82.28-.34l16.76,30.21c-20.42,11.34-40.13,15.13-57.38,15.13Z" fill="#fff" /></g></svg>`;const launcherIcon='';const xIcon=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.85" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;const minWidth='640';if(''!==''){logo=`<img src="" alt="Chatbot Logo" style="width: 24px; height: 24px; margin: 0; padding: 0;">`;}
|
||
const iframe=document.createElement('iframe');iframe.setAttribute('id','sitespeak-iframe');iframe.setAttribute('allow','microphone');const pageLang=document.documentElement.lang||navigator.language||'en';const langParam='&lang='+encodeURIComponent(pageLang);iframe.src='https://chatbot.sitespeak.ai/embed/66f87ce4-f189-400f-ba2a-5d588845b6c8?title=BeamAI&theme=light&em=1'+langParam;iframe.style.display='none';iframe.onload=()=>{if(!(''==='1')&&persistedState.isOpen){iframe.style.display='block';isOpen=true;launcher.classList.add('open');launcherInner.innerHTML=xIcon+launcherText;setTimeout(()=>{iframe.contentWindow.postMessage({openChat:true},'*');},100);if(enableHiding){hideChat.style.display='none';}}};iframe.style.bottom=window.innerWidth<minWidth?'0':'84px';if('bottom-left'==='bottom-left'){iframe.style.left=window.innerWidth<minWidth?'0':'20px';}else{iframe.style.right=window.innerWidth<minWidth?'0':'20px';}
|
||
iframe.style.width=window.innerWidth<minWidth?'100%':'420px';iframe.style.height=window.innerWidth<minWidth?'100%':'75vh';iframe.style.maxHeight=window.innerWidth<minWidth?'100%':'500px';iframe.style.borderRadius=window.innerWidth<minWidth?'0':'0.80rem';iframe.style.backgroundColor='#ffffff';document.body.appendChild(iframe);const launcher=document.createElement('button');const launcherText=(''?'<span style="margin-top: -2px; margin-left: 8px; padding-right: 2px;"></span>':'');launcher.setAttribute('id','sitespeak-launcher');const launcherInner=document.createElement('div');launcherInner.setAttribute('id','sitespeak-launcher-inner');launcher.appendChild(launcherInner);const hideChat=document.createElement('button');if(enableHiding){hideChat.setAttribute('id','sitespeak-hide-chatbot');}
|
||
setTimeout(()=>{launcher.classList.add('loaded');},100);if(launcherText){launcherInner.style.padding='0 14px';}
|
||
if(!persistedState.isOpen){launcherInner.innerHTML=(launcherText?logo:'')+launcherText;if(enableHiding){launcherInner.innerHTML=(launcherText?logo:'')+launcherText+xIcon;}}
|
||
launcher.onclick=()=>{if(welcomeBubble&&welcomeBubble.classList.contains('show')){welcomeBubble.classList.remove('show');setWelcomeDismissed();setTimeout(()=>{if(welcomeBubble){welcomeBubble.remove();welcomeBubble=null;}},300);}
|
||
if(iframe.style.display==='none'){isOpen=true;saveChatbotState({isOpen:true});iframe.contentWindow.postMessage({openChat:true},'*');iframe.style.display='block';launcherInner.innerHTML=xIcon+launcherText;launcher.classList.add('open');setTimeout(()=>{launcher.classList.remove('unread');unread=0;},1000);if(enableHiding){hideChat.style.display='none';}}else{isOpen=false;saveChatbotState({isOpen:false});iframe.contentWindow.postMessage({closeChat:true},'*');iframe.style.display='none';launcherInner.innerHTML=(launcherText?logo:'')+launcherText;launcher.classList.remove('open');if(enableHiding){hideChat.style.display='block';launcherInner.innerHTML=(!launcherIcon?logo:'')+launcherText+xIcon;}}};if(enableHiding){hideChat.onclick=()=>{iframe.style.display='none';launcher.style.display='none';hideChat.style.display='none';window.localStorage.setItem('sitespeak-chatbot-hide','true');};}
|
||
if(window.innerWidth>=minWidth||true){document.body.appendChild(launcher);if(enableHiding){const rightOffset=window.innerWidth-launcher.getBoundingClientRect().right;const bottomOffset=window.innerHeight-launcher.getBoundingClientRect().bottom;hideChat.style.right=rightOffset+'px';hideChat.style.bottom=bottomOffset+'px';document.body.appendChild(hideChat);}}
|
||
window.addEventListener('resize',()=>{iframe.style.bottom=window.innerWidth<minWidth?'0':'5rem';if('bottom-left'==='bottom-left'){iframe.style.left=window.innerWidth<minWidth?'0':'1rem';}else{iframe.style.right=window.innerWidth<minWidth?'0':'1rem';}
|
||
iframe.style.width=window.innerWidth<minWidth?'100%':'420px';iframe.style.height=window.innerWidth<minWidth?'100%':'75vh';iframe.style.maxHeight=window.innerWidth<minWidth?'100%':'500px';iframe.style.borderRadius=window.innerWidth<minWidth?'0':'0.80rem';});window.addEventListener('message',(event)=>{if(event.origin!=='https://chatbot.sitespeak.ai'){return}
|
||
if(event.data.closeChat){isOpen=false;saveChatbotState({isOpen:false});iframe.style.display='none';launcherInner.innerHTML=(launcherText?logo:'')+launcherText
|
||
launcher.classList.remove('open');if(enableHiding){hideChat.style.display='flex';launcherInner.innerHTML=(!launcherIcon?logo:'')+launcherText+xIcon;}}
|
||
if(event.data.openIntercom&&window.Intercom){window.Intercom('show');}
|
||
if(!isOpen&&event.data.unreadMessages>0){unread=unread<9?unread+event.data.unreadMessages:9;const notification=document.createElement('div');notification.setAttribute('id','sitespeak-notification-badge');notification.innerHTML=unread;launcher.appendChild(notification);launcher.classList.add('unread');}
|
||
if(event.data.onChatReady){if(window.sitespeak&&window.sitespeak.init){window.sitespeak.init();}}});window.sitespeak={init:()=>{var _sitespeak=window._sitespeak||[];for(var i=_sitespeak.length-1;i>=0;i--){if(_sitespeak[i][0]==='onReady'){_onReady(_sitespeak[i][1]);}}},identify:(userId,traits)=>{identifyTraits=traits||{};iframe.contentWindow.postMessage({identify:{userId,traits}},'*');}};function _onReady(callback){if(typeof callback==='function'){callback();}}
|
||
function processTemplates(message){return message.replace(/\{\{\s*([^|]+?)\s*\|\s*([^}]+?)\s*\}\}/g,(match,traitName,fallback)=>{const trait=traitName.trim();const fallbackValue=fallback.trim();return identifyTraits[trait]!==undefined?identifyTraits[trait]:fallbackValue;});}
|
||
function isWelcomeDismissed(){const key=`sitespeak-welcome-dismissed-66f87ce4-f189-400f-ba2a-5d588845b6c8`;const dismissalData=localStorage.getItem(key);if(!dismissalData){return false;}
|
||
try{const data=JSON.parse(dismissalData);const now=Date.now();const thirtyDaysInMs=30*24*60*60*1000;if(now-data.timestamp>thirtyDaysInMs){localStorage.removeItem(key);return false;}
|
||
return data.dismissed;}catch(error){localStorage.removeItem(key);return false;}}
|
||
function setWelcomeDismissed(){const key=`sitespeak-welcome-dismissed-66f87ce4-f189-400f-ba2a-5d588845b6c8`;const dismissalData={dismissed:true,timestamp:Date.now()};localStorage.setItem(key,JSON.stringify(dismissalData));}
|
||
function createWelcomeBubble(){if(welcomeMessages.length===0||isWelcomeDismissed()||''==='1'||autoShowWelcomeMessage==='never'){return;}
|
||
welcomeBubble=document.createElement('div');welcomeBubble.setAttribute('id','sitespeak-welcome-bubble');welcomeMessages.forEach((message,index)=>{const messageDiv=document.createElement('div');const messageParagraph=document.createElement('p');messageDiv.className='sitespeak-welcome-message';messageDiv.setAttribute('data-original-message',message.trim());messageParagraph.innerHTML=message.trim();messageDiv.appendChild(messageParagraph);messageDiv.style.opacity='0';messageDiv.style.transform='translateY(10px) scale(0.95)';messageDiv.style.transition='all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)';messageDiv.style.cursor='pointer';messageDiv.onclick=(e)=>{if(e.target.classList.contains('sitespeak-welcome-close')){return;}
|
||
welcomeBubble.classList.remove('show');setWelcomeDismissed();setTimeout(()=>{if(welcomeBubble){welcomeBubble.remove();welcomeBubble=null;}},300);if(iframe.style.display==='none'){isOpen=true;iframe.contentWindow.postMessage({openChat:true},'*');iframe.style.display='block';launcherInner.innerHTML=xIcon+launcherText;launcher.classList.add('open');setTimeout(()=>{launcher.classList.remove('unread');unread=0;},1000);if(enableHiding){hideChat.style.display='none';}}};if(index===0){const closeButton=document.createElement('button');closeButton.className='sitespeak-welcome-close';closeButton.innerHTML='×';closeButton.title='Close';closeButton.onclick=(e)=>{e.stopPropagation();welcomeBubble.classList.remove('show');setWelcomeDismissed();setTimeout(()=>{if(welcomeBubble){welcomeBubble.remove();welcomeBubble=null;}},300);};messageDiv.appendChild(closeButton);}
|
||
welcomeBubble.appendChild(messageDiv);});document.body.appendChild(welcomeBubble);const delayMap={'1s':1000,'3s':3000,'5s':5000,'10s':10000};const delay=delayMap[autoShowWelcomeMessage]||3000;setTimeout(()=>{if(welcomeBubble&&!isOpen){const messages=welcomeBubble.querySelectorAll('.sitespeak-welcome-message');messages.forEach((messageDiv)=>{const originalMessage=messageDiv.getAttribute('data-original-message');const processedMessage=processTemplates(originalMessage);const paragraph=messageDiv.querySelector('p');paragraph.innerHTML=processedMessage;});welcomeBubble.classList.add('show');messages.forEach((message,index)=>{setTimeout(()=>{message.style.opacity='1';message.style.transform='translateY(0) scale(1)';},index*150);});}},delay);}
|
||
setTimeout(()=>{createWelcomeBubble();},1000);},'900');}
|
||
if(document.readyState==='complete'){init();}else{window.addEventListener('load',init);}})(); |