<div id="natpunkviewer" style="width: 300px; height: 300px;transform-origin: top left; transform: translateX(-250px);"></div>
<input id="blk" type="number" style="display:none" />

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

const orgWidth = 540
const orgHeight = 540
let scaleW = 1
let scaleH = 1
let blockNumber = '0'

// Define the color map with the given colors
const colorMap = {
    1: "#6D2BF8",
    2: "#B66DFF",
    3: "#FFD700",
    4: "#007BFF",
    5: "#8B4513",
    6: "#00A86B",
    7: "#FF69B4",
    8: "#FFA500",
    9: "#696969",
    0: "#0F52BA"
}

// Define the color map with the given colors
const colorMap2 = {
    1: "#9B30FF",
    2: "#DBB2FF",
    3: "#E6BEBA",
    4: "#1E90FF",
    5: "#D3D3D3",
    6: "#FFFFFF",
    7: "#98FF98",
    8: "#708090",
    9: '#C0C0C0',
    0: "#0047AB",
}

// Define the color map with the given colors
const colorMap3 = {
    1: "#DC143C",
    2: "#4F42B5",
    3: "#FFD700",
    4: "#FFC1CC",
    5: "#F28500",
    6: "#FF2400",
    7: "#228B22",
    8: "#00FFFF",
    9: "#8A2BE2",
    0: "#7DF9FF"
}

// Define the color map with the given colors
const colorMap4 = {
    1: "#6D2BF8",
    2: "#B66DFF",
    3: "#FFD700",
    4: "#007BFF",
    5: "#8B4513",
    6: "#00A86B",
    7: "#FF69B4",
    8: "#FFA500",
    9: "#696969",
    0: "#0F52BA"
}

// Define the color map with the given colors
const colorMap5 = {
    1: "#FFFFFF",
    2: "#FF16B4",
    3: "#00C0FF",
    4: "#00FF00",
    5: "#FFFDD0",
    6: '#FF7F00',
    7: "#4B0082",
    8: "#FF4500",
    9: "#C0C0C0",
    0: "#E5E4E2",
}

// 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) {
    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 = []

    // Head
    if (originalString.length >= 1) {
        const colorForFirstDigit = colorMap[digits[0]]
        svgs.push(`
            <div style="position: absolute; width: 300px; height: 300px;">
                <svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                    <rect x="538.91" y="398.33" width="445.9" height="432.48" fill="${colorForFirstDigit}"/>
                </svg>
            </div>
        `)
    }

    //Body
    if (originalString.length >= 2) {
        const colorForSecondDigit = colorMap2[digits[1]] || "transparent"
        svgs.push(`
            <div style="position: absolute; width: 300px; height: 300px;">
                <svg id="ah" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                    <rect x="540.98" y="890.68" width="189.92" height="189.92" fill="${colorForSecondDigit}"/>
                </svg>
            </div>
        `)
    }

    // Eye Mask
        if (originalString.length >= 3) {
        const colorForThirdDigit = colorMap4[digits[2]] || "transparent";
        // Check if the color for the Eye Mask is the same as the Head's color
        if (colorForThirdDigit !== colorMap[digits[0]]) {
            svgs.push(`
                <div style="position: absolute; width: 300px; height: 300px;">
                    <svg id="aa" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                        <rect x="538.9" y="465.94" width="445.91" height="89.8" fill="${colorForThirdDigit}"/>
                    </svg>
                </div>
            `)
        }
    }

    //Punk Hair
    if (originalString.length >= 4) {
        const colorForFourthDigit = colorMap5[digits[3]] || "transparent"
        svgs.push(`
            <div style="position: absolute; width: 300px; height: 300px;">
                <svg id="z" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                    <defs>
                        <linearGradient id="rainlipPiercingGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" stop-color="#141af6"/>
                            <stop offset="25%" stop-color="#e7d192"/>
                            <stop offset="50%" stop-color="#35c14f2"/>
                            <stop offset="75%" stop-color="#ca2b1d"/>
                            <stop offset="100%" stop-color="#0e4e03"/>
                        </linearGradient>
                    </defs>
                    <path d="M538.9,568.64v-167.9h159.3l62.62,75.35,71.56-77.07,16.02-34.04c1.2-2.54-1.28-5.26-3.92-4.3l-100.17,36.28h-24.08l-38.76-101.99c-1-2.62-4.68-2.71-5.79-.13l-44.21,102.46h-22.02l-104.55-48.57c-2.6-1.21-5.33,1.4-4.25,4.05l34.13,83.75v36.47l-106.03,38.67c-2.64,.96-2.79,4.64-.24,5.82l110.41,51.16Z" fill="${colorForFourthDigit}"/>
                    <path d="M538.91,611.65v66.06l-27.03,11.49c-3.08,1.31-6.18-1.82-4.84-4.89l31.87-72.66Z" fill="${colorForFourthDigit}"/>
                </svg>
            </div>
        `)
    }

    //Left Ear
    if (originalString.length >= 3) {
        const colorForFirstDigit = colorMap[digits[0]]
        svgs.push(`
            <div style="position: absolute; width: 300px; height: 300px;">
                <svg id="ag" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                    <rect x="515.69" y="547.12" width="27.22" height="55.7" fill="${colorForFirstDigit}"/>
                </svg>
            </div>
        `) 
    }    

    // Star Shirt Logo
    if (originalString.length >= 6) {
        const colorForSixthDigit = colorMap3[digits[5]] || "transparent"
        svgs.push(`
            <div style="position: absolute; width: 300px; height: 300px;">
                <svg id="af" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                    <polygon points="686.76 938.71 673.86 970.5 704.52 985.89 672.93 999.25 683.73 1031.81 651.94 1018.91 636.55 1049.57 623.19 1017.98 590.63 1028.78 603.52 996.99 572.86 981.6 604.46 968.24 593.66 935.68 625.45 948.57 640.83 917.91 654.2 949.51 686.76 938.71" fill="${colorForSixthDigit}"/>
                </svg>
            </div>

        `)
    }


    return svgs.join('')
}

//eye direction
function getLook(number) {
    const numberStr = number.toString()
    const lastFourDigits = parseInt(numberStr.substring(numberStr.length - 4))

    if (lastFourDigits < 4800) {
        return "look_right"
    } else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {
        return "look_crossed"
    } else {
        return "look_left"
    }
}

function generateLookSvg(lookDir) {
    let lookHtml = ""
    let eyeColor = '#ebebe6';
    const isGreenEyes = cp6(blockNumber);
    const isRedEyes = ce7(blockNumber);
    if (isRedEyes) {
        eyeColor = '#f5908b';
    }
    if (isGreenEyes) {
        eyeColor = '#339f2a';
    }
    if (lookDir === "look_left") {
        lookHtml = `
            <div style="position: absolute; width: 300px; height: 300px;">
                <svg id="t" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                    <rect x="584.59" y="497.68" width="80.77" height="46.96" fill="#150a38"/>
                    <rect x="665.36" y="497.68" width="77.64" height="46.96" transform="translate(1408.36 1042.32) rotate(180)" fill="${eyeColor}"/>
                    <rect x="784.49" y="497.68" width="80.77" height="46.96" fill="#150a38"/><rect x="865.25" y="497.68" width="77.64" height="46.96" transform="translate(1808.15 1042.32) rotate(180)" fill="${eyeColor}"/>
                </svg>
            </div>
        `
    } else if (lookDir === "look_right") {
        lookHtml = `
            <div style="position: absolute; width: 300px; height: 300px;">
                <svg id="p" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                    <rect x="584.59" y="497.68" width="80.77" height="46.96" fill="${eyeColor}"/>
                    <rect x="665.36" y="497.68" width="77.64" height="46.96" transform="translate(1408.36 1042.32) rotate(180)" fill="#150a38"/>
                    <rect x="784.49" y="497.68" width="80.77" height="46.96" fill="${eyeColor}"/>
                    <rect x="865.25" y="497.68" width="77.64" height="46.96" transform="translate(1808.15 1042.32) rotate(180)" fill="#150a38"/>
                </svg>
            </div>`
    } else if (lookDir === "look_crossed") {
        lookHtml = `
            <div style="position: absolute; width: 300px; height: 300px;">
                <svg id="s" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                    <rect x="584.59" y="497.68" width="80.77" height="46.96" fill="${eyeColor}"/>
                    <rect x="665.36" y="497.68" width="77.64" height="46.96" transform="translate(1408.36 1042.32) rotate(180)" fill="#150a38"/>
                    <rect x="784.49" y="497.68" width="80.77" height="46.96" fill="#150a38"/><rect x="865.25" y="497.68" width="77.64" height="46.96" transform="translate(1808.15 1042.32) rotate(180)" fill="${eyeColor}"/>
                </svg>
            </div>`
    }
    return lookHtml
}

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


function displayJoint() {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="k" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="873.08" y="754.43" width="157.15" height="23.48" fill="#e8fffd"/>
                <rect x="1030.23" y="754.43" width="18.32" height="23.48" transform="translate(2078.78 1532.34) rotate(180)" fill="#0a4600"/>
                <rect x="1023.78" y="642.33" width="24.77" height="87.59" transform="translate(2072.33 1372.24) rotate(180)" fill="#0a4600"/>
            </svg>
        </div>`
}

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

function displaycig(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="x" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="873.08" y="754.43" width="157.15" height="23.48" fill="#fff"/><rect x="1030.23" y="754.43" width="18.32" height="23.48" transform="translate(2078.78 1532.34) rotate(180)" fill="#dd0f02"/>
                <rect x="1023.78" y="642.33" width="24.77" height="87.59" transform="translate(2072.33 1372.24) rotate(180)" fill="#403d49"/>
            </svg>
        </div>`
}

function c0(number) {
    const numberStr = number.toString()
    return numberStr.includes('0')
}


function displayEarringDown(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ak" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="508.5" y="590.92" width="23.53" height="23.53" fill="#4af0ee"/>
            </svg>
        </div>`
}

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

function displayEarringUp(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="h" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="509.07" y="550.75" width="22.71" height="22.71" fill="#48f4ef"/>
            </svg>
        </div>`
}

function c000(number) {
    const numberStr = number.toString()
    return numberStr.includes('000')
}

function displayBlueEarringsUpDown(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ak" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="508.5" y="590.92" width="23.53" height="23.53" fill="${colorMap3[8]}"/>
            </svg>
        </div>
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="h" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="509.07" y="550.75" width="22.71" height="22.71" fill="${colorMap3[8]}"/>
            </svg>
        </div>
        `
    }

function c0000(number) {
    const numberStr = number.toString()
    return numberStr.includes('0000')
}

function displayOrangeEarringsUpDown(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ak" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="508.5" y="590.92" width="23.53" height="23.53" fill="#48f4ef"/>
            </svg>
        </div>
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="h" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="509.07" y="550.75" width="22.71" height="22.71" fill="#48f4ef"/>
            </svg>
        </div>
        `
    }

function c00000(number) {
    const numberStr = number.toString()
    return numberStr.includes('00000')
}

function displayWhiteEarringsUpDown(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ak" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="508.5" y="590.92" width="23.53" height="23.53" fill="${colorMap2[6]}"/>
            </svg>
        </div>
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="h" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="509.07" y="550.75" width="22.71" height="22.71" fill="${colorMap2[6]}"/>
            </svg>
        </div>
        `
    }

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


function displayBlueLipPiercing(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="738.3" y="766.17" width="23.05" height="23.05" fill="#48f4ef"/>
            </svg>
        </div>`
}

function c111(number) {
    const numberStr = number.toString()
    return numberStr.includes('111')
}

function displayBlackLipPiercing(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="738.3" y="766.17" width="23.05" height="23.05" fill="#000000"/>
            </svg>
        </div>`
}


function c1111(number) {
    const numberStr = number.toString()
    return numberStr.includes('1111')
}

function displayOrangeLipPiercing(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="738.3" y="766.17" width="23.05" height="23.05" fill="${colorMap3[5]}"/>
            </svg>
        </div>`
}


function c11111(number) {
    const numberStr = number.toString()
    return numberStr.includes('11111')
}


function displayVioletLipPiercing(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="738.3" y="766.17" width="23.05" height="23.05" fill="${colorMap3[9]}"/>
            </svg>
        </div>`
}

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


function displayEyePiercingR(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="g" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="921.24" y="454.07" width="23.74" height="22.45" fill="#4d529e"/>
            </svg>
        </div>`
}

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


function displayEyePiercingL(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="g" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="571.94" y="454.07" width="23.74" height="22.45" fill="#4d529e"/>
            </svg>
        </div>`
}

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

function c8888(number) {
    const numberStr = number.toString()
    return numberStr.includes('8888')
}


function displayDoubleEyePiercingR(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="aj" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="905.46" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
                <rect x="939.66" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
            </svg>
        </div>`
}

function c88888(number) {
    const numberStr = number.toString()
    return numberStr.includes('88888')
}

function displayDoubleDoubleEyePiercing(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="aj" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="905.46" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
                <rect x="939.66" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
            </svg>
        </div>
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="aj" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="584.33" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
                <rect x="550.13" y="453.55" width="23.35" height="23.35" fill="#48f4ef"/>
            </svg>
        </div>`
}


function cp6(number) {
    const numberStr = number.toString()
    // Loop through the number string
    for (let i = 0; i <= numberStr.length - 6; i++) { // Ensure there are at least 6 characters to check
        const substring = numberStr.substring(i, i + 6) // Get the substring of 6 characters
        // Check if the substring is a palindrome
        if (substring === substring.split('').reverse().join('')) {
            return "cp6"
        }
    }
    return null
}

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

function displayPaintCan(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ad" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="751.03" y="930.93" width="54.45" height="70.45" fill="#2db900"/>
                <polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="#2db900"/>
                <path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="#2db900"/>
                <path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="#2db900"/>
                <path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="#2db900"/>
                <path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="#2db900"/>
            </svg>
        </div>`
}



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


function displayGumPaintCan(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ad" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="751.03" y="930.93" width="54.45" height="70.45" fill="${colorMap3[4]}"/>
                <polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="${colorMap3[4]}"/>
                <path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="${colorMap3[4]}"/>
                <path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="${colorMap3[4]}"/>
                <path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="${colorMap3[4]}"/>
                <path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="${colorMap3[4]}"/>
            </svg>
        </div>`
}


function c999(number) {
    const numberStr = number.toString()
    return numberStr.includes('999')
}

function displayOrangePaintCan(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ad" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="751.03" y="930.93" width="54.45" height="70.45" fill="${colorMap3[5]}"/>
                <polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="${colorMap3[5]}"/>
                <path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="${colorMap3[5]}"/>
                <path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="${colorMap3[5]}"/>
                <path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="${colorMap3[5]}"/>
                <path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="${colorMap3[5]}"/>
            </svg>
        </div>`
}



function c9999(number) {
    const numberStr = number.toString()
    return numberStr.includes('9999')
}


function displayVioletPaintCan(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ad" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="751.03" y="930.93" width="54.45" height="70.45" fill="${colorMap3[9]}"/>
                <polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="${colorMap3[9]}"/>
                <path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="${colorMap3[9]}"/>
                <path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="${colorMap3[9]}"/>
                <path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="${colorMap3[9]}"/>
                <path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="${colorMap3[9]}"/>
            </svg>
        </div>`
}

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 displayBlueLasersR(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="u" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="581.69" y="520.9" width="685.21" height="24.97" fill="#48f4ef"/>
            </svg>
        </div>`
}


// Function to check if a number contains a 4-digit square as a substring
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
}

// Determine the range for laser eyes based on the last four digits
function getLaserEyeRange(lastFourDigits) {
    if (lastFourDigits < 4800) {
        return "laser_right"
    } else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {
        return "laser_crossed"
    } else {
        return "laser_left"
    }
}

// Function to generate SVG for laser eyes based on direction
function displayLaserEyes(eyeDirection) {
    let svgHTML = ""

    switch (eyeDirection) {
        case "laser_left":
            svgHTML = `<div style="position: absolute; width: 300px; height: 300px;">
                            <svg id="f" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                                <rect x="258.76" y="520.9" width="685.86" height="24.97" fill="#f71200"/>
                            </svg>
                        </div>`
            break
        case "laser_right":
            svgHTML = `<div style="position: absolute; width: 300px; height: 300px;">
                            <svg id="v" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                                <rect x="581.69" y="520.9" width="685.21" height="24.97" fill="#f71200"/>
                            </svg>
                        </div>`
            break
        case "laser_crossed":
            svgHTML = `<div style="position: absolute; width: 300px; height: 300px;">
                            <svg id="u" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                                <rect x="581.69" y="520.9" width="582.21" height="24.97" fill="#48f4ef"/>
                            </svg>
                        </div>`
            break
    }
    return svgHTML
}


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 displayBlueLasersL(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="w" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="258.76" y="520.9" width="685.86" height="24.97" fill="#48f4ef"/>
            </svg>
        </div>`
}


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 displayTeeth(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="c" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="776.14" y="758.39" width="16" height="16" fill="#fff"/>
                <rect x="796.96" y="758.39" width="16" height="16" fill="#fff"/>
                <rect x="817.77" y="758.39" width="16" height="16" fill="#fff"/>
                <rect x="838.59" y="758.39" width="16" height="16" fill="#fff"/>
            </svg>
        </div>`
}


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

    // 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 displayBlackAlienLogo(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
                <g transform="matrix(1,0,0,1,-8391,-5026)">
                    <g id="alient-t-shirt-logo" serif:id="alient t shirt logo" transform="matrix(1,0,0,1,1685.38,-0.905)">
                        <rect x="6705.81" y="5026.9" width="1490.18" height="1117.09" style="fill:none;"/>
                        <g transform="matrix(1,0,0,1,-1685.38,0.905)">
                            <path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:#000000;stroke:#000000;stroke-width:1px;"/>
                        </g>
                        <g transform="matrix(-1,0,0,1,16372.7,0.905)">
                            <path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:#000000;stroke:#000000;stroke-width:1px;"/>
                        </g>
                        <g transform="matrix(1,0,0,1,-1685.38,0.905)">
                            <path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:#000000;stroke-width:1px;"/>
                        </g>
                        <g transform="matrix(-1,0,0,1,16371,0.905)">
                            <path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:#000000;stroke-width:1px;"/>
                        </g>
                    </g>
                </g>
            </svg>
        </div>`;
}


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 displayBrowPiercing(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="d" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="572.91" y="407.86" width="22.25" height="22.25" fill="#48f4ef"/>
            </svg>
        </div>`
}


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

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

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

    return null
}


function displayGreenAlienLogo(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
                <g transform="matrix(1,0,0,1,-8391,-5026)">
                    <g id="alient-t-shirt-logo" serif:id="alient t shirt logo" transform="matrix(1,0,0,1,1685.38,-0.905)">
                        <rect x="6705.81" y="5026.9" width="1490.18" height="1117.09" style="fill:none;"/>
                        <g transform="matrix(1,0,0,1,-1685.38,0.905)">
                            <path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:${colorMap1[7]};stroke:${colorMap1[7]};stroke-width:1px;"/>
                        </g>
                        <g transform="matrix(-1,0,0,1,16372.7,0.905)">
                            <path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:${colorMap1[7]};stroke:${colorMap1[7]};stroke-width:1px;"/>
                        </g>
                        <g transform="matrix(1,0,0,1,-1685.38,0.905)">
                            <path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:${colorMap1[7]};stroke-width:1px;"/>
                        </g>
                        <g transform="matrix(-1,0,0,1,16371,0.905)">
                            <path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:${colorMap1[7]};stroke-width:1px;"/>
                        </g>
                    </g>
                </g>
            </svg>
        </div>`
}


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

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

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

    return null
}


function displayOrangeAlienLogo(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
                <g transform="matrix(1,0,0,1,-8391,-5026)">
                    <g id="alient-t-shirt-logo" serif:id="alient t shirt logo" transform="matrix(1,0,0,1,1685.38,-0.905)">
                        <rect x="6705.81" y="5026.9" width="1490.18" height="1117.09" style="fill:none;"/>
                        <g transform="matrix(1,0,0,1,-1685.38,0.905)">
                            <path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:${colorMap1[9]};stroke:${colorMap1[9]};stroke-width:1px;"/>
                        </g>
                        <g transform="matrix(-1,0,0,1,16372.7,0.905)">
                            <path d="M9046.41,5995.68C9057.32,5995.68 9050.97,6011.71 9039.67,6011.71C9028.37,6011.71 9034.92,5995.68 9046.41,5995.68Z" style="fill:${colorMap1[9]};stroke:${colorMap1[9]};stroke-width:1px;"/>
                        </g>
                        <g transform="matrix(1,0,0,1,-1685.38,0.905)">
                            <path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:${colorMap1[9]};stroke-width:1px;"/>
                        </g>
                        <g transform="matrix(-1,0,0,1,16371,0.905)">
                            <path d="M9028.18,5962.42C9043.5,5962.42 9054.14,5975.9 9055.05,5991.14C9055.96,6006.37 9044.42,6030.49 9028.18,6030.49" style="fill:none;stroke:${colorMap1[9]};stroke-width:1px;"/>
                        </g>
                    </g>
                </g>
            </svg>
        </div>`
}

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

function displayRainbowChoker(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="l" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <polygon points="558.78 877.81 575.38 849.05 542.18 849.05 558.78 877.81" fill="#f71229" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="597.37 877.81 613.97 849.05 580.77 849.05 597.37 877.81" fill="#d827ff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="635.95 877.81 652.55 849.05 619.35 849.05 635.95 877.81" fill="#2c61ff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="674.53 877.81 691.13 849.05 657.93 849.05 674.53 877.81" fill="#80ff00" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="713.11 877.81 729.71 849.05 696.51 849.05 713.11 877.81" fill="#fac500" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
            </svg>
        </div>`
}

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

function displayWhiteChoker(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ai" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <polygon points="558.78 877.81 575.38 849.05 542.18 849.05 558.78 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="597.37 877.81 613.97 849.05 580.77 849.05 597.37 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="635.95 877.81 652.55 849.05 619.35 849.05 635.95 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="674.53 877.81 691.13 849.05 657.93 849.05 674.53 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="713.11 877.81 729.71 849.05 696.51 849.05 713.11 877.81" fill="#fff" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
            </svg>
        </div>`
}


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

function displayOrangeChoker(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ai" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <polygon points="558.78 877.81 575.38 849.05 542.18 849.05 558.78 877.81" fill="${colorMap3[5]}" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="597.37 877.81 613.97 849.05 580.77 849.05 597.37 877.81" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="635.95 877.81 652.55 849.05 619.35 849.05 635.95 877.81" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="674.53 877.81 691.13 849.05 657.93 849.05 674.53 877.81" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
                <polygon points="713.11 877.81 729.71 849.05 696.51 849.05 713.11 877.81" fill="${colorMap3[5]}" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
            </svg>
        </div>`
}


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

function displayHeadBand(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ac" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <polygon points="716.21 422.41 538.9 422.41 538.9 442.37 732.79 442.37 716.21 422.41" fill="#6baecd"/>
                <polygon points="810.65 422.41 792.12 442.37 984.81 442.37 984.81 422.41 810.65 422.41" fill="#6baecd"/>
            </svg>
        </div>`
}


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

function displayScar(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ae" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <path d="M647.26,639.93c-.85-1.09-2.43-1.28-3.51-.42l-8.53,6.7-8.8-12.4,7.78-6.1c1.09-.85,1.28-2.42,.42-3.51-.85-1.09-2.42-1.28-3.51-.42l-7.59,5.95-7.48-10.54,7.31-5.74c1.09-.85,1.28-2.42,.42-3.51-.85-1.09-2.43-1.28-3.51-.42l-7.12,5.59-6.71-9.46-4.08,2.89,6.85,9.65-8.42,6.61c-1.09,.85-1.28,2.42-.42,3.51,.49,.63,1.23,.96,1.97,.96,.54,0,1.08-.17,1.54-.53l8.23-6.46,7.48,10.54-7.96,6.25c-1.09,.85-1.28,2.42-.42,3.51,.49,.63,1.23,.96,1.97,.96,.54,0,1.08-.17,1.54-.53l7.77-6.1,8.8,12.4-7.01,5.5c-1.09,.85-1.28,2.42-.42,3.51,.49,.63,1.23,.96,1.97,.96,.54,0,1.08-.17,1.54-.53l6.82-5.35,6.5,9.16,4.08-2.89-6.64-9.35,8.72-6.85c1.09-.85,1.28-2.42,.42-3.51Z"/>
            </svg>
        </div>`
}


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

function display69LogoTShirt(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="j" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09"><path d="M650.24,994.83c4.93-6.94,3.29-16.59-3.65-21.52-3.08-2.19-6.7-3.08-10.21-2.78l2.14-3.01c1.76-2.48,1.18-5.91-1.3-7.67l-12.15,17.11c-4.93,6.94-3.29,16.59,3.65,21.52,3.08,2.19,6.71,3.08,10.21,2.78l-2.14,3.01c-1.76,2.48-1.18,5.91,1.3,7.67l12.15-17.11h0Zm-18.34-.83c-4.47-3.17-5.52-9.39-2.35-13.85,3.17-4.47,9.39-5.52,13.85-2.35,4.47,3.17,5.52,9.39,2.35,13.85-3.17,4.47-9.39,5.52-13.85,2.35Z" fill="#230f0a"/>
            </svg>
        </div>`
}

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

function displaybtcLogoTShirt(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="i" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <path id="j" d="M653.47,985.9c-1.5-1.51-3.82-2.35-3.82-2.35,0,0,2.19-.89,3.19-1.94,1-1.06,1.67-2.81,1.87-3.75,.2-.93,.93-4.87-1.83-7.59-2.13-2.1-4.77-3.19-8.41-3.94l1.14-7.99-4.92-.7-1.13,7.89c-1.1-.16-2.38-.34-3.75-.54l1.13-7.89-4.92-.7-1.13,7.89c-5.03-.72-9.69-1.38-9.69-1.38l-.73,5.11s2.07,.3,2.85,.41,2.14,.39,2.64,1.13c.49,.74,.55,1.1,.37,2.38s-2.84,19.89-2.91,20.38-.25,1.07-.72,1.4c-.47,.33-.9,.36-1.89,.22l-2.95-.42-1.86,5.77s4.81,.69,9.69,1.38l-1.12,7.87,4.92,.7,1.12-7.87c1.51,.22,2.83,.4,3.75,.54l-1.12,7.87,4.92,.7,1.14-8c1.28,.11,2.48,.18,3.19,.19,1.43,.02,4.66,.1,7.92-1.55,3.26-1.65,4.39-4.8,4.93-8.06,.54-3.26-.39-5.67-1.89-7.17Zm-18.45-15.34s1.58,.09,3.12,.33c1.54,.24,2.89,.48,4.83,1.39,1.94,.91,2.92,2.6,2.71,4.4-.21,1.8-1.16,2.89-2.65,3.45-1.49,.56-3.46,.7-5.26,.52-1.8-.19-4.1-.58-4.1-.58l1.36-9.5h0Zm7.66,25.11c-1.22,.46-3.55,.69-5.76,.54-2.21-.15-5.47-.69-5.47-.69l1.51-10.56s3.15,.29,5.57,.79c2.42,.51,4.38,1.42,5.23,2.02,.85,.59,2.32,1.83,1.98,4.25-.34,2.42-1.84,3.19-3.06,3.65Z"/>
            </svg>
        </div>`
}


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

function displayBtcLogoPaintCan(number) {
    return `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg id="ab" xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="751.03" y="930.93" width="54.45" height="70.45" fill="#48f4ef"/>
                <path id="ac" d="M794.88,963.71c-1.5-1.51-3.82-2.35-3.82-2.35,0,0,2.19-.89,3.19-1.94,1-1.06,1.67-2.81,1.87-3.75,.2-.93,.93-4.87-1.83-7.59-2.13-2.1-4.77-3.19-8.41-3.94l1.14-7.99-4.92-.7-1.13,7.89c-1.1-.16-2.38-.34-3.75-.54l1.13-7.89-4.92-.7-1.13,7.89c-5.03-.72-9.69-1.38-9.69-1.38l-.73,5.11,2.85,.41c.78,.11,2.14,.39,2.64,1.13,.49,.74,.55,1.1,.37,2.38s-2.84,19.89-2.91,20.38-.25,1.07-.72,1.4c-.47,.33-.9,.36-1.89,.22l-2.95-.42-1.86,5.77s4.81,.69,9.69,1.38l-1.12,7.87,4.92,.7,1.12-7.87c1.51,.22,2.83,.4,3.75,.54l-1.12,7.87,4.92,.7,1.14-8c1.28,.11,2.48,.18,3.19,.19,1.43,.02,4.66,.1,7.92-1.55,3.26-1.65,4.39-4.8,4.93-8.06,.54-3.26-.39-5.67-1.89-7.17Zm-18.45-15.34s1.58,.09,3.12,.33c1.54,.24,2.89,.48,4.83,1.39,1.94,.91,2.92,2.6,2.71,4.4-.21,1.8-1.16,2.89-2.65,3.45-1.49,.56-3.46,.7-5.26,.52-1.8-.19-4.1-.58-4.1-.58l1.36-9.5h0Zm7.66,25.11c-1.22,.46-3.55,.69-5.76,.54-2.21-.15-5.47-.69-5.47-.69l1.51-10.56s3.15,.29,5.57,.79c2.42,.51,4.38,1.42,5.23,2.02,.85,.59,2.32,1.83,1.98,4.25-.34,2.42-1.84,3.19-3.06,3.65Z"/>
                <polygon points="752.44 921.38 804.83 921.38 804.83 919.58 785.6 909 769.86 909 752.44 919.19 752.44 921.38" fill="#48f4ef"/><path d="M783.45,906.81h-10.41c-.55,0-1-.45-1-1v-11.96c0-.55,.45-1,1-1h10.41c.55,0,1,.45,1,1s-.45,1-1,1h-9.41v9.96h8.41v-4.98c0-.55,.45-1,1-1s1,.45,1,1v5.98c0,.55-.45,1-1,1Z" fill="#48f4ef"/>
                <path d="M785.35,898.17c-.37,0-.72-.2-.89-.55-.25-.49-.05-1.09,.44-1.34l15.74-7.96c.49-.25,1.09-.05,1.34,.44s.05,1.09-.44,1.34l-15.74,7.96c-.14,.07-.3,.11-.45,.11Z" fill="#48f4ef"/>
                <path d="M804.18,899.8h-15.27c-.55,0-1-.45-1-1s.45-1,1-1h15.27c.55,0,1,.45,1,1s-.45,1-1,1Z" fill="#48f4ef"/>
                <path d="M799.8,908.1c-.13,0-.26-.02-.38-.08l-13.38-5.55c-.51-.21-.75-.8-.54-1.31s.8-.75,1.31-.54l13.38,5.55c.51,.21,.75,.8,.54,1.31-.16,.38-.53,.62-.92,.62Z" fill="#48f4ef"/>
            </svg>
        </div>`
}


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
}

//fixed elements
function generateHtmlBasedOnBlockNumber(blockNumber) {
    const lookDir = getLook(blockNumber)
    const lookHtml = generateLookSvg(lookDir)
    let joint = c420(blockNumber) ? displayJoint() : ""
    let cig = c4a0(blockNumber) ? displaycig() : ""
    let earringDown = c0(blockNumber) ? displayEarringDown() : ""
    let earringUp = c00(blockNumber) ? displayEarringUp() : ""
    let blueEarringsUpDown = c000(blockNumber) ? displayBlueEarringsUpDown() : ""
    let orangeEarringsUpDown = c0000(blockNumber) ? displayOrangeEarringsUpDown() : ""
    let whiteEarringsUpDown = c00000(blockNumber) ? displayWhiteEarringsUpDown() : ""
    let blackLipPiercing = c11(blockNumber) ? displayBlackLipPiercing() : ""
    let blueLipPiercing = c111(blockNumber) ? displayBlueLipPiercing() : ""
    let violetLipPiercing = c1111(blockNumber) ? displayVioletLipPiercing() : ""
    let orangeLipPiercing = c11111(blockNumber) ? displayOrangeLipPiercing() : ""
    let eyePiercingR = c8a8(blockNumber) ? displayEyePiercingR() : ""
    let eyePiercingL = c88(blockNumber) ? displayEyePiercingL() : ""
    let eyePiercingDoubleR = c8888(blockNumber) ? displayDoubleEyePiercingR() : ""
    let eyePiercingDoubleDouble = c88888(blockNumber) ? displayDoubleDoubleEyePiercing() : ""
    let blueLasersR = cs5(blockNumber) ? displayBlueLasersR() : ""
    let blueLasersL = cs6(blockNumber) ? displayBlueLasersL() : ""
    let paintCan = c9a9(blockNumber) ? displayPaintCan() : ""
    let gumPaintCan = c99(blockNumber) ? displayGumPaintCan() : ""
    let orangePaintCan = c999(blockNumber) ? displayOrangePaintCan() : ""
    let violetPaintCan = c9999(blockNumber) ? displayVioletPaintCan() : ""
    let teeth = cf3(blockNumber) ? displayTeeth() : ""
    let browPiercing = cf4(blockNumber) ? displayBrowPiercing() : ""
    let blackAlienLogo = cf5(blockNumber) ? displayBlackAlienLogo() : ""
    let greenAlienLogo = cf6(blockNumber) ? displayGreenAlienLogo() : ""
    let orangeAlienLogo = cf7(blockNumber) ? displayOrangeAlienLogo() : ""
    let btcLogoTShirt = m11(blockNumber) ? displaybtcLogoTShirt() : ""
    let btcLogoPaintCan = m888(blockNumber) ? displayBtcLogoPaintCan() : ""
    let rainbowChoker = m12(blockNumber) ? displayRainbowChoker() : ""
    let whiteChoker = m13(blockNumber) ? displayWhiteChoker() : ""
    let orangechoker = m14(blockNumber) ? displayOrangeChoker() : ""
    let headBand = m15(blockNumber) ? displayHeadBand() : ""
    let scar = m16(blockNumber) ? displayScar() : ""
    let tShirtLogo69 = m69(blockNumber) ? display69LogoTShirt() : ""
    const containsSquare = containsFourDigitSquare(blockNumber)
    const eyeDirection = getLaserEyeRange(parseInt(blockNumber.toString().slice(-4)))
    const laserEyes = (containsSquare && !cs5(blockNumber) && !cs6(blockNumber)) ? displayLaserEyes(eyeDirection) : ""
    const svgsForDigits = generateSvgForDigits(blockNumber)

    //background
    const background = 
        `<div style="position: absolute; width: 300px; height: 300px;">
            <svg width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="1490.18" height="1117.09" fill="#1f1c25"/>
            </svg>
        </div>`;

    //mouth
    const mouth = `
        <div style="position: absolute; width: 300px; height: 300px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="1490.18" height="1117.09" viewBox="0 0 1490.18 1117.09">
                <rect x="751.03" y="754.43" width="122.05" height="23.48" transform="translate(1624.11 1532.34) rotate(180)" fill="#090609"/>
            </svg>
        </div>`

    const htmlContent = background + svgsForDigits + lookHtml + mouth + earringUp + blueEarringsUpDown + earringDown + orangeEarringsUpDown + cig + joint + blackLipPiercing + blueLipPiercing + violetLipPiercing + headBand + scar + eyePiercingL + eyePiercingR + rainbowChoker + orangechoker + tShirtLogo69 + whiteChoker + eyePiercingDoubleR + eyePiercingDoubleDouble + paintCan + gumPaintCan + orangePaintCan + violetPaintCan + blueLasersR + blueLasersL + blackAlienLogo + teeth + greenAlienLogo + orangeAlienLogo + btcLogoTShirt + browPiercing + btcLogoPaintCan + whiteEarringsUpDown + orangeLipPiercing + laserEyes
    document.getElementById('natpunkviewer').innerHTML = htmlContent
}
</script>