const text = `
             _/                                                
    _/_/_/  _/  _/_/_/    _/    _/    _/_/_/    _/_/    _/_/_/ 
 _/    _/  _/  _/    _/  _/    _/  _/        _/    _/  _/    _/
_/    _/  _/  _/    _/  _/    _/  _/        _/    _/  _/    _/ 
 _/_/_/  _/  _/_/_/      _/_/_/    _/_/_/    _/_/    _/    _/  
    _/      _/              _/                                 
   _/      _/          _/_/                                    
`;

function lerp(a, b, t) {
  return a + (b - a) * t;
}

function color(t) {
  const c1 = [0, 255, 255];   // cyan
  const c2 = [255, 0, 255];   // magenta
  const r = Math.round(lerp(c1[0], c2[0], t));
  const g = Math.round(lerp(c1[1], c2[1], t));
  const b = Math.round(lerp(c1[2], c2[2], t));
  return `rgb(${r},${g},${b})`;
}

let out = "";
const lines = text.split("\n");

lines.forEach(line => {
  for (let i = 0; i < line.length; i++) {
    const t = i / Math.max(line.length - 1, 1);
    out += `<span style="color:${color(t)}">${line[i] || " "}</span>`;
  }
  out += "<br/>";
});

document.getElementById("qlpyconbanner").innerHTML = out;