Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save seoutopico/e0b1d551a056aece8210c77780b49693 to your computer and use it in GitHub Desktop.

Select an option

Save seoutopico/e0b1d551a056aece8210c77780b49693 to your computer and use it in GitHub Desktop.
Bookmarklet para crear un índice interactivo de preguntas en tus conversaciones de ChatGPT. Permite encontrar y navegar rápidamente por preguntas anteriores, evitando el scroll infinito y mejorando la productividad. Compatible con Chrome, Firefox, Edge y otros navegadores modernos. Solo copia este código, guárdalo como marcador en tu barra de fa…
javascript:(function(){var q=document.querySelectorAll('[data-message-author-role="user"]');if(!q.length){var t=document.createElement('div');t.style='position:fixed;z-index:10001;top:24px;right:24px;background:linear-gradient(135deg,#ff4757,#ff3838);color:white;padding:16px 20px;border-radius:12px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;box-shadow:0 8px 24px rgba(255,71,87,0.3);transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)';t.innerHTML='⚠%EF%B8%8F No se encontraron preguntas en esta página';document.body.appendChild(t);setTimeout(()=>t.style.transform='translateX(0)',100);setTimeout(()=>{t.style.transform='translateX(100%)';setTimeout(()=>document.body.removeChild(t),300)},3000);return}var o=document.createElement('div');o.style='position:fixed;z-index:10000;top:0;left:0;width:100vw;height:100vh;background:rgba(20,24,28,0.4);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1)';o.onclick=function(e){if(e.target===o)c()};var d=document.createElement('div');d.style='background:linear-gradient(145deg,rgba(42,46,52,0.98),rgba(35,38,44,0.98));padding:0;border-radius:24px;min-width:420px;max-width:85vw;max-height:85vh;box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.1);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#f7fafc;position:relative;overflow:hidden;transform:scale(0.95);transition:transform 0.25s cubic-bezier(0.4,0,0.2,1)';var h=document.createElement('div');h.style='background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:24px 32px;border-radius:24px 24px 0 0;position:relative;overflow:hidden';var s=document.createElement('div');s.style='position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:shine 2s infinite';h.appendChild(s);var ti=document.createElement('h2');ti.style='margin:0;font-size:20px;font-weight:700;color:white;text-shadow:0 2px 4px rgba(0,0,0,0.3);position:relative;z-index:1';ti.innerHTML='📋 Índice de Preguntas <span style="font-size:14px;opacity:0.8;font-weight:400">('+q.length+')</span>';h.appendChild(ti);var b=document.createElement('button');b.innerHTML='✕';b.style='position:absolute;top:20px;right:24px;z-index:2;background:rgba(255,255,255,0.15);border:none;color:white;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);backdrop-filter:blur(10px)';b.onmouseover=()=>b.style.background='rgba(255,255,255,0.25)';b.onmouseout=()=>b.style.background='rgba(255,255,255,0.15)';b.onclick=c;h.appendChild(b);d.appendChild(h);var co=document.createElement('div');co.style='padding:24px 32px 32px 32px;max-height:calc(85vh - 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#667eea rgba(255,255,255,0.1)';var st=document.createElement('style');st.textContent='@keyframes shine{0%{left:-100%}100%{left:100%}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}';document.head.appendChild(st);var l=document.createElement('ol');l.style='list-style:none;margin:0;padding:0;counter-reset:question-counter';q.forEach((qu,i)=>{if(!qu.id)qu.id='pregunta_'+i;var qt=qu.innerText.trim();var tr=qt.slice(0,85)+(qt.length>85?'...':'');var li=document.createElement('li');li.style='counter-increment:question-counter;margin-bottom:12px;animation:fadeInUp 0.3s cubic-bezier(0.4,0,0.2,1) '+(i*0.05)+'s both';var a=document.createElement('a');a.href='#'+qu.id;a.style='display:flex;align-items:flex-start;padding:16px 20px;text-decoration:none;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;color:#e2e8f0;font-weight:500;font-size:15px;line-height:1.5;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden';a.innerHTML='<span style="background:linear-gradient(135deg,#667eea,#764ba2);color:white;font-weight:700;min-width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;margin-right:16px;flex-shrink:0;box-shadow:0 4px 12px rgba(102,126,234,0.3)">'+(i+1)+'</span><span style="flex:1">'+(tr||'[Pregunta sin texto]')+'</span>';a.onmouseover=function(){a.style.background='rgba(102,126,234,0.15)';a.style.borderColor='rgba(102,126,234,0.3)';a.style.transform='translateY(-2px)';a.style.boxShadow='0 8px 24px rgba(102,126,234,0.2)'};a.onmouseout=function(){a.style.background='rgba(255,255,255,0.03)';a.style.borderColor='rgba(255,255,255,0.08)';a.style.transform='translateY(0)';a.style.boxShadow='none'};a.onclick=function(){c();setTimeout(()=>{qu.scrollIntoView({behavior:'smooth',block:'center'});qu.style.transition='all 0.3s ease';qu.style.background='rgba(102,126,234,0.1)';qu.style.borderRadius='12px';setTimeout(()=>{qu.style.background='';qu.style.borderRadius=''},2000)},300)};li.appendChild(a);l.appendChild(li)});co.appendChild(l);d.appendChild(co);o.appendChild(d);document.body.appendChild(o);function c(){o.style.opacity='0';d.style.transform='scale(0.95)';setTimeout(()=>{if(document.body.contains(o))document.body.removeChild(o);if(document.head.contains(st))document.head.removeChild(st)},250)}function k(e){if(e.key==='Escape'){c();document.removeEventListener('keydown',k)}}document.addEventListener('keydown',k);requestAnimationFrame(()=>{o.style.opacity='1';d.style.transform='scale(1)'})})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment