Skip to content

Instantly share code, notes, and snippets.

@natzir
Created July 17, 2025 14:34
Show Gist options
  • Select an option

  • Save natzir/a96095ad34f98b8f8fde4d4f6aeaffd0 to your computer and use it in GitHub Desktop.

Select an option

Save natzir/a96095ad34f98b8f8fde4d4f6aeaffd0 to your computer and use it in GitHub Desktop.
Comparador de Google Features
javascript:(function(){if(document.getElementById('sistrix-viewer')){document.getElementById('sistrix-viewer').remove();return;}var sparklines=document.querySelectorAll('.sparkline-frame');if(sparklines.length===0){alert('No sparklines found');return;}var currentMarket=document.querySelector('input[name="source"]');var market=currentMarket?currentMarket.value:%27es%27;var mode=%27functions%27;var overlay=document.createElement(%27div%27);overlay.id=%27sistrix-viewer%27;overlay.style.cssText=%27position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:10000;padding:20px;box-sizing:border-box;overflow-y:auto;color:white;font-family:Arial,sans-serif;%27;var header=document.createElement(%27div%27);header.innerHTML=%27<h2 style="margin:0;color:white;float:left;">Google Features</h2><div style="float:right;"><button id="mode-toggle" style="background:#3498db;color:white;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;margin-right:10px;">Comparador de Mercados</button><button id="close-btn" style="background:#e53e3e;color:white;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;">Cerrar</button></div><div style="clear:both;"></div>';var functionsDiv=document.createElement('div');functionsDiv.id='functions-mode';functionsDiv.style.cssText='display:block;';functionsDiv.innerHTML='<div style="background:rgba(255,255,255,0.1);border-radius:8px;padding:20px;margin:20px 0;"><h3 style="color:#90cdf4;margin:0 0 15px 0;">Comparador de Funciones - Mercado: '+market.toUpperCase()+'</h3><div style="float:right;margin-bottom:10px;"><select id="market-select" style="background:#333;color:white;border:1px solid #666;padding:5px;border-radius:4px;"><option value="de">Germany</option><option value="at">Austria</option><option value="ch">Switzerland</option><option value="nl">Netherlands</option><option value="fr">France</option><option value="it">Italy</option><option value="es">Spain</option><option value="pl">Poland</option><option value="uk">United Kingdom</option><option value="us">USA</option><option value="se">Sweden</option><option value="br">Brazil</option><option value="tr">Turkey</option></select></div><div style="clear:both;"></div><div id="functions-canvas" style="position:relative;background:white;border-radius:4px;height:200px;width:100%;"></div></div><div id="functions-controls" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin:20px 0;"></div>';var marketsDiv=document.createElement('div');marketsDiv.id='markets-mode';marketsDiv.style.cssText='display:none;';marketsDiv.innerHTML='<div style="background:rgba(255,255,255,0.1);border-radius:8px;padding:20px;margin:20px 0;"><h3 style="color:#90cdf4;margin:0 0 15px 0;">Comparador de Mercados</h3><div style="margin-bottom:15px;"><label style="color:#90cdf4;display:block;margin-bottom:5px;">Selecciona Función:</label><select id="function-select" style="background:#333;color:white;border:1px solid #666;padding:8px;border-radius:4px;width:250px;"></select></div><div id="markets-canvas" style="position:relative;background:white;border-radius:4px;height:200px;width:100%;"></div></div><div id="markets-controls" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:20px 0;"></div>';overlay.appendChild(header);overlay.appendChild(functionsDiv);overlay.appendChild(marketsDiv);document.body.appendChild(overlay);var sparkData=[];var colors=['#e74c3c','#3498db','#2ecc71','#f39c12','#9b59b6','#1abc9c','#e67e22','#34495e'];var functionTypes=[];for(var i=0;i<sparklines.length;i++){var frame=sparklines[i];var bg=frame.querySelector('div').style.backgroundImage;var match=bg.match(/url\(([^)]+)\)/);if(match){var originalUrl=match[1].replace(/['"]/g,'');var url=originalUrl.replace(/\/fW\/\d+\/fH\/\d+/,'/fW/800/fH/200');var typeMatch=url.match(/type\/([^\/]+)/);var type=typeMatch?typeMatch[1]:'UNKNOWN';if(functionTypes.indexOf(type)===-1){functionTypes.push(type);}sparkData.push({url:url,originalUrl:originalUrl,type:type,color:colors[i%8],visible:false});var ctrl=document.createElement('div');ctrl.style.cssText='background:rgba(255,255,255,0.1);border-radius:6px;padding:12px;display:flex;justify-content:space-between;align-items:center;border:2px solid transparent;';ctrl.innerHTML='<div style="display:flex;align-items:center;gap:10px;"><div style="width:14px;height:14px;background:'+colors[i%8]+';border-radius:50%;"></div><span>'+type+'</span></div><label><input type="checkbox" id="check-'+i+'" onchange="toggleFunction('+i+',this)"></label>';document.getElementById('functions-controls').appendChild(ctrl);}}var markets=[{code:'de',name:'Germany'},{code:'at',name:'Austria'},{code:'ch',name:'Switzerland'},{code:'nl',name:'Netherlands'},{code:'fr',name:'France'},{code:'it',name:'Italy'},{code:'es',name:'Spain'},{code:'pl',name:'Poland'},{code:'uk',name:'United Kingdom'},{code:'us',name:'USA'},{code:'se',name:'Sweden'},{code:'br',name:'Brazil'},{code:'tr',name:'Turkey'}];for(var i=0;i<functionTypes.length;i++){var option=document.createElement('option');option.value=functionTypes[i];option.textContent=functionTypes[i];document.getElementById('function-select').appendChild(option);}for(var i=0;i<markets.length;i++){var mkt=markets[i];var ctrl=document.createElement('div');ctrl.style.cssText='background:rgba(255,255,255,0.1);border-radius:6px;padding:10px;display:flex;justify-content:space-between;align-items:center;border:2px solid transparent;';ctrl.innerHTML='<div style="display:flex;align-items:center;gap:8px;"><div style="width:12px;height:12px;background:'+colors[i%8]+';border-radius:50%;"></div><span style="font-size:13px;">'+mkt.name+'</span></div><label><input type="checkbox" id="market-check-'+mkt.code+'" onchange="toggleMarket(\''+mkt.code+'\',this)" style="transform:scale(1.1);"></label>';document.getElementById('markets-controls').appendChild(ctrl);}function refreshFunctionsCanvas(){var canvas=document.getElementById('functions-canvas');canvas.innerHTML='';var count=0;for(var j=0;j<sparkData.length;j++){if(sparkData[j].visible){count++;var img=document.createElement('img');img.src=sparkData[j].url;img.style.cssText='position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;opacity:0.7;';canvas.appendChild(img);}}if(count===0){canvas.innerHTML='<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#666;">Selecciona funciones</div>';}}function refreshMarketsCanvas(){var canvas=document.getElementById('markets-canvas');canvas.innerHTML='';var selectedFunction=document.getElementById('function-select').value;var count=0;var checkedMarkets=document.querySelectorAll('[id^="market-check-"]:checked');for(var i=0;i<checkedMarkets.length;i++){var marketCode=checkedMarkets[i].id.replace('market-check-','');var functionSparkline=null;for(var j=0;j<sparkData.length;j++){if(sparkData[j].type===selectedFunction){functionSparkline=sparkData[j];break;}}if(functionSparkline){count++;var img=document.createElement('img');var marketUrl=functionSparkline.originalUrl.replace(/\/source\/[^\/]+\//,'/source/'+marketCode+'/').replace(/\/fW\/\d+\/fH\/\d+/,'/fW/800/fH/200');img.src=marketUrl;img.style.cssText='position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;opacity:0.8;';canvas.appendChild(img);}}if(count===0){canvas.innerHTML='<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#666;">Selecciona mercados</div>';}}window.toggleFunction=function(i,checkbox){sparkData[i].visible=checkbox.checked;refreshFunctionsCanvas();checkbox.parentElement.parentElement.style.borderColor=checkbox.checked?sparkData[i].color:'transparent';};window.toggleMarket=function(marketCode,checkbox){refreshMarketsCanvas();var marketIndex=-1;for(var i=0;i<markets.length;i++){if(markets[i].code===marketCode){marketIndex=i;break;}}checkbox.parentElement.parentElement.style.borderColor=checkbox.checked?colors[marketIndex%8]:'transparent';};window.updateMarket=function(){var newMarket=document.getElementById('market-select').value;for(var i=0;i<sparkData.length;i++){sparkData[i].url=sparkData[i].originalUrl.replace(/\/source\/[^\/]+\//,'/source/'+newMarket+'/').replace(/\/fW\/\d+\/fH\/\d+/,'/fW/800/fH/200');}document.querySelector('#functions-mode h3').innerHTML='Comparador de Funciones - Mercado: '+newMarket.toUpperCase();refreshFunctionsCanvas();};window.toggleMode=function(){mode=mode==='functions'?'markets':'functions';var btn=document.getElementById('mode-toggle');if(mode==='markets'){btn.textContent='Comparador de Funciones';document.getElementById('functions-mode').style.display='none';document.getElementById('functions-controls').style.display='none';document.getElementById('markets-mode').style.display='block';document.getElementById('markets-controls').style.display='grid';refreshMarketsCanvas();}else{btn.textContent='Comparador de Mercados';document.getElementById('functions-mode').style.display='block';document.getElementById('functions-controls').style.display='grid';document.getElementById('markets-mode').style.display='none';document.getElementById('markets-controls').style.display='none';}};document.getElementById('close-btn').onclick=function(){overlay.remove();};document.getElementById('mode-toggle').onclick=toggleMode;document.getElementById('market-select').onchange=updateMarket;document.getElementById('market-select').value=market;document.getElementById('function-select').onchange=refreshMarketsCanvas;})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment