63,947,824

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nattribute DMT Viewer</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #fdf6e4;
      /* Cream color */
      color: #333;
      text-align: center;
      margin: 0;
      padding: 40px 0;
      position: relative;
      /* Needed to position svgContainer absolutely */
    }

    h1 {
      color: #2c3e50;
      font-weight: 600;
      margin-bottom: 20px;
    }

    #dmtForm {
      padding: 20px 40px;
      border-radius: 10px;
      display: inline-block;
      margin-bottom: 40px;
      position: relative;
      /* Ensures that the z-index is applied correctly */
      z-index: 10;
      /* Ensures form is above the overlaid image */
    }

    #dmtForm input[type="number"],
    #dmtForm button {
      width: 100%;
      padding: 10px 15px;
      margin-bottom: 20px;
      border-radius: 5px;
      border: 1px solid #bdc3c7;
      font-size: 16px;
    }

    #dmtForm button {
      background-color: #0b2531;
      /* Dark color */
      color: white;
      border: none;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
      position: relative;
      /* For z-index */
      z-index: 10;
      /* Ensures button is above the overlaid image */
    }

    #dmtForm button:hover {
      background-color: #34495e;
    }

    #svgContainer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #svgContainer img {
      width: 80%;
      /* Change from 100% to 80% */
      height: 80%;
      /* Adjust height automatically to maintain the aspect ratio */
      max-width: 100%;
      /* Ensure the image does not exceed the screen width */
      max-height: 100%;
      /* Ensure the image does not exceed the screen height */
      object-fit: contain;
      /* This will ensure that the SVG fits nicely within the space, maintaining aspect ratio */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }


    /* Additional styles */
    .additional-text {
      position: relative;
      /* For z-index */
      z-index: 10;
      /* Ensures text is above the overlaid image */
      color: #333;
      font-size: 14px;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <img src="data:image/png;base64,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" alt="Logo" style="max-width: 100%; height: auto;">
  <h1>Onchain Viewer</h1>
  <form id="dmtForm">
    <input type="number" id="numberInput" placeholder="Enter Nattribute Number" required>
    <button type="button" id="generateButton">View DMT</button>
    <p class="additional-text">Welcome to the DMT Nattribute Onchain NAT Viewer. Simple circles with deeper meaning. This Onchain Art Viewer will display your Nattribute, just enter your valid Nattribute number and we will draw your Nattribute using Digital Matter from data inscribed on Bitcoin. This is just a canvas, a starting point for something greater than any one of us. Long Live Art. Long Live Bitcoin.</p>
  </form>
  <div id="svgContainer"></div>
  <script>
    const inscriptiondata = {
      "background": {
        "background": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i0"
      },
      "bottomleft": {
        "9": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i9",
        "0": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i1",
        "7": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i7",
        "6": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i6",
        "5": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i5",
        "4": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i4",
        "3": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i3",
        "1": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i2",
        "8": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i8",
        "2": "5f3d181cbd6fc8926113ce3324902f2efe902c91cbc340eb880546376527e598i0"
      },
      "bottomleftsmall": {
        "9": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i17",
        "0": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i10",
        "6": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i15",
        "5": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i14",
        "4": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i13",
        "3": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i12",
        "1": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i11",
        "8": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i16",
        "2": "5f3d181cbd6fc8926113ce3324902f2efe902c91cbc340eb880546376527e598i0"
      },
      "bottommiddle": {
        "13": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i20",
        "15": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i22",
        "14": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i21",
        "12": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i19",
        "11": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i18",
        "16": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i23"
      },
      "bottomright": {
        "9": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i32",
        "0": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i24",
        "7": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i30",
        "6": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i29",
        "5": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i28",
        "4": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i27",
        "3": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i26",
        "1": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i25",
        "8": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i31",
        "2": "5f3d181cbd6fc8926113ce3324902f2efe902c91cbc340eb880546376527e598i0"
      },
      "bottomrightsmall": {
        "9": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i40",
        "0": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i33",
        "6": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i38",
        "5": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i37",
        "4": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i36",
        "3": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i35",
        "1": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i34",
        "8": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i39",
        "2": "5f3d181cbd6fc8926113ce3324902f2efe902c91cbc340eb880546376527e598i0"
      },
      "face": {
        "9": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i50",
        "0": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i41",
        "7": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i48",
        "6": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i47",
        "5": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i46",
        "4": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i45",
        "3": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i44",
        "1": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i42",
        "8": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i49",
        "2": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i43"
      },
      "lefteye": {
        "lefteye": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i51"
      },
      "righteye": {
        "righteye": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei5"
      },
      "nose": {
        "nose": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei4"
      },
      "middleleft": {
        "9": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i59",
        "0": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i52",
        "6": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i57",
        "5": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i56",
        "4": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i55",
        "3": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i54",
        "1": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i53",
        "8": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i58"
      },
      "middleright": {
        "9": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei3",
        "0": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i60",

        "6": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei1",
        "5": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei0",
        "4": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i63",
        "3": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i62",
        "1": "d52ccf01aa03a83d557489d2afb625a9179036b04fb9f83345b2ba0b5e063bb1i61",
        "8": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei2"
      },
      "SPECIAL": {
        "aiblocks": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei6",
        "btclogo": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei7"
      },
      "topleft": {
        "9": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei16",
        "0": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei8",
        "7": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei14",
        "6": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei13",
        "5": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei12",
        "4": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei11",
        "3": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei10",
        "1": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei9",
        "8": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei15"
      },
      "topmiddle": {
        "9": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei25",
        "0": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei17",
        "7": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei23",
        "6": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei22",
        "5": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei21",
        "4": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei20",
        "3": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei19",
        "1": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei18",
        "8": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei24"
      },
      "topright": {
        "9": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei34",
        "0": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei26",
        "7": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei32",
        "6": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei31",
        "5": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei30",
        "4": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei29",
        "3": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei28",
        "1": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei27",
        "8": "3bb7548aed13e802133ca01e6311ef76758a162b63b12a2857cbf2f48a0bcb9ei33"
      }
    }


    function isNumberInRange(number) {
      let ranges = [
        "110880-112895",
        "249984-251999",
        "455616-457631",
        "538272-540287",
        "548352-550367"
      ];
      for (let range of ranges) {
        let [start, end] = range.split('-').map(Number);
        if (number >= start && number <= end) {
          return true;
        }
      }
      return false;
    }


    function hideUI() {
      // Hide form, title, and additional text
      document.getElementById('dmtForm').style.display = 'none';
      document.querySelector('h1').style.display = 'none';
      document.querySelectorAll('.additional-text').forEach(element => {
        element.style.display = 'none';
      });

      // Make the SVG container fullscreen and adjust styling for proper image fitting
      document.getElementById('svgContainer').style.position = 'fixed';
      document.getElementById('svgContainer').style.width = '100vw';
      document.getElementById('svgContainer').style.height = '100vh';
      document.getElementById('svgContainer').style.top = '0';
      document.getElementById('svgContainer').style.left = '0';
      document.getElementById('svgContainer').style.margin = '0';
      document.getElementById('svgContainer').style.padding = '0';
      document.getElementById('svgContainer').style.zIndex = '9999';
    }
    document.getElementById('generateButton').addEventListener('click', function(event) {
      event.preventDefault();
      const inputNumber = document.getElementById('numberInput').value;

      if (isNumberInRange(parseInt(inputNumber))) {
        clearSvgContainer();
        generateDMT(inputNumber);
        hideUI()
        document.getElementById('warning').innerHTML = ''
      } else {
        document.getElementById('warning').innerHTML = 'Please enter a valid 6-digit number.'

      }
    });

    function generateDMT(sixDigitNumber) {
      const baseUrl = '';
      let allSvgPaths = [
        'background/background',
        'lefteye/lefteye',
        'righteye/righteye',
        'nose/nose'
      ];

      addSpecialAndDivisibleLayers(sixDigitNumber, allSvgPaths);
      addDigitSpecificLayers(sixDigitNumber, allSvgPaths);


      renderSvgLayers(allSvgPaths, baseUrl);
    }

    function addSpecialAndDivisibleLayers(sixDigitNumber, allSvgPaths) {
      if (sixDigitNumber.includes("4849") || sixDigitNumber.includes("3839") || sixDigitNumber.includes("0150")) {
        allSvgPaths.push('SPECIAL/btclogo');
      } else if (sixDigitNumber.includes("8500")) { // Check for "8500" for aiblocks
        allSvgPaths.push('SPECIAL/aiblocks');
      }

      const ranges = [{
          min: 540367,
          max: 548352,
          file: '11'
        },
        {
          max: 457631,
          min: 455616,
          file: '13'
        },
        {
          max: 251999,
          min: 249984,
          file: '14'
        },
        {
          max: 112895,
          min: 110880,
          file: '15'
        }
      ];

      const numberValue = parseInt(sixDigitNumber, 10);

      const divisors = [{
          value: 42,
          folders: ['middleleft', 'middleright', 'bottomleft', 'bottomright', 'bottomleftsmall', 'bottomrightsmall']
        },
        {
          value: 21,
          folders: ['bottomleft', 'bottomright', 'bottomleftsmall', 'bottomrightsmall']
        },
        {
          value: 15,
          folders: ['middleleft', 'middleright', 'bottomleft']
        },
        {
          value: 14,
          folders: ['bottomleftsmall', 'bottomrightsmall', 'middleleft', 'middleright']
        },
        {
          value: 13,
          folders: ['bottomleftsmall', 'bottomrightsmall']
        },
        {
          value: 10,
          folders: ['middleleft', 'middleright', 'bottomright']
        },
        {
          value: 6,
          folders: ['middleleft', 'middleright', 'bottomleft', 'bottomright']
        },
        {
          value: 3,
          folders: ['bottomleft', 'bottomright']
        },
        {
          value: 2,
          folders: ['middleleft', 'middleright']
        }
      ];

      for (const divisor of divisors) {
        if (numberValue % divisor.value === 0) {
          divisor.folders.forEach(folder => {
            const lastDigit = (Math.floor(numberValue / divisor.value) % 10).toString();
            if (!['middleleft', 'middleright'].includes(folder) || (['middleleft', 'middleright'].includes(folder) && lastDigit !== '2')) {
              allSvgPaths.push(`${folder}/${lastDigit}`); // Corrected line
            }
          });
          break;
        }
      }

      let bottomMiddleFile = '';
      for (const range of ranges) {
        if (numberValue >= range.min && numberValue <= range.max) {
          bottomMiddleFile = `bottommiddle/${range.file}`; // Corrected line
          break;
        }
      }

      if (bottomMiddleFile) {
        allSvgPaths.push(bottomMiddleFile);
      }

    }

    function addDigitSpecificLayers(sixDigitNumber, allSvgPaths) {
      const digits = sixDigitNumber.toString().split('');
      const folders = ['topmiddle', 'face', 'topright', 'topleft', 'bottomright', 'bottomleft'];
      digits.forEach((digit, index) => {
        const path = `${folders[index]}/${digit}`; // Corrected line
        if (!path.endsWith('2')) {
          allSvgPaths.push(path);
        }
      });
    }

    function renderSvgLayers(allSvgPaths) {

      allSvgPaths.forEach(path => {
        const [folder, file] = path.split('/');
        const fileKey = file;
        const imgElement = document.createElement('img');

        if (inscriptiondata[folder] && inscriptiondata[folder][fileKey]) {
          const inscriptionId = inscriptiondata[folder][fileKey];
          imgElement.src = `/content/${inscriptionId}`; // Corrected line
        } else {
          console.error('No inscription data for:', path);
          return;
        }

        document.getElementById('svgContainer').appendChild(imgElement);
      });
    }

    function clearSvgContainer() {
      document.getElementById('svgContainer').innerHTML = '';
    }
  </script>
</body>

</html>