Bitcoin address: bc1puwr7vyumq4ll2kmrtwdka8p05zx4n09gjglkelw36qd2j9gmzdjssymukf

SHOWING: First 60
859678.bitmap#75,347,101text 859628.bitmap#75,261,322text 859627.bitmap#75,261,240text dmt-mint.billythecats#73,314,995tap dmt-mint.billythecats#73,314,994tap dmt-mint.billythecats#73,314,989tap
<div id="bitcoindogs" width="100%" height="100%"></div><input id="blk" type="number" style="display: none" />
<script id="preview" mint="MINT_INSCRIPTION_ID">
const root = document.getElementById('bitcoindogs')
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 = '290304'

const colorMap = {
    1: "#6D2BF8", // Purple
    2: "#AF89FE", // Lilac
    3: "#FDF64D", // Yellow
    4: "#2067F0", // Blue
    5: "#976F53", // Brown
    6: "#CBC7E3", // Light Grey
    7: "#15D96F", // Green
    8: "#FF64C1", // Pink
    9: "#F95E3C", // Orange
    0: "#585663", // Grey
}
const colorMap2 = {
    1: "#5922CD", // Purple
    2: "#9C6EFE", // Lilac
    3: "#FDE14D", // Yellow
    4: "#1C54C0", // Blue
    5: "#725540", // Brown
    6: "#8F8DA5", // Light Grey
    7: "#17B35F", // Green
    8: "#F343AC", // Pink
    9: "#EC5331", // Orange
    0: "#403F4A", // Dark Grey
}
const colorMap3 = {
    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
}

window.addEventListener('resize', resize, true)
resize()

let mintText = document.getElementById('preview').getAttribute('mint')

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()
}
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 = []

    //left ear
    if (originalString.length >= 3) {
        const colorForThirdDigit = colorMap2[digits[2]] || "transparent"
        svgs.push(`
    <div style="position: absolute; top: -20px; left: 65px;">
    <svg width="160" height="160" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M30,120 Q60,15 90,120 Z" fill="${colorForThirdDigit}"/>
    </svg>
</div>
`)
    }
    //right ear
    if (originalString.length >= 4) {
        const colorForFourthDigit = colorMap2[digits[3]] || "transparent"
        svgs.push(`
           <div style="position: absolute; top: -20px; left: 198px;">
                <svg width="160" height="160" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M30,120 Q60,15 90,120 Z" fill="${colorForFourthDigit}"/>
                </svg>
            </div>
`)
    }
    //neck
    if (originalString.length >= 2) {
        const colorForSecondDigit = colorMap2[digits[1]] || "transparent"
        svgs.push(`
            <div style="position: absolute; top: 345px; left: 105px;">
                <svg width="98" height="98" viewBox="0 0 78 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="72" height="80" rx="15" ry="15" fill="${colorForSecondDigit}"/>
                </svg>
            </div>
        `)
    }

    if (originalString.length >= 1) {
        const colorForFirstDigit = colorMap[digits[0]]
        svgs.push(`<div style="position: absolute; top: 138px; left: 105px;">
    <svg width="215" height="212" viewBox="0 0 215 209" fill="none" xmlns="http://www.w3.org/2000/svg">
       <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"/>
    </svg>
</div>
       `)
    }
    if (originalString.length >= 5) {
    const colorForFifthDigit = colorMap2[digits[4]] || "transparent";
    svgs.push(`<div style="position: absolute; top: 230px; left: 185px;">
    <svg width="75" height="75" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="30" y="15" width="105" height="82.5" rx="30" ry="30" fill="${colorForFifthDigit}"/>
    </svg>
</div>

            `)
    }

    if (originalString.length >= 2) {
        const colorForSecondDigit = colorMap2[digits[1]] || "transparent"
        svgs.push(`
            <div style="position: absolute; top: 279px; left: 0;">
    <svg width="46" height="185" viewBox="0 0 46 146" fill="none" xmlns="http://www.w3.org/2000/svg">
        <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}"/>
    </svg>
</div>

        `)
    }

    return svgs.join('')
}

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

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

function generateLookSvg(lookDir) {
    let lookHtml = ""
    if (lookDir === "look_left") {
        lookHtml = `<div style="position: absolute; top: 195px; left: 126px;">
                        <svg width="158" height="38" viewBox="0 0 158 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <rect x="37" y="38" width="37" height="38" rx="10" ry="10" transform="rotate(-180 37 38)" fill="#070609"/>
                       <rect x="158" y="38" width="37" height="38" rx="10" ry="10" transform="rotate(-180 158 38)" fill="#070609"/>

                        </svg>
                    </div>`
    } else if (lookDir === "look_right") {
        lookHtml = `<div style="position: absolute; top: 195px; left: 163px;">
                        <svg width="158" height="38" viewBox="0 0 158 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="37" y="38" width="37" height="38" rx="10" ry="10" transform="rotate(-180 37 38)" fill="#070609"/>
                       <rect x="157.5" y="38" width="36.5" height="38" rx="10" ry="10" transform="rotate(-180 157.5 38)" fill="#070609"/>
                        </svg>
                    </div>`
    } else if (lookDir === "look_crossed") {
        lookHtml = `<div style="position: absolute; top: 195px; left: 126px;">
                        <svg width="195" height="38" viewBox="0 0 195 38" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="194.5" y="38" width="36.5" height="38" rx="10" ry="10" transform="rotate(-180 194.5 38)" fill="#070609"/>
<rect x="37" y="38" width="37" height="38" rx="10" ry="10" transform="rotate(-180 37 38)" fill="#070609"/>

                         </svg>
                    </div>`
    }
    return lookHtml
}

function trifibpites(number) {
    const numberStr = number.toString();
    return ['000', '111', '222', '333', '444', '555', '666', '777', '888', '999', '618', '314', '369'].some(trifibpites => numberStr.includes(trifibpites));
}


function displaycatnip() {
    return `<div style="position: absolute; top: 293px; left: 356px;">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="18" y="18" width="18" height="18" transform="rotate(-180 18 18)" fill="#00B127"/>
        </svg>
    </div>`
}

function dopifites(number) {
    const numberStr = number.toString();
    return /(00|11|22|33|44|55|66|77|88|99|314|618|369)/.test(numberStr);
}

function displaycig(number) {
    return `<div style="position: absolute; top: 219px; left: 302px;">
    <svg width="72" height="92" viewBox="0 0 72 92" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="72" y="92" width="72" height="18" transform="rotate(-180 72 92)" fill="#FBFBFB"/>
        <rect id="smoke" x="72" y="56" width="18" height="56" transform="rotate(-180 72 56)" fill="white" fill-opacity="0.3">
        </rect>
        <rect x="72" y="92" width="18" height="18" transform="rotate(-180 72 92)" fill="#FF0034"/>
    </svg>
</div>`
}

function fle(number) {
    const numberStr = number.toString();
    return /(0000|1111|2222|3333|4444|5555|6666|7777|8888|9999)/.test(numberStr);
}

function displayFlysLaserEyes(number) {
    return `<div style="position: absolute; top: 178px; left: 0;">
    <svg width="340" height="21" viewBox="0 0 340 19" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect id="laserBeam" width="300" height="20" fill="#FD1935"/>
    </svg>
</div>
`
}

function palin(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 "palin"
        }
    }
    return null
}

function displayBTCDiamond(number) {
    return `<div style="position: absolute; top: 358px; left: 321px;">
        <svg width="67" height="68" viewBox="0 0 67 68" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="30.5" cy="33" r="30.5" fill="#FFA500"/>
            <!-- Bitcoin Symbol -->
           <text x="18" y="45" font-family="Courier New, Courier, monospace" font-weight="bold" font-size="45" fill="#FFFFFF">&#x20BF;</text>
        </svg>
    </div>`
}

function displayHalo(number) {
    return `<div style="position: absolute; top: 41px; left: 146px;">
        <svg width="132" height="18" viewBox="0 0 132 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect id="halo" width="132" height="18" fill="#FFB700">
            </rect>
            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black">Hello, World!</text>
        </svg>
</div>

`
}

function quad(number) {
    const numberStr = number.toString();
    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')) {
        return "quad";
    }
    return null;
}
  
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 getLaserEyeRange(lastFourDigits) {
    if (lastFourDigits < 4800) {
        return "laser_right"
    } else if (lastFourDigits >= 4800 && lastFourDigits <= 5200) {
        return "laser_crossed"
    } else {
        return "laser_left"
    }
}

function displayLaserEyes(eyeDirection) {
    let svgHTML = ""
    switch (eyeDirection) {
        case "laser_left":
            svgHTML = `<div style="position: absolute; top: 214px; left: 0;">
                            <svg width="284" height="19" viewBox="0 0 284 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="284" height="18.5" fill="#FD1935"/>
                        </svg>
                            </svg>
                        </div>`
            break
        case "laser_right":
            svgHTML = `<div style="position: absolute; top: 214px; left: 163px;">
                      <svg width="262" height="19" viewBox="0 0 262 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect id="laser" width="262" height="18.5" fill="#FD1935"/>
    </svg>
</div>`
            break
        case "laser_crossed":
            svgHTML = `<div style="position: absolute; top: 214px; left: 0;">
                            <svg width="425" height="19" viewBox="0 0 425 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="163" height="18.5" fill="#FD1935"/>
                            <rect x="284" width="141" height="18.5" fill="#FD1935"/>
                            </svg>
                            </svg>
                    </div>`
            break
    }
    return svgHTML
}  

function generateHtmlBasedOnBlockNumber(blockNumber) {
    const lookDir = getLook(blockNumber)
    const lookHtml = generateLookSvg(lookDir)
    let catnip = trifibpites(blockNumber) ? displaycatnip() : ""
    let cig = dopifites(blockNumber) ? displaycig() : ""
    let BTCDiamond = palin(blockNumber) ? displayBTCDiamond() : ""
    let halo = quad(blockNumber) ? displayHalo() : ""
let flysLaserEyes = fle(blockNumber) ? displayFlysLaserEyes() : ""
  const containsSquare = containsFourDigitSquare(blockNumber)
    const eyeDirection = getLaserEyeRange(parseInt(blockNumber.toString().slice(-4)))
    const laserEyes = containsSquare ? displayLaserEyes(eyeDirection) : ""
    const svgsForDigits = generateSvgForDigits(blockNumber)

    const background = `<div style="position: absolute; top: 0px; left: 0px;">
      <h1 style="text-align: center; font-size: 15px; color: white;">bitcoindogs</h1>
            <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="#000000"/>
       
            </svg>
        </div>`;

    const mouth = `<div style="position: absolute; top: 288px; left: 194px;">
    <svg width="113" height="35" viewBox="0 0 113 35" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="113" height="35" rx="10" ry="10" fill="#070609"/>
        <path d="M30 18C50 38 90 28 110 18" fill="#FFC0CB"/>
    </svg>
    </div>`
  
    const eyes = `
        <div style="position: absolute; top: 195px; left: 126px;">
                <svg width="194" height="38" viewBox="0 0 194 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="74" y="38" width="74" height="38" rx="0" ry="0" transform="rotate(-180 74 38)" fill="white""/>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M121 0H193.469L194 0.53125V37.5391L193.539 38H121V0Z" fill="white" rx="10" ry="10"/>
                </svg>
            </div>`

    const rainbowCollar = `
        <div style="position: absolute; top: 365px; left: 105px;">
                <svg width="90" height="17" viewBox="0 0 90 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="20" height="18" fill="#FF1D38"/>
                <rect x="18" width="20" height="18" fill="#C53DF5"/>
                <rect x="36" width="20" height="18" fill="#115FF5"/>
                <rect x="54" width="20" height="18" fill="#A1FF00"/>
                <rect x="72" width="20" height="18" fill="#FFC700"/>
                </svg>
    </div>`

    const loveTail = ` 
       <div style="position: absolute; top: 300px; left: 12px;">
        <svg width="27" height="27" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <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"/>
        </svg>
        </div>`

    const rainbowHat = `
  <div style="position: absolute; top: 120px; left: 68.5px;">
    <svg width="287" height="37" viewBox="0 0 287 37" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color: #FF0000; stop-opacity:1" />
                <stop offset="16.67%" style="stop-color: #FF7F00; stop-opacity:1" />
                <stop offset="33.33%" style="stop-color: #FFFF00; stop-opacity:1" />
                <stop offset="50%" style="stop-color: #00FF00; stop-opacity:1" />
                <stop offset="66.67%" style="stop-color: #0000FF; stop-opacity:1" />
                <stop offset="83.33%" style="stop-color: #4B0082; stop-opacity:1" />
                <stop offset="100%" style="stop-color: #9400D3; stop-opacity:1" />
            </linearGradient>
        </defs>
        <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)"/>
        <rect x="0" y="0" width="36" height="17.5" rx="10" ry="10" fill="url(#rainbowGradient)"/>
        <rect x="251" y="0" width="36" height="17.5" rx="10" ry="10" fill="url(#rainbowGradient)"/>
    </svg>
    </div>`

   //construction
    const htmlContent = background + eyes + lookHtml + mouth + svgsForDigits + cig + laserEyes + BTCDiamond + halo + catnip +rainbowCollar + loveTail + rainbowHat + flysLaserEyes
    document.getElementById('bitcoindogs').innerHTML = htmlContent
}
</script>