"<div id=\"bitcoindogs\" width=\"100%\" height=\"100%\"></div><input id=\"blk\" type=\"number\" style=\"display: none\" />\n<script id=\"preview\" mint=\"MINT_INSCRIPTION_ID\">\nconst root = document.getElementById('bitcoindogs')\nroot.parentElement.style.width = '100%'\nroot.parentElement.style.height = '100%'\nroot.parentElement.style.padding = '0px'\nroot.parentElement.style.margin = '0px'\n\nconst orgWidth = 212\nconst orgHeight = 212\nlet scaleW = 1\nlet scaleH = 1\nlet blockNumber = '290304'\n\nconst colorMap = {\n    1: \"#6D2BF8\", // Purple\n    2: \"#AF89FE\", // Lilac\n    3: \"#FDF64D\", // Yellow\n    4: \"#2067F0\", // Blue\n    5: \"#976F53\", // Brown\n    6: \"#CBC7E3\", // Light Grey\n    7: \"#15D96F\", // Green\n    8: \"#FF64C1\", // Pink\n    9: \"#F95E3C\", // Orange\n    0: \"#585663\", // Grey\n}\nconst colorMap2 = {\n    1: \"#5922CD\", // Purple\n    2: \"#9C6EFE\", // Lilac\n    3: \"#FDE14D\", // Yellow\n    4: \"#1C54C0\", // Blue\n    5: \"#725540\", // Brown\n    6: \"#8F8DA5\", // Light Grey\n    7: \"#17B35F\", // Green\n    8: \"#F343AC\", // Pink\n    9: \"#EC5331\", // Orange\n    0: \"#403F4A\", // Dark Grey\n}\nconst colorMap3 = {\n    1: \"#A2FF00\", // GITD\n    2: \"#49EFEF\", // Alien\n    3: \"#FFB800\", // Gold\n    4: \"#FFA1FB\", // Bubblegum\n    5: \"#FF7528\", // Orange\n    6: \"#FF1E39\", // Red\n    7: \"#00B127\", // Green\n    8: \"#2A32FF\", // Blue\n    9: \"#A9A8D6\", // Platinum\n}\n\nwindow.addEventListener('resize', resize, true)\nresize()\n\nlet mintText = document.getElementById('preview').getAttribute('mint')\n\nif(mintText.includes('MINT_INSCRIPTION_ID')) {\n  let input = document.getElementById('blk')\n  input.style.display = 'block'\n  input.style.position = 'absolute'\n  input.style.fontSize = '20px'\n  input.style.margin = '20px'\n  input.style.top = '0'\n  input.value = blockNumber\n  input.addEventListener('input',(event) => {\n      blockNumber = input.value\n      update()\n  })\n  update()\n}\nelse {\n  const request = new XMLHttpRequest()\n  try {\n    request.open('GET', '/content/' + mintText)\n    request.responseType = 'text'\n    request.addEventListener('load', () => initialize(request.response))\n    request.addEventListener('error', () => console.error('XHR error'))\n    request.send()\n  } catch (error) {\n    console.error(`XHR error ${request.status}`)\n  }\n}\n\nfunction initialize(result) {\n  if(result) {\n    console.log('Result', result)\n    data = JSON.parse(result)\n    blockNumber = data.blk\n  }\n  update()\n}\n\nfunction resize(event) {\n  root.width = window.innerWidth\n  root.height = window.innerHeight\n  scaleW = root.width / orgWidth\n  scaleH = root.height / orgHeight\n  offsetX = 0\n  offsetY = 0\n  if(scaleH < scaleW) {\n    scaleW = scaleH\n    offsetX = (root.width - orgWidth * scaleW) / 2\n  }\n  else {\n    scaleH = scaleW\n    offsetY = (root.height - orgHeight * scaleH) / 2\n  }\n  root.style.zoom = scaleW / 2\n  update('resize')\n}\n\nfunction update() {\n  generateHtmlBasedOnBlockNumber(blockNumber)\n}\n\nfunction generateSvgForDigits(blockNumber) {\n    const originalString = blockNumber.toString()\n    const digits = originalString.padStart(7, '0').split('').map(Number).reverse()\n    let svgs = []\n\n    //left ear\n    if (originalString.length >= 3) {\n        const colorForThirdDigit = colorMap2[digits[2]] || \"transparent\"\n        svgs.push(`\n    <div style=\"position: absolute; top: -20px; left: 65px;\">\n    <svg width=\"160\" height=\"160\" viewBox=\"0 0 120 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M30,120 Q60,15 90,120 Z\" fill=\"${colorForThirdDigit}\"/>\n    </svg>\n</div>\n`)\n    }\n    //right ear\n    if (originalString.length >= 4) {\n        const colorForFourthDigit = colorMap2[digits[3]] || \"transparent\"\n        svgs.push(`\n           <div style=\"position: absolute; top: -20px; left: 198px;\">\n                <svg width=\"160\" height=\"160\" viewBox=\"0 0 120 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M30,120 Q60,15 90,120 Z\" fill=\"${colorForFourthDigit}\"/>\n                </svg>\n            </div>\n`)\n    }\n    //neck\n    if (originalString.length >= 2) {\n        const colorForSecondDigit = colorMap2[digits[1]] || \"transparent\"\n        svgs.push(`\n            <div style=\"position: absolute; top: 345px; left: 105px;\">\n                <svg width=\"98\" height=\"98\" viewBox=\"0 0 78 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"72\" height=\"80\" rx=\"15\" ry=\"15\" fill=\"${colorForSecondDigit}\"/>\n                </svg>\n            </div>\n        `)\n    }\n\n    if (originalString.length >= 1) {\n        const colorForFirstDigit = colorMap[digits[0]]\n        svgs.push(`<div style=\"position: absolute; top: 138px; left: 105px;\">\n    <svg width=\"215\" height=\"212\" viewBox=\"0 0 215 209\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n       <path id=\"facePath\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"${colorForFirstDigit}\" d=\"M215 30a30 30 0 0 0 185 0L15 0A30 30 0 0 0 0 30L0 179A30 30 0 0 0 15 209L200 209A30 30 0 0 0 215 179L215 30ZM22 58L142 58L142 94L22 94L22 58ZM197 155H94V180H197V155ZM94 58H215V94H94Z\"/>\n    </svg>\n</div>\n       `)\n    }\n    if (originalString.length >= 5) {\n    const colorForFifthDigit = colorMap2[digits[4]] || \"transparent\";\n    svgs.push(`<div style=\"position: absolute; top: 230px; left: 185px;\">\n    <svg width=\"75\" height=\"75\" viewBox=\"0 0 150 150\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"30\" y=\"15\" width=\"105\" height=\"82.5\" rx=\"30\" ry=\"30\" fill=\"${colorForFifthDigit}\"/>\n    </svg>\n</div>\n\n            `)\n    }\n\n    if (originalString.length >= 2) {\n        const colorForSecondDigit = colorMap2[digits[1]] || \"transparent\"\n        svgs.push(`\n            <div style=\"position: absolute; top: 279px; left: 0;\">\n    <svg width=\"46\" height=\"185\" viewBox=\"0 0 46 146\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M46.0001 146H0L5.3765e-05 23C5.93175e-05 10.2974 10.2975 -5.20515e-06 23.0001 0C35.7027 5.55247e-06 46.0001 10.2975 46.0001 23L46.0001 146Z\" fill=\"${colorForSecondDigit}\"/>\n    </svg>\n</div>\n\n        `)\n    }\n\n    return svgs.join('')\n}\n\nfunction getLook(number) {\n    const numberStr = number.toString()\n    const lastFourDigits = parseInt(numberStr.substring(numberStr.length - 4))\n\n    if (lastFourDigits < 1000) {\n        return \"look_right\"\n    } else if (lastFourDigits >= 1000 && lastFourDigits <= 1200) {\n        return \"look_crossed\"\n    } else {\n        return \"look_left\"\n    }\n}\n\nfunction generateLookSvg(lookDir) {\n    let lookHtml = \"\"\n    if (lookDir === \"look_left\") {\n        lookHtml = `<div style=\"position: absolute; top: 195px; left: 126px;\">\n                        <svg width=\"158\" height=\"38\" viewBox=\"0 0 158 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                       <rect x=\"37\" y=\"38\" width=\"37\" height=\"38\" rx=\"10\" ry=\"10\" transform=\"rotate(-180 37 38)\" fill=\"#070609\"/>\n                       <rect x=\"158\" y=\"38\" width=\"37\" height=\"38\" rx=\"10\" ry=\"10\" transform=\"rotate(-180 158 38)\" fill=\"#070609\"/>\n\n                        </svg>\n                    </div>`\n    } else if (lookDir === \"look_right\") {\n        lookHtml = `<div style=\"position: absolute; top: 195px; left: 163px;\">\n                        <svg width=\"158\" height=\"38\" viewBox=\"0 0 158 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <rect x=\"37\" y=\"38\" width=\"37\" height=\"38\" rx=\"10\" ry=\"10\" transform=\"rotate(-180 37 38)\" fill=\"#070609\"/>\n                       <rect x=\"157.5\" y=\"38\" width=\"36.5\" height=\"38\" rx=\"10\" ry=\"10\" transform=\"rotate(-180 157.5 38)\" fill=\"#070609\"/>\n                        </svg>\n                    </div>`\n    } else if (lookDir === \"look_crossed\") {\n        lookHtml = `<div style=\"position: absolute; top: 195px; left: 126px;\">\n                        <svg width=\"195\" height=\"38\" viewBox=\"0 0 195 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"194.5\" y=\"38\" width=\"36.5\" height=\"38\" rx=\"10\" ry=\"10\" transform=\"rotate(-180 194.5 38)\" fill=\"#070609\"/>\n<rect x=\"37\" y=\"38\" width=\"37\" height=\"38\" rx=\"10\" ry=\"10\" transform=\"rotate(-180 37 38)\" fill=\"#070609\"/>\n\n                         </svg>\n                    </div>`\n    }\n    return lookHtml\n}\n\nfunction trifibpites(number) {\n    const numberStr = number.toString();\n    return ['000', '111', '222', '333', '444', '555', '666', '777', '888', '999', '618', '314', '369'].some(trifibpites => numberStr.includes(trifibpites));\n}\n\n\nfunction displaycatnip() {\n    return `<div style=\"position: absolute; top: 293px; left: 356px;\">\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"18\" y=\"18\" width=\"18\" height=\"18\" transform=\"rotate(-180 18 18)\" fill=\"#00B127\"/>\n        </svg>\n    </div>`\n}\n\nfunction dopifites(number) {\n    const numberStr = number.toString();\n    return /(00|11|22|33|44|55|66|77|88|99|314|618|369)/.test(numberStr);\n}\n\nfunction displaycig(number) {\n    return `<div style=\"position: absolute; top: 219px; left: 302px;\">\n    <svg width=\"72\" height=\"92\" viewBox=\"0 0 72 92\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"72\" y=\"92\" width=\"72\" height=\"18\" transform=\"rotate(-180 72 92)\" fill=\"#FBFBFB\"/>\n        <rect id=\"smoke\" x=\"72\" y=\"56\" width=\"18\" height=\"56\" transform=\"rotate(-180 72 56)\" fill=\"white\" fill-opacity=\"0.3\">\n        </rect>\n        <rect x=\"72\" y=\"92\" width=\"18\" height=\"18\" transform=\"rotate(-180 72 92)\" fill=\"#FF0034\"/>\n    </svg>\n</div>`\n}\n\nfunction fle(number) {\n    const numberStr = number.toString();\n    return /(0000|1111|2222|3333|4444|5555|6666|7777|8888|9999)/.test(numberStr);\n}\n\nfunction displayFlysLaserEyes(number) {\n    return `<div style=\"position: absolute; top: 178px; left: 0;\">\n    <svg width=\"340\" height=\"21\" viewBox=\"0 0 340 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect id=\"laserBeam\" width=\"300\" height=\"20\" fill=\"#FD1935\"/>\n    </svg>\n</div>\n`\n}\n\nfunction palin(number) {\n    const numberStr = number.toString()\n    // Loop through the number string\n    for (let i = 0; i <= numberStr.length - 6; i++) { // Ensure there are at least 6 characters to check\n        const substring = numberStr.substring(i, i + 6) // Get the substring of 6 characters\n        // Check if the substring is a palindrome\n        if (substring === substring.split('').reverse().join('')) {\n            return \"palin\"\n        }\n    }\n    return null\n}\n\nfunction displayBTCDiamond(number) {\n    return `<div style=\"position: absolute; top: 358px; left: 321px;\">\n        <svg width=\"67\" height=\"68\" viewBox=\"0 0 67 68\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"30.5\" cy=\"33\" r=\"30.5\" fill=\"#FFA500\"/>\n            <!-- Bitcoin Symbol -->\n           <text x=\"18\" y=\"45\" font-family=\"Courier New, Courier, monospace\" font-weight=\"bold\" font-size=\"45\" fill=\"#FFFFFF\">&#x20BF;</text>\n        </svg>\n    </div>`\n}\n\nfunction displayHalo(number) {\n    return `<div style=\"position: absolute; top: 41px; left: 146px;\">\n        <svg width=\"132\" height=\"18\" viewBox=\"0 0 132 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect id=\"halo\" width=\"132\" height=\"18\" fill=\"#FFB700\">\n            </rect>\n            <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" fill=\"black\">Hello, World!</text>\n        </svg>\n</div>\n\n`\n}\n\nfunction quad(number) {\n    const numberStr = number.toString();\n    if (numberStr.includes('7777') || numberStr.includes('1111') || numberStr.includes('2222') || numberStr.includes('3333') || numberStr.includes('4444') || numberStr.includes('5555') || numberStr.includes('6666') || numberStr.includes('8888') || numberStr.includes('9999')) {\n        return \"quad\";\n    }\n    return null;\n}\n  \nfunction containsFourDigitSquare(number) {\n    const numberStr = number.toString()\n    for (let i = 0; i <= numberStr.length - 4; i++) {\n        const substring = numberStr.substring(i, i + 4)\n        const num = parseInt(substring, 10)\n        if (Math.sqrt(num) % 1 === 0) {\n            return true\n        }\n    }\n    return false\n}\n\nfunction getLaserEyeRange(lastFourDigits) {\n    if (lastFourDigits < 4800) {\n        return \"laser_right\"\n    } else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {\n        return \"laser_crossed\"\n    } else {\n        return \"laser_left\"\n    }\n}\n\nfunction displayLaserEyes(eyeDirection) {\n    let svgHTML = \"\"\n    switch (eyeDirection) {\n        case \"laser_left\":\n            svgHTML = `<div style=\"position: absolute; top: 214px; left: 0;\">\n                            <svg width=\"284\" height=\"19\" viewBox=\"0 0 284 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <rect width=\"284\" height=\"18.5\" fill=\"#FD1935\"/>\n                        </svg>\n                            </svg>\n                        </div>`\n            break\n        case \"laser_right\":\n            svgHTML = `<div style=\"position: absolute; top: 214px; left: 163px;\">\n                      <svg width=\"262\" height=\"19\" viewBox=\"0 0 262 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <rect id=\"laser\" width=\"262\" height=\"18.5\" fill=\"#FD1935\"/>\n    </svg>\n</div>`\n            break\n        case \"laser_crossed\":\n            svgHTML = `<div style=\"position: absolute; top: 214px; left: 0;\">\n                            <svg width=\"425\" height=\"19\" viewBox=\"0 0 425 19\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <rect width=\"163\" height=\"18.5\" fill=\"#FD1935\"/>\n                            <rect x=\"284\" width=\"141\" height=\"18.5\" fill=\"#FD1935\"/>\n                            </svg>\n                            </svg>\n                    </div>`\n            break\n    }\n    return svgHTML\n}  \n\nfunction generateHtmlBasedOnBlockNumber(blockNumber) {\n    const lookDir = getLook(blockNumber)\n    const lookHtml = generateLookSvg(lookDir)\n    let catnip = trifibpites(blockNumber) ? displaycatnip() : \"\"\n    let cig = dopifites(blockNumber) ? displaycig() : \"\"\n    let BTCDiamond = palin(blockNumber) ? displayBTCDiamond() : \"\"\n    let halo = quad(blockNumber) ? displayHalo() : \"\"\nlet flysLaserEyes = fle(blockNumber) ? displayFlysLaserEyes() : \"\"\n  const containsSquare = containsFourDigitSquare(blockNumber)\n    const eyeDirection = getLaserEyeRange(parseInt(blockNumber.toString().slice(-4)))\n    const laserEyes = containsSquare ? displayLaserEyes(eyeDirection) : \"\"\n    const svgsForDigits = generateSvgForDigits(blockNumber)\n\n    const background = `<div style=\"position: absolute; top: 0px; left: 0px;\">\n      <h1 style=\"text-align: center; font-size: 15px; color: white;\">bitcoindogs</h1>\n            <svg width=\"425\" height=\"425\" viewBox=\"0 0 425 425\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"425\" height=\"425\" fill=\"#000000\"/>\n       \n            </svg>\n        </div>`;\n\n    const mouth = `<div style=\"position: absolute; top: 288px; left: 194px;\">\n    <svg width=\"113\" height=\"35\" viewBox=\"0 0 113 35\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <rect x=\"0\" y=\"0\" width=\"113\" height=\"35\" rx=\"10\" ry=\"10\" fill=\"#070609\"/>\n        <path d=\"M30 18C50 38 90 28 110 18\" fill=\"#FFC0CB\"/>\n    </svg>\n    </div>`\n  \n    const eyes = `\n        <div style=\"position: absolute; top: 195px; left: 126px;\">\n                <svg width=\"194\" height=\"38\" viewBox=\"0 0 194 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect x=\"74\" y=\"38\" width=\"74\" height=\"38\" rx=\"0\" ry=\"0\" transform=\"rotate(-180 74 38)\" fill=\"white\"\"/>\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M121 0H193.469L194 0.53125V37.5391L193.539 38H121V0Z\" fill=\"white\" rx=\"10\" ry=\"10\"/>\n                </svg>\n            </div>`\n\n    const rainbowCollar = `\n        <div style=\"position: absolute; top: 365px; left: 105px;\">\n                <svg width=\"90\" height=\"17\" viewBox=\"0 0 90 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"20\" height=\"18\" fill=\"#FF1D38\"/>\n                <rect x=\"18\" width=\"20\" height=\"18\" fill=\"#C53DF5\"/>\n                <rect x=\"36\" width=\"20\" height=\"18\" fill=\"#115FF5\"/>\n                <rect x=\"54\" width=\"20\" height=\"18\" fill=\"#A1FF00\"/>\n                <rect x=\"72\" width=\"20\" height=\"18\" fill=\"#FFC700\"/>\n                </svg>\n    </div>`\n\n    const loveTail = ` \n       <div style=\"position: absolute; top: 300px; left: 12px;\">\n        <svg width=\"27\" height=\"27\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M18 30.375C7.6875 25.125 0 19.125 0 11.25C0 5.0625 5.0625 0 11.25 0C14.8125 0 17.625 1.6875 18 1.875C18.375 1.6875 21.1875 0 24.75 0C30.9375 0 36 5.0625 36 11.25C36 19.125 28.3125 25.125 18 30.375Z\" fill=\"#E75480\"/>\n        </svg>\n        </div>`\n\n    const rainbowHat = `\n  <div style=\"position: absolute; top: 120px; left: 68.5px;\">\n    <svg width=\"287\" height=\"37\" viewBox=\"0 0 287 37\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <defs>\n            <linearGradient id=\"rainbowGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                <stop offset=\"0%\" style=\"stop-color: #FF0000; stop-opacity:1\" />\n                <stop offset=\"16.67%\" style=\"stop-color: #FF7F00; stop-opacity:1\" />\n                <stop offset=\"33.33%\" style=\"stop-color: #FFFF00; stop-opacity:1\" />\n                <stop offset=\"50%\" style=\"stop-color: #00FF00; stop-opacity:1\" />\n                <stop offset=\"66.67%\" style=\"stop-color: #0000FF; stop-opacity:1\" />\n                <stop offset=\"83.33%\" style=\"stop-color: #4B0082; stop-opacity:1\" />\n                <stop offset=\"100%\" style=\"stop-color: #9400D3; stop-opacity:1\" />\n            </linearGradient>\n        </defs>\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M36 17.4999L36 0L252 9.34601e-05L252 17.5L287 17.5V36.5L0 36.4999L8.30517e-06 17.4999L36 17.4999Z\" fill=\"url(#rainbowGradient)\"/>\n        <rect x=\"0\" y=\"0\" width=\"36\" height=\"17.5\" rx=\"10\" ry=\"10\" fill=\"url(#rainbowGradient)\"/>\n        <rect x=\"251\" y=\"0\" width=\"36\" height=\"17.5\" rx=\"10\" ry=\"10\" fill=\"url(#rainbowGradient)\"/>\n    </svg>\n    </div>`\n\n   //construction\n    const htmlContent = background + eyes + lookHtml + mouth + svgsForDigits + cig + laserEyes + BTCDiamond + halo + catnip +rainbowCollar + loveTail + rainbowHat + flysLaserEyes\n    document.getElementById('bitcoindogs').innerHTML = htmlContent\n}\n</script>"