<div id="dinoviewer" width="256" height="256"></div>
<input
  id="blk"
  type="number"
  style="
    display: none;
    font-family: system-ui;
    font-weight: 700;
    width: 125px;
    z-index: 100;
    background-color: transparent;
    color: white;
    border: none;
  "
/>

<script id="preview" mint="MINT_INSCRIPTION_ID">
  // Retrieve render area
  const root = document.getElementById("dinoviewer");
  root.parentElement.style.width = "100%";
  root.parentElement.style.height = "100%";
  root.parentElement.style.padding = "0px";
  root.parentElement.style.margin = "0px";

  const orgWidth = 212;
  const orgHeight = 212;
  let scaleW = 1;
  let scaleH = 1;
  let blockNumber = "0";

  const colorMap = {
    1: "#ff4e1a", // red
    2: "#ff8a25", // orange
    3: "#ffbe2b", // yellow
    4: "#50C878", // green not lightened !
    5: "#007668", // teal not lightened !
    6: "#2067F0", // blue
    7: "#08b1ff", // blue
    8: "#7282c8", // purple
    9: "#9173c7", // purple
    0: "#585663", // grey
  };

  const colorMapS1 = {
    1: "#006486",
    2: "#007CB5",
    3: "#465AB2",
    4: "#6D47B1",
    5: "#873B9C",
    6: "#CC2F00",
    7: "#DB6600",
    8: "#E39E00",
    9: "#76B80D",
    0: "#007668",
  };

  const colorMapS2 = {
    1: "#007CB5",
    2: "#465AB2",
    3: "#6D47B1",
    4: "#873B9C",
    5: "#CC2F00",
    6: "#DB6600",
    7: "#E39E00",
    8: "#76B80D",
    9: "#007668",
    0: "#006486",
  };

  const colorMapS3 = {
    1: "#465AB2",
    2: "#6D47B1",
    3: "#873B9C",
    4: "#CC2F00",
    5: "#DB6600",
    6: "#E39E00",
    7: "#76B80D",
    8: "#007668",
    9: "#006486",
    0: "#007CB5",
  };

  const colorMapS4 = {
    1: "#6D47B1",
    2: "#873B9C",
    3: "#CC2F00",
    4: "#DB6600",
    5: "#E39E00",
    6: "#76B80D",
    7: "#007668",
    8: "#006486",
    9: "#007CB5",
    0: "#465AB2",
  };

  const colorMapS5 = {
    1: "#873B9C",
    2: "#CC2F00",
    3: "#DB6600",
    4: "#E39E00",
    5: "#76B80D",
    6: "#007668",
    7: "#006486",
    8: "#007CB5",
    9: "#465AB2",
    0: "#6D47B1",
  };

  const colorMapSpecial = {
    1: "#A2FF00", // GITD
    2: "#49EFEF", // Alien
    3: "#FFB800", // Gold
    4: "#FFA1FB", // Bubblegum
    5: "#FF7528", // Orange
    6: "#FF1E39", // Red
    7: "#00B127", // Green
    8: "#2A32FF", // Blue
    9: "#A9A8D6", // Platinum
  };

  // Resize window
  window.addEventListener("resize", resize, true);
  resize();

  // Retrieve content inscription id
  let mintText = document.getElementById("preview").getAttribute("mint");

  // Check no mint provided
  if (mintText.includes("MINT_INSCRIPTION_ID")) {
    let input = document.getElementById("blk");
    input.style.display = "block";
    input.style.position = "absolute";
    input.style.fontSize = "20px";
    input.style.margin = "20px";
    input.style.top = "0";
    input.value = blockNumber;
    input.addEventListener("input", (event) => {
      blockNumber = input.value;
      update();
    });
    update();
  }
  // Mint was provided
  else {
    const request = new XMLHttpRequest();
    try {
      request.open("GET", "/content/" + mintText);
      request.responseType = "text";
      request.addEventListener("load", () => initialize(request.response));
      request.addEventListener("error", () => console.error("XHR error"));
      request.send();
    } catch (error) {
      console.error(`XHR error ${request.status}`);
    }
  }

  function initialize(result) {
    if (result) {
      console.log("Result", result);
      data = JSON.parse(result);
      blockNumber = data.blk;
    }
    update();
  }

  function resize(event) {
    root.width = window.innerWidth;
    root.height = window.innerHeight;
    scaleW = root.width / orgWidth;
    scaleH = root.height / orgHeight;
    offsetX = 0;
    offsetY = 0;
    if (scaleH < scaleW) {
      scaleW = scaleH;
      offsetX = (root.width - orgWidth * scaleW) / 2;
    } else {
      scaleH = scaleW;
      offsetY = (root.height - orgHeight * scaleH) / 2;
    }
    root.style.zoom = scaleW / 2;
    update("resize");
  }

  function update() {
    generateHtmlBasedOnBlockNumber(blockNumber);
  }

  function generateSvgForDigits(blockNumber) {
    const originalString = blockNumber.toString();
    const digits = originalString
      .padStart(7, "0")
      .split("")
      .map(Number)
      .reverse();
    let svgs = [];

    if (originalString.length >= 1) {
      const colorForThirdDigit = colorMapS1[digits[0]] || "transparent";
      svgs.push(`
            <div style="stroke:#000000;stroke-width:6;position: absolute; margin:10px;top: 65px; left: 125px; z-index:0; height:200px;">
              <svg width="160" height="160" viewBox="10 -5 100 100" xmlns="http://www.w3.org/2000/svg">
              <path d="M 80,80 L 0,100 A 180,190 0 0 1 100,0 Z" fill="${colorForThirdDigit}" />
              </svg>
            </div>
        `);
    } // 1st spike
    if (originalString.length >= 1) {
      const colorForFourthDigit = colorMapS2[digits[0]] || "transparent";
      svgs.push(`
            <div style="stroke:#000000;stroke-width:6;position: absolute; margin:10px;top: 120px; left: 200px; transform: rotate(33deg);">
              <svg width="140" height="140" viewBox="10 -5 100 100" xmlns="http://www.w3.org/2000/svg">
              <path d="M 80,80 L 0,220 A 180,190 0 0 1 100,0 Z" fill="${colorForFourthDigit}" />
              </svg>
            </div>
        `);
    } // 2nd spike
    if (originalString.length >= 1) {
      const colorForSixthDigit = colorMapS3[digits[0]] || "transparent";
      svgs.push(`
             <div style="stroke:#000000;stroke-width:6;position: absolute; margin:10px;top: 185px; left: 200px; transform: rotate(63deg);">
              <svg width="140" height="140" viewBox="10 -5 100 100" xmlns="http://www.w3.org/2000/svg">
              <path d="M 80,80 L 0,220 A 180,190 0 0 1 100,0 Z" fill="${colorForSixthDigit}" />
              </svg>
            </div>
             `);
    } // 3rd spike
    if (originalString.length >= 1) {
      const colorForSixthDigit = colorMapS4[digits[0]] || "transparent";
      svgs.push(`
             <div style="stroke:#000000;stroke-width:6;position: absolute; margin:10px;top: 316px; left: 181px; transform: rotate(38deg);">
              <svg width="100" height="100" viewBox="10 -5 100 100" xmlns="http://www.w3.org/2000/svg">
              <path d="M 80,80 L 0,220 A 180,190 0 0 1 100,0 Z" fill="${colorForSixthDigit}" />
              </svg>
            </div>
             `);
    } // 4th spike
    if (originalString.length >= 1) {
      const colorForSixthDigit = colorMapS5[digits[0]] || "transparent";
      svgs.push(`
<div style="stroke:#000000;stroke-width:6;position: absolute; margin:10px;top: 304px; left: 224px; transform: rotate(0deg); z-index:0;">
              <svg width="100" height="100" viewBox="-1 -19  100 100 " xmlns="http://www.w3.org/2000/svg">
              <path d="M 80,80 L 0,220 A 180,190 0 0 1 100,0 Z" fill="${colorForSixthDigit}" transform ="rotate(40)"/>
              </svg>
            </div>
             `);
    } // 5th spike
    if (originalString.length >= 1) {
      const colorForSecondDigit = colorMap[digits[2]] || "transparent";
      svgs.push(`
              <div style="stroke:#000000;stroke-width:3;position: absolute; top:95px; left:73px; z-index:0;">
           <svg xmlns="http://www.w3.org/2000/svg" width="300" height= "330" viewBox="0 0 100 85" xml:space="preserve"><path d="M8 100c-.47-3.18-.78-7.69 0-13 .82-5.6 2.56-10.03 4-13 4.54 1.42 9.73 2.68 15.5 3.5 9.48 1.34 19.15 1.27 28.62-.15q2.865-.435 5.7-1.02c.81-.17 1.76-.55 2.59-.57 1.37-.03 1.07-.22 1.53 1.26 1.51 4.87 3.26 9.66 5.63 14.19 1.13 2.15 1.83 2.67 2.48 3.07 2.64 1.62 5.91.42 6.45.22 1.93-.74 3.13-2 4-3 5.58-6.37 6.11-11.03 8-11 2.02.03 4.07 5.38 4 10-.07 4.32-1.98 7.53-3 9-13.08.57-23.81.74-31.35.79-8.43.05-13.46-.06-38.86-.2z" fill="${colorForSecondDigit}"/></svg>

        </div>
          `);
    } // body
    if (originalString.length >= 1) {
      const colorForSecondDigit = colorMap[digits[2]] || "transparent";
      svgs.push(`
              <div style="position: absolute; top: 200px;left:8px; z-index:0; scale:0.80;">
          <svg xmlns="http://www.w3.org/2000/svg" width="300" height="250" viewBox="10 11 50 90" xml:space="preserve"><path d="M74.99 91.02c.07.03.15.07.22.12.91.54 1.34 1.62 1.59 2.65.52 2.24.41 4.57.25 6.86-.01.11-.02.23-.11.3-.07.06-.18.06-.27.06C65.45 100.8 54.21 101 43 101H17c-.49 0-.94-4.12-.97-4.55-.13-1.8.02-3.63.49-5.38.19-.69.45-1.41 1.03-1.82 1.12-.8 2.23.62 3.23 1.02 2.68 1.08 6.4.77 9.21-1.27 2.37-1.72 4.38-4.87 4-8-.42-3.51-3.54-4.75-3-6 .84-1.95 8.2 1.51 19 1 6.91-.33 10.3-2.05 12 0 2.05 2.47-1.57 6.54 1 11 .01.02.03.04.04.08C64.39 89.36 66.7 90.55 68 91c1.13.39 2.33.45 3.5.22 1.18-.24 2.33-.75 3.49-.2" fill="white" fill-opacity="0.65"/></svg>
        </div>
          `);
    } // bellywhite
    if (originalString.length >= 1) {
      const colorForFirstDigit = colorMap[digits[3]];
      svgs.push(`<div style="stroke:#000000;stroke-width:6; position: absolute; top: 100px; left: 26px; height: 300px;"> 
                    <svg width="344" height="300" viewBox="19 5 220 225" fill="${colorForFirstDigit}"> <!-- Optionally adjust SVG height if necessary -->
                    <path
       d="M 135.21966,31.752237 A 101.10034,87.65625 0 0 0 34.118093,119.40847 101.10034,87.65625 0 0 0 35.407156,132.92019 97.346458,51.204521 0 0 0 24.497,156.24832 a 97.346458,51.204521 0 0 0 97.34766,51.20312 97.346458,51.204521 0 0 0 12.60937,-0.43359 101.10034,87.65625 0 0 0 0.76563,0.0469 101.10034,87.65625 0 0 0 58.99414,-16.73047 97.346458,51.204521 0 0 0 6.58984,-4.27734 101.10034,87.65625 0 0 0 1.69531,-1.33398 97.346458,51.204521 0 0 0 5.10743,-4.42578 101.10034,87.65625 0 0 0 28.71289,-60.88868 101.10034,87.65625 0 0 0 -101.09961,-87.656233 z" />
                    </svg>
            </div>
        `);
    } // head

    return svgs.join("");
  }

  function generateSvgForDigits2(blockNumber) {
    const originalString = blockNumber.toString();
    const digits = originalString
      .padStart(7, "0")
      .split("")
      .map(Number)
      .reverse();
    let svgs = [];

    if (originalString.length >= 1) {
      const colorForSeventhDigit = colorMap[digits[6]] || "FFFFFF";
      svgs.push(`
            <div style="position: absolute; top: 305px; left:40px; z-index:1; transform: scaleX(-1) rotate(-8deg);">
    <svg xmlns="http://www.w3.org/2000/svg" width="170" height="100" viewBox="0 0 110 92" xml:space="preserve"><path d="M66.42 68.72c.25.07.39.5.34 1.53-.33 6.83-5.46 13.69-11.15 17.08-12.97 7.73-31.89.99-33.56-14.94-.65-6.15 1.76-12.52 6.19-16.81 1.14-1.11 1.95-1.86 3.46-2.07 2-.28 4.24 0 6.26 0h12.52c-4.07 0-8.85 1.95-12.22 4.11-3.29 2.1-6.05 5.19-7.26 8.91s-.69 8.07 1.77 11.11c2.23 2.75 5.8 4.18 9.34 4.43 4.86.34 10.19-1.07 14.37-3.55 2.85-1.69 5.2-4.01 7.17-6.66.63-.83 2.09-3.33 2.77-3.14" fill="black"/></svg>
            </div>

        `);
    } // arm left
    if (originalString.length >= 1) {
      const colorForSeventhDigit = colorMap[digits[6]] || "FFFFFF";
      svgs.push(`
            <div style="position: absolute; top: 310px; left:140px; z-index:4;">
    <svg xmlns="http://www.w3.org/2000/svg" width="170" height="100" viewBox="0 0 65 92" xml:space="preserve"><path d="M66.42 68.72c.25.07.39.5.34 1.53-.33 6.83-5.46 13.69-11.15 17.08-12.97 7.73-31.89.99-33.56-14.94-.65-6.15 1.76-12.52 6.19-16.81 1.14-1.11 1.95-1.86 3.46-2.07 2-.28 4.24 0 6.26 0h12.52c-4.07 0-8.85 1.95-12.22 4.11-3.29 2.1-6.05 5.19-7.26 8.91s-.69 8.07 1.77 11.11c2.23 2.75 5.8 4.18 9.34 4.43 4.86.34 10.19-1.07 14.37-3.55 2.85-1.69 5.2-4.01 7.17-6.66.63-.83 2.09-3.33 2.77-3.14" fill="black"/></svg>
            </div>
        `);
    } // arm right
    if (originalString.length >= 1) {
      svgs.push(`
        <div style="position: absolute; top: 270px; left:110px; z-index:1; transform: rotate(-1deg);">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 80 80" xml:space="preserve"><path d="M28.49 37.51c1.05 1.04.68 2.88.46 4.4-.44 3.03.26 6.34 2.4 8.54 5.22 5.36 11.46.34 14.48-4.56.6-.98 1.41-1.94 2.53-2.23 1.27-.32 2.62.34 3.49 1.32s1.35 2.23 1.83 3.44c2.03 5.15 7.88 8.09 12.54 4.04 2.24-1.95 3.41-4.87 4.01-7.78.29-1.38.48-2.83 1.23-4.02 1.19-1.89 3.94-2.23 5.59-.72 1.84 1.68 2.24 4.65 2.2 7-.08 5.02-1.72 10.07-4.93 13.92s-8.05 6.42-13.07 6.5c-5.19.09-9.67-2.76-12.83-6.72-3.86 5.85-11.07 7.24-17.38 4.61-4.13-1.72-7.52-5.02-9.71-8.93-3.25-5.78-4.81-18.89 4.78-19.49.78-.05 1.61.05 2.21.53.07.05.12.1.17.15" style="fill:black;"/></svg>
        </div>

    `);
    } // mouth "w"

    return svgs.join("");
  }

  // ALL traits

  function getLook(number) {
    const numberStr = number.toString();
    const lastFourDigits = parseInt(numberStr.substring(numberStr.length - 4));
    console.log(lastFourDigits);

    if (lastFourDigits < 4800) {
      return "two_specks";
    } else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {
      return "three_specksL";
    } else {
      return "three_specksR";
    }
  } // Done

  function generateEyeStyleSvg(lookDir) {
    let lookHtml = "";
    if (lookDir === "two_specks") {
      lookHtml = `<div style="position: absolute; top: 194px; left: 50px; z-index:1;">
          <svg width="200" height="120" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              // left eye
              <ellipse cx="1" cy="12" rx="8" ry="8.8" fill="black" />

              <ellipse cx="-2" cy="10" rx="3.5" ry="3.5" fill="white" />
              <ellipse cx="0" cy="16" rx="1" ry="1" fill="white" />

              // right eye
              <ellipse cx="25" cy="12" rx="8" ry="8.8" fill="black" />

              <ellipse cx="22" cy="10" rx="3.5" ry="3.5" fill="white" />
              <ellipse cx="23" cy="16" rx="1" ry="1" fill="white" />
          </svg>
      </div>`;
    } else if (lookDir === "three_specksL") {
      lookHtml = `<div style="position: absolute; top: 194px; left: 50px; z-index:1;">
          <svg width="200" height="120" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              // left eye
              <ellipse cx="1" cy="12" rx="8" ry="8.8" fill="black" />

              <ellipse cx="-2" cy="10" rx="3.5" ry="3.5" fill="white" />
              <ellipse cx="0" cy="16" rx="1" ry="1" fill="white" />
              <ellipse cx="2.5" cy="13.8" rx="0.6" ry="0.6" fill="white" />

              // right eye
              <ellipse cx="25" cy="12" rx="8" ry="8.8" fill="black" />

              <ellipse cx="22" cy="10" rx="3.5" ry="3.5" fill="white" />
              <ellipse cx="23" cy="16" rx="1" ry="1" fill="white" />
              <ellipse cx="25.5" cy="13.8" rx="0.6" ry="0.6" fill="white" />
          </svg>
      </div>`;
    } else if (lookDir === "three_specksR") {
      lookHtml = `<div style="position: absolute; top: 194px; left: 50px; z-index:1;">
          <svg width="200" height="120" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
              // left eye
              <ellipse cx="1" cy="12" rx="8" ry="8.8" fill="black" />

              <ellipse cx="-2" cy="10" rx="3.5" ry="3.5" fill="white" />
              <ellipse cx="0" cy="16" rx="1" ry="1" fill="white" />
              <ellipse cx="-3.5" cy="15.2" rx="0.6" ry="0.6" fill="white" />

              // right eye
              <ellipse cx="25" cy="12" rx="8" ry="8.8" fill="black" />

              <ellipse cx="22" cy="10" rx="3.5" ry="3.5" fill="white" />
              <ellipse cx="23" cy="16" rx="1" ry="1" fill="white" />
              <ellipse cx="20" cy="15.2" rx="0.6" ry="0.6" fill="white" />
          </svg>
      </div>`;
    }
    return lookHtml;
  } // Done

  function c420(number) {
    const numberStr = number.toString();
    return numberStr.includes("420");
  }

  function displayJoint() {
    return `<div style="position: absolute; top: 242px; left: 55px;">
  <div style="position: absolute; z-index:3;">
    <svg width="110" height="110" viewBox="0 -18 110 110" stroke="#000000" stroke-width="2.3">
      <ellipse cx="40.8" cy="46.3" rx="3.6" ry="5.4" fill="red" />
    </svg>
  </div>
  
  <div style="position: absolute;z-index:2;">
     <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="25 50 30 20" stroke="#000000" stroke-width=".7" stroke>
     <path d="M37.48,62.76c0,0-2.23-0.59-3.43-0.39c-1.2,0.2-2.7,0.31-3.35-0.04c-0.64-0.35-2.15-0.45-2.15-0.45v1.97
		c0,0,1.03-0.15,2.92,0c1.89,0.15,2.57,0.54,3.26,0c0.69-0.54,2.75-0.1,2.75-0.1V62.76z" fill='white' />
    </svg>
  </div>

  <div style="position: absolute; z-index:1;">
    <svg width="110" height="110" viewBox="0 -18 110 110" stroke="#000000" stroke-width="2">
      <ellipse cx="86" cy="47.5" rx="4" ry="5.5" fill="black" />
    </svg>
  </div>
  
</div>`;
  } // Catnip Cig

  function c4a0(number) {
    const numberStr = number.toString();
    return numberStr.includes("4") && numberStr.includes("0");
  }

  function c33(number) {
    const numberStr = number.toString();
    return numberStr.includes("33");
  }

  function displaySpikeRingL(number) {
    return `<div style="position: absolute; top: 50px; left: 208px; z-index:1;">
                <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve"><path d="M69 53c2.47-2.24 2.9-5.52 3-7 .5.48 3.17 3.13 3 7-.17 3.96-3.17 6.34-4 7-5.66 4.5-14.18 1.87-17 1-8.58-2.65-19.14-10.13-18-17 .49-2.96 3.1-5.46 5.79-6.54C46.87 35.43 51.62 38.72 52 39c-3.83 1.16-6.78 3.44-7 6-.36 4.18 6.71 7.07 9 8 2.52 1.03 10.34 4.22 15 0" style="fill:${colorMapSpecial[3]}" stroke="black" stroke-width="5"/></svg>
    </div>`;
  } // Spike Ring  L

  function c00(number) {
    const numberStr = number.toString();
    return numberStr.includes("00");
  }

  function displaySpikeRingR(number) {
    return `<div style="position: absolute; top: 130px; left: 283px; z-index:1; transform:rotate(35deg)">
                <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve"><path d="M69 53c2.47-2.24 2.9-5.52 3-7 .5.48 3.17 3.13 3 7-.17 3.96-3.17 6.34-4 7-5.66 4.5-14.18 1.87-17 1-8.58-2.65-19.14-10.13-18-17 .49-2.96 3.1-5.46 5.79-6.54C46.87 35.43 51.62 38.72 52 39c-3.83 1.16-6.78 3.44-7 6-.36 4.18 6.71 7.07 9 8 2.52 1.03 10.34 4.22 15 0"  style="fill:${colorMapSpecial[3]}" stroke="black" stroke-width="5"/></svg>
    </div>`;
  } // Spike Ring R

  function c11(number) {
    const numberStr = number.toString();
    return numberStr.includes("11");
  }

  function displayCrown(number) {
    return `<div style="position: absolute; top: -20px; left: 83px; z-index:3;">
                  <svg width="250" height="250" viewBox="140 160 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M165.1,306.3c0,0,19.5,14,75.3,14c53.1,0,75.2-8,75.2-8v-114l-45.5,61.9l-29.8-51.7l-26.8,47.8l-48.5-58V306.3z" fill="${colorMapSpecial[3]}" stroke="#000000" stroke-width="6"/>
                  </svg>
      </div>`;
  } // Crown

  function c8a8(number) {
    const numberStr = number.toString();
    const count = (numberStr.match(/8/g) || []).length;
    return count >= 2 ? "c8a8" : null;
  }

  function displayPinkBow(number) {
    return `<div style="stroke:#000000;stroke-width:6;position: absolute; top: 157px; left: 78px;z-index:7">
        <svg width="50" height="50" viewBox="0 -5 40 49" fill="none">
        <path d="M0 36V0L18 18L0 36Z" fill="#FF94D4" />
        <path d="M36 9.43221e-07L36 36L18 18L36 9.43221e-07Z" fill="${colorMapSpecial[4]}"/>
        </svg>
    </div>`;
  } // Pink Bow

  function c88(number) {
    const numberStr = number.toString();
    return numberStr.includes("88");
  }

  function displayPinkBowSpike(number) {
    return `<div style="stroke:#000000;stroke-width:6;position: absolute; top: 155px; left: 330px; transform:rotate(58deg)">
        <svg width="50" height="50" viewBox="0 -5 40 49" fill="none">
        <path d="M0 36V0L18 18L0 36Z" fill="#FF94D4" />
        <path d="M36 9.43221e-07L36 36L18 18L36 9.43221e-07Z" fill="${colorMapSpecial[4]}"/>
        </svg>
    </div>`;
  } // Pink Bow Spike

  function c888(number) {
    const numberStr = number.toString();
    return numberStr.includes("888");
  }

  function displayBowCheek(number) {
    return `<div style="stroke:#000000;stroke-width:6;position: absolute; top: 262px; left: 336px; transform:rotate(102deg)">
        <svg width="50" height="50" viewBox="0 -5 40 49" fill="none">
        <path d="M0 36V0L18 18L0 36Z" fill="#FF94D4" />
        <path d="M36 9.43221e-07L36 36L18 18L36 9.43221e-07Z" fill="${colorMapSpecial[4]}"/>
        </svg>
    </div>`;
  } // Pink Bow Cheek

  function c9a9(number) {
    const numberStr = number.toString();
    const count = (numberStr.match(/9/g) || []).length;
    return count >= 2 ? "c9a9" : null;
  }

  function displayTrout(number) {
    return `<div style="position: absolute; top: 317px; left: 135px; transform:rotate(-90deg); z-index:0;">
                <svg stroke="#000000" stroke-width="10" width="105" height="76" viewBox="-10 0 196 130" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M176 0V76L137 38L176 0Z" fill="#0082BA"/>
                <rect width="137" height="76" rx="38" fill="#0D8DCE"/>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M38 0C17.0132 0 0 17.0132 0 38H137C137 17.0132 119.987 0 99 0H38Z" fill="#0082BA"/>
                </svg>
    </div>`;
  } // Trout

  function c99(number) {
    const numberStr = number.toString();
    return numberStr.includes("99");
  }

  function displaySalmon(number) {
    return `<div style="position: absolute; top: 325.1px; left: 111px; transform:rotate(-90deg); z-index:1">
                <svg stroke="#000000" stroke-width="10" width="126" height="76" viewBox="-10 0 236 76" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M212 0V76L173 38L212 0Z" fill="#0082BA"/>
                <rect width="173" height="76" rx="38" fill="#FF906D"/>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M38 0C17.0132 0 0 17.0132 0 38H173C173 17.0132 155.987 0 135 0H38Z" fill="#0082BA"/>
                </svg>
    </div>`;
  } // Salmon

  function m69(number) {
    return number % 69 === 0;
  }

  function cs5(number) {
    const numberStr = number.toString();
    for (let i = 0; i < numberStr.length - 4; i++) {
      // Ensure there are at least 3 characters to check
      const substring = numberStr.substring(i, i + 5); // Get the substring of 3 characters
      if (!substring.startsWith("0")) {
        // Exclude substrings starting with '0'
        const subNum = parseInt(substring, 10);
        const s = Math.sqrt(subNum);
        if (s === Math.floor(s)) {
          // Check if s is a perfect square
          return "cs5d"; // Return a different identifier for 3-digit perfect squares
        }
      }
    }
    return null;
  }

  function displayHorn(number) {
    return ` <div style="stroke:#000000;stroke-width:6;position: absolute; margin:10px;top: 40px; left: 75px; z-index:0; transform:rotate(-7deg);">
             <svg width="160" height="160" viewBox="0 0 110 100"xmlns="http://www.w3.org/2000/svg">
              <path d="M61 81c-5.73 13.76-20.82 19.1-31 14-7.5-3.76-12.06-13.06-11-23 3.17-6.66 7.11-13.75 12-21C47.29 26.88 67.12 11.61 82 2.38z" fill="white" />
              </svg>
            </div>`;
  } // Horn

  function containsFourDigitSquare(number) {
    const numberStr = number.toString();
    for (let i = 0; i <= numberStr.length - 4; i++) {
      const substring = numberStr.substring(i, i + 4);
      const num = parseInt(substring, 10);
      if (Math.sqrt(num) % 1 === 0) {
        return true;
      }
    }
    return false;
  }

  function getRainbowEyeRange(lastFourDigits) {
    if (lastFourDigits < 4800) {
      return "rainbow_speck";
    } else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {
      return "rainbow_speckL";
    } else {
      return "rainbow_speckR";
    }
  }

  function displayRainbowEyes(eyeStyle) {
    let svgHTML = "";
    switch (eyeStyle) {
      case "rainbow_speck":
        svgHTML = `
        
        
        <div style="position: absolute; top: 194px; left: 50px; z-index:2;">
            <svg width="200" height="120" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="-2" cy="10" rx="3.5" ry="3.5" fill="#C53DF5" />
                <ellipse cx="0" cy="16" rx="1" ry="1" fill="#115FF5" />
                <ellipse cx="22" cy="10" rx="3.5" ry="3.5" fill="#A1FF00" />
                <ellipse cx="23" cy="16" rx="1" ry="1" fill="#FF1D38" />
            </svg>
        </div>
        
       `;
        break;
      case "rainbow_speckL":
        svgHTML = ` 
        
          <div style="position: absolute; top: 194px; left: 50px; z-index:2;">
            <svg width="200" height="120" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="-2" cy="10" rx="3.5" ry="3.5" fill="#C53DF5" />
                <ellipse cx="0" cy="16" rx="1" ry="1" fill="#115FF5" />
                <ellipse cx="22" cy="10" rx="3.5" ry="3.5" fill="#A1FF00" />
                <ellipse cx="23" cy="16" rx="1" ry="1" fill="#FF1D38" />
                <ellipse cx="2.5" cy="13.8" rx=".6" ry=".6" fill="gold" />
                <ellipse cx="25.5" cy="13.8" rx=".6" ry=".6" fill="pink" />
            </svg>
        </div>
        
        `;
        break;
      case "rainbow_speckR":
        svgHTML = `

        <div style="position: absolute; top: 194px; left: 50px; z-index:2;">
            <svg width="200" height="120" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="-2" cy="10" rx="3.5" ry="3.5" fill="red" />
                <ellipse cx="-3.5" cy="15.2" rx=".6" ry=".6" fill="yellow" />
                <ellipse cx="0" cy="16" rx="1" ry="1" fill="lightblue" />
                <ellipse cx="22" cy="10" rx="3.5" ry="3.5" fill="orange" />
                <ellipse cx="20" cy="15.2" rx=".6" ry=".6" fill="lime" />
                <ellipse cx="23" cy="16" rx="1" ry="1" fill="purple" />
                
            </svg>
        </div>
        
        `;
        break;
    }
    return svgHTML;
  } // Rainbow Eyes 3 Styles

  function cs6(number) {
    const numberStr = number.toString();
    for (let i = 0; i < numberStr.length - 5; i++) {
      // Ensure there are at least 3 characters to check
      const substring = numberStr.substring(i, i + 6); // Get the substring of 3 characters
      if (!substring.startsWith("0")) {
        // Exclude substrings starting with '0'
        const subNum = parseInt(substring, 10);
        const s = Math.sqrt(subNum);
        if (s === Math.floor(s)) {
          // Check if s is a perfect square
          return "cs3d"; // Return a different identifier for 3-digit perfect squares
        }
      }
    }
    return null;
  }

  function displayGoldBelly(number) {
    return `<div style="position: absolute; top: 302.5px;left:22px; z-index:0; scale:0.80;">
          <svg xmlns="http://www.w3.org/2000/svg" width="300" height="137" viewBox="18 22 51 39" xml:space="preserve"><path d="M69.68 52.68c.04.02.1.05.18.1 0 0 .78.44 1.4 1.2.52.62 1.22 3.26.64 6.78-9.36 0-18.72-.01-28.08-.01l-21.61-.06c-.3-1.29-.44-2.37-.5-3.14-.22-2.5.09-3.9.22-4.43.28-1.11.49-1.93 1.12-2.19.82-.33 1.6.59 2.8 1.14 2.18 1.01 5.3.62 7.45-1.03 2.99-2.31 2.88-6.16 2.86-6.59a8.15 8.15 0 0 0-.93-3.38c4.04.52 7.53.76 10.31.87 3.67.15 6.54.1 8.41.06 2.83-.06 5.27-.19 7.22-.32-.35.28-.89.79-1.31 1.57-.35.67-.46 1.24-.54 1.68-.05.31-.39 2.37.66 4.49l.03.06c1.62 2.47 3.35 3.02 4.02 3.17.79.18 1.7.18 2.83.18 1.18.01 2.15-.07 2.82-.15" fill="${colorMapSpecial[3]}" fill-opacity="1"/></svg>
        </div>`;
  } // Gold Belly

  function cf3(number) {
    let numberStr = number.toString();
    let a = 0,
      b = 1;
    let fibNumbers = new Set();

    // Generate 3-digit Fibonacci numbers
    while (b < 1000) {
      // 1000 is the smallest 4-digit number
      if (b >= 100) {
        // 100 is the smallest 3-digit number
        fibNumbers.add(b.toString());
      }
      [a, b] = [b, a + b]; // Update the Fibonacci sequence
    }

    // Check for 3-digit Fibonacci patterns
    for (let i = 0; i <= numberStr.length - 3; i++) {
      // Loop through the number string
      let substring = numberStr.substring(i, i + 3);
      if (fibNumbers.has(substring)) {
        return "cf3";
      }
    }

    return null;
  }

  function displayBitCoin(number) {
    return `<div style="position: absolute; top: 329px; left: 135px;">
  <div style="position: absolute;">
    <svg width="110" height="110" viewBox="0 0 110 110" stroke="#000000" stroke-width="6.1">
      <ellipse cx="51" cy="50" rx="30" ry="30" fill="orange" />
    </svg>
  </div>
  <div style="position: absolute;">
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-8 -10 120 120"xml:space="preserve">
     <path d="M69.85 54.43c-.56-1.4-1.37-2.57-2.31-3.74-.94-1.18.16-1.73.83-2.8 1.53-2.49 2.08-5.57 1.5-8.44s-2.29-5.49-4.67-7.19c-.79-.57-2.32-1.14-2.32-2.26 0-.59.5-1.18.17-1.76-.24-.41-.79-.49-1.26-.53l-2.94-.24c-.83-.07-1.87-.04-1.87 1.05 0 .4.13.79.11 1.19 0 .09-.02.18-.08.25-.08.09-.21.1-.33.1-.64.03-2.81.62-3.15-.23-.09-.21.02-.45.12-.66.22-.51.66-1.65.23-2.14-.18-.21-.45-.33-.71-.44-.47-.2-5.17-1.97-5.17-.59-.78.8-.34 2.6-1.44 3.13-.29.14-.57.19-1.08.06-1.24-.31-2.36-.99-3.59-1.34-3.51-1-4.86 2.72-5.17 5.57-.06.59-.06 1.26.35 1.69.23.24.54.37.85.49 1.28.49 2.58.91 3.87 1.34.06.02.12.04.15.1.03.05.01.11 0 .17-.48 1.93-.92 3.86-1.38 5.79-.78 3.24-1.55 6.48-2.29 9.73-.44 1.94-.59 4.41-1.37 6.21-.87-.18-1.73-.56-2.57-.84-.1-.03-.2-.07-.3-.05-.13.02-.23.13-.32.23-1.74 1.95-3.3 5.29-2.24 7.9.4.99 1.5 1.21 3.32 1.86 2.1.74 3.95.93 5.21.96-.3.37-.77 1.04-1 2-.17.68-.35 1.41 0 2 .29.49 1.2.67 3 1 0 0 .82.15 3.63.01.05 0 .19-.01.31-.1.11-.08.15-.22.19-.36l.39-1.35c.08-.26.16-.53.33-.74.94-1.14 1.2 1.02 1.12 1.6-.52 3.76 4.23 3.2 6.58 3.03.15-.01.3-.03.41-.13.1-.09.13-.23.16-.35.17-.78.35-1.57.52-2.35.47-2.11 1.95-1.21 3.56-1.36 5-.47 9.49-4.01 11.02-8.81.9-2.82.72-5.93-.37-8.66m-11.84 5.51c-.22.83-.51 1.7-1.19 2.22-.57.43-1.31.53-2.02.58-2.15.14-4.31-.15-6.41-.63-.78-.18 0-3.17.08-3.85.04-.36.52-4.26.53-4.26 2.42.28 4.88.83 7.15 1.7.63.24 1.28.53 1.68 1.07.66.88.46 2.11.18 3.17m2.08-17.12c-.15.75-.48 1.47-1.01 2.02-.81.84-2.02 1.21-3.2 1.23-.44.01-4.98-.48-4.88-1.07.33-2 .67-4 1-6 .06-.35 3.03-.1 3.34-.08 1.43.13 3.6.42 4.47 1.74.41.63.43 1.43.28 2.16" style="fill:#fff"/>
    </svg>
  </div>
</div>`;
  } // Bitcoin

  function cf4(number) {
    let numberStr = number.toString();
    let a = 0,
      b = 1;
    let fibNumbers = new Set();
    console.log("we found a fib!");

    // Generate 4-digit Fibonacci numbers
    while (b < 10000) {
      // 10000 is the smallest 5-digit number
      if (b >= 1000) {
        // 1000 is the smallest 4-digit number
        fibNumbers.add(b.toString());
      }
      [a, b] = [b, a + b]; // Update the Fibonacci sequence
    }

    // Check for 4-digit Fibonacci patterns
    for (let i = 0; i <= numberStr.length - 4; i++) {
      // Loop through the number string
      let substring = numberStr.substring(i, i + 4);
      if (fibNumbers.has(substring)) {
        return "cf4"; // Return identifier for 4-digit Fibonacci numbers
      }
    }
    return null;
  }

  function displayLaserEyesRed(number) {
    return `<div style="position: relative; width: 200px; top: 194px; left: 50px; z-index:10; border:solid transparent 1px;">
              <svg width="200" height="120" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse stroke="#000000" stroke-width="1.2" cx=" 0" cy="12.22" rx="6.45" ry="6.45" fill="#FF1E39"  />
                <ellipse stroke="#000000" stroke-width="1.2" cx=" 23.1" cy="12.3" rx="6.45" ry="6.45" fill="#FF1E39"  />
              </svg>
            </div>
        
            <div style="border-top:solid 5px black; border-bottom:solid 5px black; position: absolute; top:242.7px; left: -105;transform:rotate(-15deg);z-index:10;)"> 
              <svg width="200" height="50" viewBox="0 0 200 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect z-index="2" width="200" height="50" fill="#FF1E39"/>      
              </svg>
            </div>
            
            <div style="border-top:solid 5px black; border-bottom:solid 5px black; position: absolute; top:245.4px; left: -24.5;transform:rotate(-15deg);z-index:10;"> 
              <svg width="220" height="50" viewBox="0 0 220 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect z-index="2" width="220" height="55" fill="#FF1E39"/>      
              </svg>
             </div>`;
  } // Laser Red

  function cf5(number) {
    let numberStr = number.toString();
    let a = 0,
      b = 1;
    let fibNumbers = new Set();

    // Generate 5-digit Fibonacci numbers
    while (b < 100000) {
      // 100000 is the smallest 6-digit number
      if (b >= 10000) {
        // 10000 is the smallest 5-digit number
        fibNumbers.add(b.toString());
      }
      [a, b] = [b, a + b]; // Update the Fibonacci sequence
    }

    // Check for 5-digit Fibonacci patterns
    for (let i = 0; i <= numberStr.length - 5; i++) {
      // Loop through the number string
      let substring = numberStr.substring(i, i + 5);
      if (fibNumbers.has(substring)) {
        return "cf5";
      }
    }
    return null;
  }

  function displayLaserEyesBlue(number) {
    return `<div style="position: relative; width: 200px; top: 194px; left: 50px; z-index:10; border:solid transparent 1px;">
              <svg width="200" height="120" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse stroke="#000000" stroke-width="1.2" cx=" 0" cy="12.22" rx="6.45" ry="6.45" fill="#2A32FF"  />
                <ellipse stroke="#000000" stroke-width="1.2" cx=" 23.1" cy="12.3" rx="6.45" ry="6.45" fill="#2A32FF"  />
              </svg>
            </div>
        
            <div style="border-top:solid 5px black; border-bottom:solid 5px black; position: absolute; top:242.7px; left: -105;transform:rotate(-15deg);z-index:10;)"> 
              <svg width="200" height="50" viewBox="0 0 200 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect z-index="2" width="200" height="50" fill="#2A32FF"/>      
              </svg>
            </div>
            
            <div style="border-top:solid 5px black; border-bottom:solid 5px black; position: absolute; top:245.4px; left: -24.5;transform:rotate(-15deg);z-index:10;"> 
              <svg width="220" height="50" viewBox="0 0 220 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect z-index="2" width="220" height="55" fill="#2A32FF"/>      
              </svg>
             </div>`;
  } // Laser Blue

  function c69(number) {
    const numberStr = number.toString();
    return numberStr.includes("69");
  }

  function displayHalo(number) {
    return `<div style= "position: absolute; top: 20px; left: 95px;filter: drop-shadow(1px 5px 2px rgb(253 253 253 / .05)); z-index:3;">
      <svg width="200" height="100" fill="none">
      <ellipse cx="100" cy="50" rx="90" ry="25" stroke="#000000" stroke-width="18"/>
      <ellipse cx="100" cy="50" rx="90" ry="25" stroke="white" stroke-width="5"/>
      </svg>
    </div>`;
  } // Halo

  function cf5(number) {
    let numberStr = number.toString();
    let a = 0,
      b = 1;
    let fibNumbers = new Set();

    // Generate 5-digit Fibonacci numbers
    while (b < 100000) {
      // 100000 is the smallest 6-digit number
      if (b >= 10000) {
        // 10000 is the smallest 5-digit number
        fibNumbers.add(b.toString());
      }
      [a, b] = [b, a + b]; // Update the Fibonacci sequence
    }

    // Check for 5-digit Fibonacci patterns
    for (let i = 0; i <= numberStr.length - 5; i++) {
      // Loop through the number string
      let substring = numberStr.substring(i, i + 5);
      if (fibNumbers.has(substring)) {
        return "cf5";
      }
    }

    return null;
  }

  function m12(number) {
    return number % 12 === 0;
  }

  function displayPipe(number) {
    return `<div style= "position: absolute; top: 262px; left: 46px; z-index:3;">
        <svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 18 10 9" xml:space="preserve"><circle cx="9.43" cy="21.89" r=".56"/><path d="M9.35 22.15c-.01.1-.18.12-.35.2-.18.08-.28.18-.49.39-.22.22-.33.46-.56.92-.16.34-.25.59-.5.95-.04.06-.06.09-.1.14-.33.4-.71.58-.8.62-.11.05-.56.23-1.14.15-.3-.04-.81-.11-1.11-.5-.18-.23-.15-.69-.14-1.62.01-.35.04-.64.23-.77.06-.04.17-.06.39-.09.28-.04.5-.04.57-.04s.06 0 .43.03c.38.03.69.05.74.18 0 .01 0 .01.01.02v.01c.09.3.08.62.08.62-.01.54-.02.81.06.83.06.02.16-.13.19-.18.64-1 .79-1.28.97-1.5.51-.62 1.3-.88 1.39-.77.02.02 0 .03.02.12.03.17.12.22.11.29z" style="fill:#725300;stroke:#000;stroke-width:.5;stroke-miterlimit:10"/><ellipse transform="matrix(.00809 -1 1 .00809 -17.344 27.951)" cx="5.42" cy="22.72" rx=".39" ry="1.04" style="fill:#444;stroke:#000;stroke-width:.5;stroke-miterlimit:10"/><path d="M6.22 21.58c-.01-.08-.09-.15-.17-.19-.21-.1-.45-.12-.69-.11-.18 0-.69.02-.74.25-.02.07.03.14.09.19.33.26.94.2 1.31.08.05-.02.1-.04.15-.08.04-.06.06-.1.05-.14z" style="opacity:.35;fill:none;stroke:#c6c6c6;stroke-width:.5;stroke-miterlimit:10"/></svg>
      </div>`;
  } // Pipe

  function m13(number) {
    return number % 13 === 0;
  }

  function displayTailBone(number) {
    return `
<div style="position: absolute; top: 385px; left: 320px; transform:rotate(-6deg) border:2px red solid">
        <svg width="70" height="50" viewBox="5 50 105 10" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M21.88 34.22c3.76 4.06 9.8 9.54 18.46 13.85 14.62 7.28 28.28 7.01 34.71 6.45-.21 1.35-.35 3.03-.22 4.94.08 1.21.25 2.3.45 3.25-6.25 1.02-15.67 1.7-26.59-.77-11.25-2.54-18.81-7.22-20.55-8.32a61.5 61.5 0 0 1-14-12.22c1.08-.94 2.16-1.91 3.25-2.92 1.56-1.43 3.06-2.86 4.49-4.26z" style="fill:#1f1f28;stroke:#1f1f28;stroke-width:5.5417;stroke-miterlimit:22.1667"/><path d="M33.09 40.41c2.89 1.99 6.55 4.18 10.94 6.14 4.99 2.2 9.55 3.52 13.3 4.32-1.1 1.38-2.89 3.95-3.78 7.65-.56 2.33-.69 4.74-.39 7.12-2.14-.21-4.95-.61-8.19-1.42-1.07-.26-5.3-1.38-10.55-3.83a65 65 0 0 1-10.11-5.93c1.56-1.08 4.17-3.22 6.21-6.76 1.66-2.88 2.29-5.56 2.57-7.29" style="fill:#fff"/>
        </svg>
    </div>`;
  } // Tail Bone

  function m14(number) {
    return number % 14 === 0;
  }

  function displayBandaid(number) {
    return `<div style="position: absolute; top: 267px; left: 245px; transform:rotate(14deg); z-index: 4;">
       <svg width="100" height="90" viewBox="-10 0 70 1" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="2.8">
        <path d="M16.68 2.01 5.28 13.43l-2.64 2.62A7.08 7.08 0 0 0 .63 21c.01 1.85.75 3.62 2.05 4.93a7.024 7.024 0 0 0 9.88.06l2.68-2.59 8.79-8.79 2.59-2.69a7.024 7.024 0 0 0-.06-9.88A7.1 7.1 0 0 0 21.63 0c-1.85-.01-3.63.71-4.95 2.01" fill="#D0AB86"/>
        <path class="st5" d="M21.65 1.7c1.4 0 2.74.55 3.73 1.54s1.54 2.33 1.54 3.73-.56 2.74-1.54 3.73l-1.98 2.05-7.48-7.48 2.01-2.01c.98-1 2.32-1.56 3.72-1.56"/><path d="M14.57 7.19c.68-.03 1.12.39 1.19.46 1.76 1.74 3.52 3.48 5.27 5.22.19.18.53.57.54 1.08.02.52-.31.92-.51 1.14-.72.83-2.41 2.53-4.69 4.68-.14.14-.77.72-1.75.74-1.16.02-1.88-.76-1.98-.88l-4.66-4.48c-.08-.08-.48-.46-.5-1.07-.03-.84.69-1.32.73-1.35l5.34-5.1c.07-.08.44-.41 1.02-.44" fill="#d49470"/><path d="m5.89 15.29 7.48 7.48-2.04 1.97-.01.01a5.267 5.267 0 0 1-7.33-.11 5.267 5.267 0 0 1-.11-7.33z"/>
        </svg>
    </div>`;
  } // Bandaid

  function c123(number) {
    const numberStr = number.toString();
    return numberStr.includes("123");
  }

  function displayTailFlame(number) {
    return `<div style="position: absolute; top: 278px; left: 320px; border: z-index:3;">
  
        <svg width="60" height="100" viewBox="40 0 10 107" xmlns="http://www.w3.org/2000/svg">
          
        <path d="M46.11 22.03c-1.37.59-.09 3.79-.51 9.07-.62 7.94-4.56 14.09-10.26 22.98-3.28 5.11-3.85 5.07-5.16 8.08-1.25 2.87-4.1 9.53-1.68 17.05 1.62 5.04 5.01 8 6.06 8.86 3.35 2.75 7.39 4.74 11.81 3.94 5.07-.91 9.53-4.32 12.28-8.6 1.97-3.06 3.26-6.48 3.79-10.08 1.17-7.9.82-8.16 1.82-11.32 1.27-4 3.15-6.26 2.5-6.81-.47-.39-1.8.44-3.08 1.24-2.87 1.79-2.97 2.92-4.69 3.41-1.68.48-3.75 0-5.01-1.24-.61-.6-1.21-1.56-1.46-3.94-.38-3.61.53-5.92 1.33-9.6.85-3.91 1.21-5.93 1.14-8.26-.04-1.45-.15-4.09-1.37-6.99-1.82-4.3-5.79-8.53-7.51-7.79" style="fill:red;stroke:#000000;stroke-width:7;"/>
         <svg  width="60" height="100" viewBox="21 -22 10 130">
         <path d="M37.81 88.27c-1.25-.84-7.13-5.01-7.4-11.54-.17-4 1.81-7.84 2.92-7.74.97.08.36 3.15 2.8 5.72 1.81 1.91 4.79 3.01 7.61 2.59 1-.15 1.5-.23 1.92-.57 2.26-1.85-1.22-7.01-1.68-15.7-.08-1.54-.56-10.46 3.14-12 .39-.16.75-.21 1.01-.22-.59 2.13-1.07 5.22.19 8.27.86 2.08 1.89 2.62 3.96 5.24 1.54 1.95 4.35 5.51 5.41 9.88.34 1.41 1.5 6.2-.99 10.95-2.41 4.58-7.73 8.19-13.09 7.57-2.61-.31-4.38-1.5-5.8-2.45" style="fill:gold"/>
        </svg>  
        </svg>
    </div>`;
  } // Tail Flame Red

  function c1234(number) {
    const numberStr = number.toString();
    return numberStr.includes("1234");
  }

  function displayTailFlameBlue(number) {
    return `<div style="position: absolute; top: 278px; left: 320px; border: z-index:4;">

        <svg width="60" height="100" viewBox="40 0 10 107" xmlns="http://www.w3.org/2000/svg">

        <path d="M46.11 22.03c-1.37.59-.09 3.79-.51 9.07-.62 7.94-4.56 14.09-10.26 22.98-3.28 5.11-3.85 5.07-5.16 8.08-1.25 2.87-4.1 9.53-1.68 17.05 1.62 5.04 5.01 8 6.06 8.86 3.35 2.75 7.39 4.74 11.81 3.94 5.07-.91 9.53-4.32 12.28-8.6 1.97-3.06 3.26-6.48 3.79-10.08 1.17-7.9.82-8.16 1.82-11.32 1.27-4 3.15-6.26 2.5-6.81-.47-.39-1.8.44-3.08 1.24-2.87 1.79-2.97 2.92-4.69 3.41-1.68.48-3.75 0-5.01-1.24-.61-.6-1.21-1.56-1.46-3.94-.38-3.61.53-5.92 1.33-9.6.85-3.91 1.21-5.93 1.14-8.26-.04-1.45-.15-4.09-1.37-6.99-1.82-4.3-5.79-8.53-7.51-7.79" style="fill:blue;stroke:#000000;stroke-width:7;"/>
         <svg  width="60" height="100" viewBox="21 -22 10 130">
         <path d="M37.81 88.27c-1.25-.84-7.13-5.01-7.4-11.54-.17-4 1.81-7.84 2.92-7.74.97.08.36 3.15 2.8 5.72 1.81 1.91 4.79 3.01 7.61 2.59 1-.15 1.5-.23 1.92-.57 2.26-1.85-1.22-7.01-1.68-15.7-.08-1.54-.56-10.46 3.14-12 .39-.16.75-.21 1.01-.22-.59 2.13-1.07 5.22.19 8.27.86 2.08 1.89 2.62 3.96 5.24 1.54 1.95 4.35 5.51 5.41 9.88.34 1.41 1.5 6.2-.99 10.95-2.41 4.58-7.73 8.19-13.09 7.57-2.61-.31-4.38-1.5-5.8-2.45" style="fill:white"/>
        </svg>  
        </svg>
    </div>`;
  } // Tail Flame Blue

  function c12345(number) {
    const numberStr = number.toString();
    return numberStr.includes("12345");
  }

  function displayTailFlameWhite(number) {
    return `<div style="position: absolute; top: 278px; left: 320px; border: z-index:5;">

          <svg width="60" height="100" viewBox="40 0 10 107" xmlns="http://www.w3.org/2000/svg">

          <path d="M46.11 22.03c-1.37.59-.09 3.79-.51 9.07-.62 7.94-4.56 14.09-10.26 22.98-3.28 5.11-3.85 5.07-5.16 8.08-1.25 2.87-4.1 9.53-1.68 17.05 1.62 5.04 5.01 8 6.06 8.86 3.35 2.75 7.39 4.74 11.81 3.94 5.07-.91 9.53-4.32 12.28-8.6 1.97-3.06 3.26-6.48 3.79-10.08 1.17-7.9.82-8.16 1.82-11.32 1.27-4 3.15-6.26 2.5-6.81-.47-.39-1.8.44-3.08 1.24-2.87 1.79-2.97 2.92-4.69 3.41-1.68.48-3.75 0-5.01-1.24-.61-.6-1.21-1.56-1.46-3.94-.38-3.61.53-5.92 1.33-9.6.85-3.91 1.21-5.93 1.14-8.26-.04-1.45-.15-4.09-1.37-6.99-1.82-4.3-5.79-8.53-7.51-7.79" style="fill:white ;stroke:#000000;stroke-width:7;"/>
           <svg  width="60" height="100" viewBox="21 -22 10 130">
           <path d="M37.81 88.27c-1.25-.84-7.13-5.01-7.4-11.54-.17-4 1.81-7.84 2.92-7.74.97.08.36 3.15 2.8 5.72 1.81 1.91 4.79 3.01 7.61 2.59 1-.15 1.5-.23 1.92-.57 2.26-1.85-1.22-7.01-1.68-15.7-.08-1.54-.56-10.46 3.14-12 .39-.16.75-.21 1.01-.22-.59 2.13-1.07 5.22.19 8.27.86 2.08 1.89 2.62 3.96 5.24 1.54 1.95 4.35 5.51 5.41 9.88.34 1.41 1.5 6.2-.99 10.95-2.41 4.58-7.73 8.19-13.09 7.57-2.61-.31-4.38-1.5-5.8-2.45" style="fill:black"/>
          </svg>  
          </svg>
      </div>`;
  } // Tail Flame Purple

  function m16(number) {
    return number % 16 === 0;
  }

  function displayRedCheeks(number) {
    return `<div style="position: absolute; top: 280px; left: 62px;">
                <svg width="287" height="37" viewBox="0 0 287 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="19" cy="13" rx="14" ry="10" fill="${colorMapSpecial[4]}"/>
                <ellipse cx="160" cy="13" rx="14" ry="10" fill="${colorMapSpecial[4]}"/>
                </svg>
    </div>`;
  } // Pink Cheeks

  function m15(number) {
    return number % 15 === 0;
  }

  function displayToof(number) {
    return `<div style="position: absolute; top: 292px;  z-index:3; left: 145px; stroke:#000000;stroke-width:7; transform:rotate(-220deg);">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="30" viewBox="-5 0 40 40"><path d="M24 22h-24l12-20z" fill="white"/></svg>
            </div>`;
  } // Toof

  function m11(number) {
    return number % 11 === 0;
  }

  function displayBalloon(number) {
    return `<div style="position: absolute; top: 115px; left: 205px; z-index:3; transform:rotate(30deg); border-radius:50%">
              <svg width="140" height="170" viewBox="18 28 63 38" xmlns="http://www.w3.org/2000/svg">
            <path d="M49 84h6c-.33-2-.67-4-1-6 1.89-1.43 4.51-3.54 7.42-6.31.67-.64 7.31-6.9 10.35-11.89 6.99-11.44 7.07-26.59-1.83-37.07-5.49-6.47-14.09-10.3-22.55-9.62-15.44 1.23-26.01 16.08-25.4 30.92.03.73.09 1.46.17 2.19 1.44 12.94 9.67 21.26 12.76 24.28 2.11 2.07 5.41 4.9 10.09 7.5-.33 2-.67 4-1 6z" fill="${colorMapSpecial[7]}" opacity=".7"/>
             <path d="M49 84h6c-.33-2-.67-4-1-6 1.89-1.43 4.51-3.54 7.42-6.31.67-.64 7.31-6.9 10.35-11.89 6.99-11.44 7.07-26.59-1.83-37.07-5.49-6.47-14.09-10.3-22.55-9.62-15.44 1.23-26.01 16.08-25.4 30.92.03.73.09 1.46.17 2.19 1.44 12.94 9.67 21.26 12.76 24.28 2.11 2.07 5.41 4.9 10.09 7.5-.33 2-.67 4-1 6z" fill="transparent" stroke="#000000" stroke-width="3" opacity="1"/>
            </svg> 
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="14.5 18 80 66" height="" xml:space="preserve"><g/><path d="M52 15c.98 2.71 2.26 6.84 3 12 1.67 11.67-.52 21.04-1 23-1.4 5.69-2.62 6.85-4 14-1.46 7.58-.99 11.02 1 13 .77.77 2.16 1.71 4 2 2.47.38 4.39-.64 5-1" stroke="white" stroke-width="3" style="fill:none"/><g/></svg>
    </div>`;
  } // Balloon

  function m888(number) {
    return number % 888 === 0;
  }

  function displayAlienBalloon(number) {
    return `<div style="position: absolute; top: 115px; left: 205px; z-index:3; transform:rotate(30deg); border-radius:50%">
              <svg width="140" height="170" viewBox="18 28 63 38" xmlns="http://www.w3.org/2000/svg">
            <path d="M49 84h6c-.33-2-.67-4-1-6 1.89-1.43 4.51-3.54 7.42-6.31.67-.64 7.31-6.9 10.35-11.89 6.99-11.44 7.07-26.59-1.83-37.07-5.49-6.47-14.09-10.3-22.55-9.62-15.44 1.23-26.01 16.08-25.4 30.92.03.73.09 1.46.17 2.19 1.44 12.94 9.67 21.26 12.76 24.28 2.11 2.07 5.41 4.9 10.09 7.5-.33 2-.67 4-1 6z" fill="${colorMapSpecial[2]}" opacity=".7"/>
             <path d="M49 84h6c-.33-2-.67-4-1-6 1.89-1.43 4.51-3.54 7.42-6.31.67-.64 7.31-6.9 10.35-11.89 6.99-11.44 7.07-26.59-1.83-37.07-5.49-6.47-14.09-10.3-22.55-9.62-15.44 1.23-26.01 16.08-25.4 30.92.03.73.09 1.46.17 2.19 1.44 12.94 9.67 21.26 12.76 24.28 2.11 2.07 5.41 4.9 10.09 7.5-.33 2-.67 4-1 6z" fill="transparent" stroke="#000000" stroke-width="3" opacity="1"/>
            </svg> 
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="14.5 18 80 66" height="" xml:space="preserve"><g/><path d="M52 15c.98 2.71 2.26 6.84 3 12 1.67 11.67-.52 21.04-1 23-1.4 5.69-2.62 6.85-4 14-1.46 7.58-.99 11.02 1 13 .77.77 2.16 1.71 4 2 2.47.38 4.39-.64 5-1" stroke="white" stroke-width="3" style="fill:none"/><g/></svg>
    </div>`;
  } // Alien Balloon

  function ce7(number) {
    let numberStr = number.toString();
    let exponent = 7;
    let power = 1;
    while (true) {
      let exponentStr = Math.pow(exponent, power).toString();
      if (numberStr.includes(exponentStr)) {
        return true;
      }
      if (Math.pow(exponent, power) > number) break; // Stop if the exponent value exceeds the number
      power++;
    }
    return false;
  }

  function displayDinoSpots() {
    return `<div style="position: absolute; top: 140px; left: 149px;z-index:1;">
<svg width="200" height="220" xmlns="http://www.w3.org/2000/svg" 
	 viewBox="14 8 10 18" fill="black" opacity="0.45">
   <path d="M20.67 8.59c-.02 0-.04.01-.07.03-.09.05-.17.18-.23.26-.28.35-.49.76-.61 1.2-.05.18-.08.36-.04.54.07.3.33.51.59.66.34.2.78.37.94.77.07.17.07.36.14.54.08.23.26.42.48.54.21.12.45.19.69.24.31.06.64.09.92-.05.28-.13.46-.41.55-.7.09-.27.1-.56.1-.84 0-.12.07-.47-.04-.55-.86-.66-1.71-1.33-2.57-1.99-.21-.16-.42-.33-.63-.49-.09-.09-.14-.16-.22-.16m4.16 4.12c-.05.19.05.45.09.64.06.32.08.66-.12.94-.29.39-.86.46-1.22.8-.36.35-.42.92-.28 1.39.07.26.2.5.39.69s.45.32.72.33c.28.01.56-.11.81-.24.64-.33 1.17-.76 1.07-1.55-.09-.72-.49-1.39-.83-2.01-.18-.31-.36-.77-.63-.99m1.12 6c-.2-.06-.45-.08-.65-.07-.29.01-.58.09-.8.28-.23.2-.36.51-.38.82s.07.61.21.89c.12.24.28.45.39.7.03.07.1.62.13.63.21.07.85-2.21 1.22-2.84.09-.16.15-.28-.03-.36a.3.3 0 0 0-.09-.05m-4.56.9c-.04-.19-.06-.31 0-.43.14-.27.79-.46 1.07-.41.07.01.27.06.41.24.16.2.13.44.11.63-.02.2-.05.47-.27.63-.22.17-.5.12-.62.1-.09-.02-.26-.05-.42-.18-.2-.17-.24-.4-.28-.58m1.32 4.66.67-.67c.15-.15.52-.39.51-.63 0-.09-.04-.17-.08-.26-.15-.38-.23-.83-.48-1.16s-.63-.29-.96-.12c-.14.07-.28.14-.39.25-.31.3-.13.83-.52 1.08-.11.07-.22.13-.32.21-.22.22-.24.59-.08.86s.46.42.77.48c.19.05.73.11.88-.04m-1.4-6.36c.38-.07 1.04.16 1.26-.29a.42.42 0 0 0 0-.33c-.17-.41-.71-.47-.85-.89-.07-.22-.05-.46-.02-.68s.07-.46.04-.69c-.09-.68-.79-1.19-1.45-1.24-.65-.05-1.25.31-1.57.86-.11.19-.17.42-.11.64.03.11.09.22.15.32l.45.78c.21.37.14.58-.09.92-.11.16-.21.35-.16.54.05.17.2.29.36.37.35.19.73.65 1.15.39.3-.18.44-.59.8-.68.02-.01.03-.01.04-.02"/>
</svg>
            </div>`;
  } // Dino Spots

  function displayRainbowVomit() {
    return `<div style="position: absolute; top: 175px; left: -10px;z-index:4;">
          <svg xmlns="http://www.w3.org/2000/svg" height="250" width="350" viewBox="1 15.9 21 10" xml:space="preserve"><path d="M8.85 20.21c.09-.11.27-.28.55-.38.41-.15.76-.04.98.02.24.07.92.32 1.3 1.02.41.76.34 1.83-.11 2.08-.17.09-.47.11-.7.08-.24-.03-.27-.09-.42-.08-.21.02-.32.18-.67.48-.22.19-.42.41-.61.63-.38.46-.7.98-.96 1.52-.48 1-.77 2.07-1.03 3.15-.01.02-.01.05-.03.06s-.04.01-.06.01c-2.3-.04-4.6 0-6.89 0h-.56v-3.81c1.14-1.41 2.3-2.31 3.11-2.86 1.04-.7 2.58-1.7 4.75-1.91.56-.04 1.03-.03 1.35-.01"/><path d="M10.37 22.66c-.14.11-.34.26-.58.46-.48.4-.82.69-1.15 1.08-.28.34-.42.62-.67 1.09-.1.2-.38.74-.63 1.5-.17.52-.36 1.2-.49 2.02-.26 0-.52-.01-.79-.01.07-.29.17-.72.33-1.25.47-1.56.73-2.43 1.45-3.27.4-.47.85-.81 1.4-1.22.46-.35.87-.61 1.18-.8.01.04.03.1.03.17 0 .12-.05.2-.08.23" style="fill:#9121f2"/><path d="m9.88 22.36-.02.01c-.51.29-1.04.68-1.04.68-.51.38-.88.65-1.18.97-.56.57-.78 1.15-1.21 2.29-.23.62-.51 1.46-.73 2.49H4.45c.02-.09.05-.24.1-.42.22-.86.44-1.22 1.02-2.55.37-.84.39-.95.58-1.23.29-.41.57-.66.96-.99.65-.55 1.23-.88 1.79-1.2.33-.19.78-.43 1.35-.69.02-.01.04 0 .06 0 .08.03.13.17.11.36-.38.19-.53.27-.54.28" style="fill:#2196f2"/><path d="M9.97 21.32c-.14.04-.35.09-.59.17 0 0-.05.01-.09.03-.18.06-.56.19-1.11.43-.59.26-.88.39-1.26.62-.45.27-.77.51-1.08.74-.47.36-.81.66-.96.8-.58.53-1.09.99-1.55 1.68-.2.3-.19.33-.97 1.88-.24.48-.44.88-.57 1.13.73 0 1.47-.01 2.2-.01.24-.65.45-1.18.6-1.57.18-.46.26-.67.29-.74.07-.18.38-.93.55-1.29.07-.15.31-.66.7-1.14.45-.56.91-.84 1.61-1.27.52-.32 1.01-.56 1.87-.97.22-.11.41-.2.54-.25q-.105-.12-.18-.24" style="fill:#47f11f"/><path d="M9.84 21.17a.47.47 0 0 0-.27-.24c-.8.18-1.46.35-1.96.49-.48.13-.9.25-1.4.45-.19.07-.36.14-.52.21-.2.09-.63.28-1.15.59-.7.4-1.21.79-1.46.99-.76.6-1.36 1.07-1.87 1.87-.28.43-.27.52-.67 1.19-.34.56-.67.98-.92 1.28v.81h1.67c.16-.31.39-.77.69-1.3.48-.86.83-1.48 1.29-2.11.19-.26 1.04-1.38 2.51-2.42 1.02-.72 1.95-1.13 2.5-1.34.6-.23 1.14-.38 1.56-.47" style="fill:#f28720"/><path d="M9.43 20.78a1 1 0 0 0-.2-.19c-.16-.1-.32-.11-.41-.13-.34-.05-.69-.05-1.03-.02-.7.06-1.37.26-2.03.5-1.02.37-2.01.86-2.89 1.49-.76.54-1.43 1.19-2.07 1.86-.29.3-.57.61-.85.93-.11.13-.23.27-.29.43-.08.2-.05.38-.05.49.06.8-.08 1.26.02 1.28s.27-.38.4-.65a8.6 8.6 0 0 1 1.64-2.31c.66-.67 1.41-1.25 2.22-1.72.08-.05.15-.08.22-.13.67-.38 1.54-.87 2.6-1.2.39-.12 1.1-.31 1.56-.38.11-.02.37-.09.72-.17.18-.03.34-.06.44-.08" style="fill:#f53e20"/></svg>
      </div>`;
  } // Rainbow Vomit

  function generateHtmlBasedOnBlockNumber(blockNumber) {
    const lookDir = getLook(blockNumber);
    const lookHtml = generateEyeStyleSvg(lookDir);
    let joint = c420(blockNumber) ? displayJoint() : "";
    let spikeRingL = c33(blockNumber) ? displaySpikeRingL() : "";
    let spikeRingR = c00(blockNumber) ? displaySpikeRingR() : "";
    let crown = c11(blockNumber) ? displayCrown() : "";
    let pinkBow = c8a8(blockNumber) ? displayPinkBow() : "";
    let pinkBowSpike = c88(blockNumber) ? displayPinkBowSpike() : "";
    let bowCheek = c888(blockNumber) ? displayBowCheek() : "";
    let horn = cs5(blockNumber) ? displayHorn() : "";
    let goldBelly = cs6(blockNumber) ? displayGoldBelly() : "";
    let trout = c9a9(blockNumber) ? displayTrout() : "";
    let salmon = c99(blockNumber) ? displaySalmon() : "";
    let laserEyesRed = cf4(blockNumber) ? displayLaserEyesRed() : "";
    let laserEyesBlue = cf5(blockNumber) ? displayLaserEyesBlue() : "";
    let halo = c69(blockNumber) ? displayHalo() : "";
    let bitCoin = cf3(blockNumber) ? displayBitCoin() : "";
    let balloon = m11(blockNumber) ? displayBalloon() : "";
    let alienBalloon = m888(blockNumber) ? displayAlienBalloon() : "";
    let dinoSpots = ce7(blockNumber) ? displayDinoSpots() : "";
    let pipe = m12(blockNumber) ? displayPipe() : "";
    let tailBone = m13(blockNumber) ? displayTailBone() : "";
    let bandaid = m14(blockNumber) ? displayBandaid() : "";
    let toof = m15(blockNumber) ? displayToof() : "";
    let tailFlame = c123(blockNumber) ? displayTailFlame() : "";
    let tailFlameBlue = c1234(blockNumber) ? displayTailFlameBlue() : "";
    let tailFlameWhite = c12345(blockNumber) ? displayTailFlameWhite() : "";
    let redCheeks = m16(blockNumber) ? displayRedCheeks() : "";
    let rainbowVomit = "";

    if (joint !== "" && pipe !== "") {
      joint = "";
      pipe = "";
      rainbowVomit = displayRainbowVomit();
    }

    const containsSquare = containsFourDigitSquare(blockNumber);
    const eyeDirection = getRainbowEyeRange(
      parseInt(blockNumber.toString().slice(-4))
    );
    const rainbowEyes = containsSquare ? displayRainbowEyes(eyeDirection) : "";
    const svgsForDigits = generateSvgForDigits(blockNumber);
    const svgsForDigits2 = generateSvgForDigits2(blockNumber);

    const background = `<div style="position: absolute; top: 0px; left: 0px;">
            <svg width="425" height="425" viewBox="0 0 425 425" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="425" height="425" fill="#201F27"/>
            </svg>
        </div>`;

    //construction
    const htmlContent =
      background +
      dinoSpots +
      lookHtml +
      svgsForDigits2 +
      svgsForDigits +
      joint +
      crown +
      tailFlame +
      redCheeks +
      pinkBowSpike +
      pinkBow +
      bowCheek +
      pipe +
      bandaid +
      toof +
      tailBone +
      trout +
      salmon +
      laserEyesRed +
      horn +
      goldBelly +
      halo +
      bitCoin +
      balloon +
      tailFlameBlue +
      alienBalloon +
      rainbowEyes +
      spikeRingL +
      spikeRingR +
      tailFlameWhite +
      rainbowVomit +
      laserEyesBlue;
    document.getElementById("dinoviewer").innerHTML = htmlContent;
  }
</script>