11,967,792

<html lang="en">

<head>
  <base />
  <meta charset="UTF-8">
  <meta protocol="FORGE" ticker="Recursive-Robots" operation="deploy" total_supply="10000" rare_supply="100" name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #eee;
      margin: 0;
      padding-bottom: 5%;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 1rem;
    }

    select {
      margin-bottom: 1rem;
      outline: none;
      font-size: 1rem;
    }

    .title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
      gap: 1rem;
    }

    .carousel-container {
      position: relative;
      width: 8rem;
      height: 8rem;
      border: 0.1rem solid #333;
      image-rendering: pixelated
    }

    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .buttons {
      display: flex;
      justify-content: space-between;
    }

    .prev,
    .next {
      width: 3.5rem;
      padding: 0.3rem;
      font-size: 0.8rem;
      background-color: #333;
      color: #fff;
      cursor: pointer;
      border: 0.05rem solid #333;
      margin: 0.5rem 0;
    }

    #artifact {
      position: relative;
      width: 24rem;
      height: 24rem;
      border: 0.1rem solid #333;
      margin-top: 1rem;
    }

    #artifact img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
      top: 0;
      left: 0;
      image-rendering: -moz-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    .terminal-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 1rem;
      font-family: 'Courier New', monospace;
    }

    .generate-button {
      background-color: #333;
      color: #fff;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border: 0.1rem solid #333;
      cursor: pointer;
      margin-bottom: 0.5rem;
    }

    .terminal {
      border: 0.1rem solid #333;
      width: 80%;
      min-height: 10rem;
      background-color: rgb(0, 0, 0);
      color: #26ff00;
      padding: 1rem;
      font-size: 1rem;
      overflow-wrap: break-word;
      resize: none;
      cursor: text;
      width: calc(8rem * 3 + 1rem * 2);
    }

    .mlgo {
      margin-top: 5%;
      margin-bottom: -13%;
      width: 25%;
      image-rendering: pixelated;
    }

    .wttt {
      margin-left: 56%;
    }

    .light-sweep {
      width: 100%;
      position: relative;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="container">
    <img src="/content/d7dba389dff5f7bab57c2b2e523679adb5b5ee582156f664786bf579f135214ci0" class="mlgo" alt="Background" width=100%, initial-scale=1.0 />
    <h2 class="title">Welcome To The FORGE</h2>
    <div>
      <label>
        What sats are you inscribing on?!
        <select id="traitSelection">
          <option value="black">Common Sats</option>
          <option value="mint">Vintage Sats</option>
          <option value="orange">Pizza Sats</option>
          <option value="purple">Palindrome Sats</option>
          <option value="rainbow">Uncommon Sats</option>
        </select>
      </label>
    </div>
    <div class="row">
      <div class="trait">
        <div class="carousel-container" id="backgroundCarousel">
          <img id="backgroundImg" alt="Background" width=100%, initial-scale=1.0 />
        </div>
        <div class="buttons">
          <button class="prev" id="prevBackground">&lt;</button>
          <button class="next" id="nextBackground">&gt;</button>
        </div>
      </div>
      <div class="trait">
        <div class="carousel-container" id="bodyCarousel">
          <img id="bodyImg" alt="Body" width=100%, initial-scale=1.0 />
        </div>
        <div class="buttons">
          <button class="prev" id="prevBody">&lt;</button>
          <button class="next" id="nextBody">&gt;</button>
        </div>
      </div>
      <div class="trait">
        <div class="carousel-container" id="headCarousel">
          <img id="headImg" alt="Head" width=100%, initial-scale=1.0 />
        </div>
        <div class="buttons">
          <button class="prev" id="prevHead">&lt;</button>
          <button class="next" id="nextHead">&gt;</button>
        </div>
      </div>
      <div class="trait wttt">
        <div class="carousel-container" id="wheadCarousel">
          <img id="wbodyImg" alt="wbody" width=100%, initial-scale=1.0 />
        </div>
        <div class="buttons">
          <button class="prev" id="prevwBody">&lt;</button>
          <button class="next" id="nextwBody">&gt;</button>
        </div>
      </div>
      <div class="trait wttt">
        <div class="carousel-container" id="wbodyCarousel">
          <img id="wheadImg" alt="wHead" width=100%, initial-scale=1.0 />
        </div>
        <div class="buttons">
          <button class="prev" id="prevwHead">&lt;</button>
          <button class="next" id="nextwHead">&gt;</button>
        </div>
      </div>
    </div>
  </div>
  <div id="artifact">

    <img id="finalBackground" alt="Final Background" />
    <img id="finalwBody" alt="Final wBody" />
    <img id="finalwHead" alt="Final wHead" />
    <img id="finalBody" alt="Final Body" />
    <img id="finalHead" alt="Final Head" />

  </div>
  <div class="terminal-container">
    <button class="generate-button" id="generateHTML">Generate Recursive Inscription HTML</button>
    <textarea readonly class="terminal" id="terminal" onfocus="this.select()"></textarea>
  </div>

  <script>
    const backgrounds = ["9cf6ec9ef4ade7789d042cce4df79611a68c9bb74b951201383bca7f45b7b7f3i0", "a262a4e59a484e77024fc0fb7d109a8178fe5efc93428aabc9f198d63ac2629di0", "39b3daa699531a978c9a55f3d5376d2f0e284abb80aff0568b95a4499fd6ed90i0", "d27568710cd34cf5f94b320cbbd4a868f6087ba9c4793620d4abd4d946ed80d5i0", "18b4e7f48a04b2500e220195d09b2a8f0f1f5f705167b0346c3a8506ca34a480i0", "eb9aa0c67c144ee0c9c4b42011ef460ee673d320dbe9e35a9c077f8647fb201di0"];
    const blackBodies = ["b7f7081349413f4069458de23d7b7471275b1eb2cec94709ea7989b48837e8a5i0", "73e46407475741e325eec0bd4e2b0b1e5d37790bc10e0fece73fe102354f2a8di0", "993d926a08a8b1cd5c03d70e03691ddb7f7eb43b69aa738db8cd0a090f883c1di0", "af0d768f57b90f1d17dcd0a2d9825b4009d3f6fa14140e6425fdfbfc0a650e14i0", "5e1c5b251e0eff8f82d68f9edd49e558743f3648f538ee7651f4ed478d521ef1i0", "7911fef96523ceba3e6782c65069186d5dfb393dabd7d6aa2a74c2c12d358ebfi0", "d34386fd81afa403a4f44f02f9e3b8d840af5c37847391cd5fe7b30a8ded5939i0", "fc7d5cdff19712eb12f1346b913bbd7420350d7e14fe59c0feac5b3e2c16df1bi0", "839d2bf81e8a9452830a60e373ebe70760fcc045fd959f0ce1770d49bfa582eei0", "4c2fe7a8f00aa2f26030de16d2a5a478339b9b91abccabd85c9bd3de50eeaa8bi0", "017e4af5c4e72e97c66c9d5034f6279c1ef4a282c673f84dabf1fdcc9618e529i0", "855de3a9c3344b62a6ef9e95d6376312abfa93a5d4785b1ae6cadb1a5b875bedi0", "e9c8fe57caf1a4f8401d973ccf70500d1095e7acf72fcab1019eb569daecc22ci0", "7f8fc7f8235bcefa84fee13555937bded7db84b061977a80e0df863eb55626c7i0", "7e326d4f0737231d4a01cf6131e8f309cec86a7040adba107810ff7cb477d144i0", "c350a6603de9bb5298a356e7bb29b50841c7467f2eb94eb0cf204903c0b00259i0", "7ef3337a68d52a3d87b2a6a311455ead141aa9fb3a03d214e3f69ac39d8b14a0i0", "73f1a1bf2fd4e3c25b3dd462eb97b07b835f3db19f40fe55333e99699baf70c8i0", "08a73d045229dc16cd3c4073a65a851e0060d7ae3250db096dd9d97390aa6e26i0", "a519b1c4e0034d72fea3aaf7441e60ba9e71770d64daea863aac6571abb63297i0"];
    const blackHeads = ["c70c7a3b930c03d41b2505adebb18598af2933db5b28f4344f231c6e7d77cdeci0", "2c3abd42b4010382ce10fd187ac816436279237a14c36090ac0636ef5be0f518i0", "70bf0a0925a7ff6ffa51b69d03ce7c556936483ba8e32a4d85e57d8078ed7a50i0", "9080e5b9ecdfc7e929b99a7b147d10302c2e491baef4b45fa9935684b8c14de4i0", "0d2b5aa15edb3a4786524a1c58ac1fa078ed352b904f935cbfde3af21f9f2ad9i0", "d7dba389dff5f7bab57c2b2e523679adb5b5ee582156f664786bf579f135214ci0", "31f670b238e80b7857c6316ccb47f7db1c012314bab76694eb9eae4ecac29a00i0", "188f4a04fcb71b0ba2ef24f4f3ac1d328ae1b828e974511b35057de51a8f512fi0", "bd139f4ea60ac1f75d876d49396b3edb3d0290525bb9696dff6649eef9051073i0", "bd139f4ea60ac1f75d876d49396b3edb3d0290525bb9696dff6649eef9051073i0", "878b37444147c143a5ac879682ffde88806d99ff0b2ca5a2fa58a548b93e8111i0", "734a391d319689188ef033f5f84bd51a9fc2b0c148e39e4affdf46cc24ffc8e6i0", "51b1bc5ce86bb32b2536275c66f9971b115afb5778c8a5a65f99b26f34bd9711i0", "b97b77d643eca6f2251557bf4de95ab4682ffb1bfbbd9e07692c326749290efai0", "ae90dae10d7d4f423b31060e241c24aad5ac52def5f38c5fea57b49f365ce9d1i0", "9c3a696d67d9f43e23ed5a9946f86a8a8baec0cbb1a20eabf81d4dc16af5325ei0", "fd5f2ef82e9eb00da174255054c5a07dfec5267ca8d593e26f063867933cb5b0i0", "17d4c205665b4bd40b25ff283a7fb8305a18889147b0bdf892983e38cccf6f20i0", "613e4472b32302555eefee75f8d4ee86da8ee531a2c684e9dd3693122f13b49bi0", "4f5e6b6b2c0c73dd1216828a9bdcbf22cb5ae201c36d8667951d51f6052d507ai0"];


    const mintBodies = ["d16e77a54116cc1a71c02758757a651426b4f8e6cdaef41134b9e1d4a61fc045i0", "062be5b11d3904393d295342941974a106986ece65cf235eec3dd659f66b7543i0", "c3dfcf59af4bd356ab12d7a7d54fc77b0b4c5d0b7cce3d24fe6ca5c2cf1c4e70i0", "83a21cf12012b59152653d07f80e9f5e9da999894bedcf178201971d746a9054i0", "22fe37070532ca108f948ba63e6d2c598a5028a9215bfaf71365b49f61d207eci0", "097990e2fc3739ce98c67e21596465eaaaa67ff87f853ea0a36076ab4b6f333ci0", "d4d4da345ce790eca0fddd8052aec8ad6c975dc8b4c64c05629805c6db7194e8i0", "78613e019baa39d4d92ae72fc83a95c3b8a73ca459f64845ebd4193f0a6a5703i0", "46372a2cb11facd7e543becdc288062e4f0f1a54f8753cb924f8d1eb63a4b424i0", "d60ddbcd8b7c10ba1d2a80beac3b64d9dd9f5856751e88a848009aca4e314432i0", "e755f4dcb0a813da68f2f28252b211f054c141c739f294a7831bf485389dfd1bi0", "0a549329f75ae77b6739d37461019e850a030c1f60e7b9ba9179d4dffa3ac8c5i0", "ce5ee883e2da623db874e70108468e17e387475c2accd23806bd41981f5cccaai0", "f537314d910ea8933c0f2d8583f9ed0c2e49659898f6d04d298e26b9db15cb4bi0", "ce7735753c07838ee7dfed6b8474d0a53f6b3b11f93a6c4333492210e857a4f9i0", "42708ab8ac3b1bb2c97a42d92f27d794fbf86e2e294ef2c540caad144a284ea9i0", "b4f736a1fecc75973c0b19c4419f6a659e552269907ac14e7e0780f354978610i0", "14a8e0bbb6a4ec07455cfa33cc5beccac9755f19348e084da1da7d132663fc35i0", "59e62f3f9f0eafcd38b174443de2a4132c2adbffa84efb649453684d70a20c40i0", "85f1f915049a1c99db958678bde0c5a4830f51642e2908546450ed7250892607i0"];
    const orangeBodies = ["9ece736551b84f82df0f0e60254d736bb480d3edd0ee344f0eb16da768dde713i0", "40361648ca028463b6eb0a1d03e77c5e6704546780a8840bbfb2c42157e86f5di0", "9af08f21e882998e2420f1c597219ce004a1d6b9f4fc16d94c4f7595949a547fi0", "56a6785fab0d5f7575d65bdaed6296f2be28f950a7de61936087773f678c4248i0", "618529a73d00d1dcc168fcd362169c2b5fc07a663e7253dc7336e457b7be9b2bi0", "2e3bf6998868cbd3b24eacc2df70338566ca8c223cabe4c7f22575ebce4f3f2bi0", "a7fbfb0e9cfd030c8339e465d7e036c01327bf0b3c9433c95d38ec9bcf5911d6i0", "00c678e0c3c5aab0bdb6218748527c59a9881d179ae872328f14568dcb7a23c0i0", "06228e115c94cc74e33767e7878f93afa1ecafb78494dca855cb3217bd29f0bci0", "d4c9cea9d434ef906b2c11df05d8b8d592c40b3261eed306407c49b7f49ca9f7i0", "2c309239b1d20dfa928bac3a35f3238772642f5db58cebaa7101773943083f06i0", "1ccf9408d2c223e0cea80c3e0ba2434288e710a51a98d5b50c5f6dc5ff7a5573i0", "660bc960b266b35906f8ccadbdda8dd6ce2239c3031647acfa49ae7478cbc0f2i0", "c2d7652b7fa82ec7bfdb00f93dce2c54e845381f3fdf96a529388d852d8d3dbbi0", "300b0672539e6b73846b5b6b629e6aa6a27080956fc263de7fb5e282e4323aeci0", "1a3df25b057f52a54871f93c8ffc0dd741eea620cbe4a6ca2aaf8dae775caa64i0", "834e0d991ec957f3cb97de39c0c2cca9198e7eea7ee3c2762c37a87d0fbcabbai0", "686dd4a2c89e3cf638ba0ad89cfa350f55d856e6796e6cba2e0e453a67acfce7i0", "9e4b0c43b119e22c8488b58e001ed6c7ec486da065afd1afe7b7759ed7d090c9i0", "304811990973eb8718943c1862c4fbdf32052c29f77ad37774ea1a8b221b518ei0"];
    const purpleBodies = ["795c5fd1e0bd8d356473410be471d800b151e779c472c9650207579776cf440ci0", "53e9fae1c5be579105204b067fc95d0f70e19a4301371c8377442a80eb1b897bi0", "850e5f4e01e2ec63141bd52fce6425a679199ff89b54b93d2eef3df09a0c9a48i0", "b06000ac31e4009cafb9f2231719a2317f461c913e94e0369f3500a6ae3d6b81i0", "a53d0161b67250609d483a13ef6f1ffb1a5cb277dd7f13222dac0efd16a6221fi0", "7211ffac757bc847400e5067162cbc3a8b5fa417df485282bc8a858bea219516i0", "4f562f0720402825511440f9ab36efa0d48d29e9959a483486c20f3e09058d9fi0", "7139060f6d2f735bf091ddb84dcc6da32437f083776d582dbbb55b92be6472c9i0", "04ec7e342caf1a46f0b2e81c88e745b6f775e71bb37e41e35e0b08177cd0f287i0", "b0716cdf0da14bd38330ade59be7be83d9876377d9a299176600852f5abe3887i0", "7c2c9269c365fad27b2cfd5d4d0e702e3d01b8a956ce33fb980e9e5581950f9ci0", "a73cc1e200009013b6c1b321629791428cdae591634aaf442c070ce76fb9418ci0", "beb08fbcaf74aa24eaef6867b258a612dad6da2e5f8901e6bef2e14d7aebf9fei0", "f6578f00bdce341014f4a00e6b82e6f18023a8d446c2f34a51f5c6bdd788d1e3i0", "ec5ce8bf80da8b14d26a76de2d09b544d66ecf221550c0638130052db7ccd9fai0", "21147f8491ad72234ce2edf48f1c6cca56a796c558e005a67a4fb9bfc83fe169i0", "bff5284a38c787ca3c44a674bdc314f2a1d159e3ffad6c836ad83d64217f40ddi0", "08bf55779a9eece9b1e3874c85a70d3e57780ebefe93008de0b6af6ba8e221f0i0", "3f8cfa07aad751ac1c82a0704eb04e0c8e34ad21c876a036e594e2d4c9b2af1bi0", "54dea64d859d07a46f95bfc519dd065cc41fe61ee0005303a602fa8eb3534c33i0"];
    const rainbowBodies = ["a67a1fe9cc155fd8edb80e53e4ca53b67572b5b3b3525905c2382f90a87d6945i0", "edcfe4ed5244e4d1710bd36b48086c2105b92288cdd84599b190d064ed5bf7a4i0", "2203dc1547fbb134e886c2a6ef53a064921e932aeec68c87e3bca7f4f08127d5i0", "19fe2ddb2c893d32efb239558804745629421a02d70a9119ecbaec4e9dff529bi0", "51d9ac36dae829297b7765a80d90a418f3115ff98beaec0fea270baf983076c5i0", "4e30ebbc490b3683e23bcca76245c3e08a583bd856a9fd4bedf1a225ebc46962i0", "e8825e4c3b892a65baf5dc1c4ba0f71a8df7ecfa228f78ac62112a16ac6eb72bi0", "e79fd5c617d2e2bba30853205cbc3993dac72cfbaf12314cb777076d16c79cd8i0", "ee1cb001f215787b6c64be09341571476bfddf064d574137e37bcec9b3621772i0", "79cc274fc763bb525132bc699785ef395373fe530ae2714982b1786bd73710b1i0", "fd19eff8b1e052776695590303db1e8d1202d0ce92076a68676fe8d7ee8c7cfci0", "15f8f0c92b0f911086cc319b941a70e4a2b9a43d68dfee2674445f155f78f630i0", "7b7a371db2a80dbd7b1b0470ccf1f8a0af8918cb928724952efde23126ac48fei0", "8af9e466238d49bf4686f6428104076eb2e2be5ed1dcd71ee7e57580e061efb9i0", "d5ed2aa5677572edaf1fde71c3f81b3d30d283c52b29f5ebbbf395a65f2c57e5i0", "6ec77cfe19976598c94b8b08cb9622a817f97cad714c8a4a5d277eba0bdff2dbi0", "d72017337d07c270059b28846f8a371c5fc93e3c402d8d54ca9b7bd1c357a972i0", "8b833cb79be2b25cb590a20bdb8104b5931be7faf4164b96a9c2c3a37109db72i0", "9411f707974f4078ccf5b88489d56724db73dbe8890d1532b8fdc95fcef068aai0", "9fd21ee2b4951ef30099687e68392f819cc00f09ccb4465be4502b0bbe55e6c9i0"];
    const whiteBodies = ["b44777217d323384f2acdf27eb637e95472e6bae5ef6d6bf15cd4feee845bf80i0", "5c39c6163074dde3e12ce47a04918999c3963cfd5c3dbfd0c7fe04f8032d7a13i0", "08afaf3ba15e149bdd47aeed960198d23cb0c5dc7277fe3bab421a1a89bb93e0i0", "fcbf1268dbf972fc53f5f43e220d3a0f822d3aee558279b05357320a0eba1949i0", "5a62432a6d570c53bac1d7ccb5d82d16ad32797292c1aa16dc449d15153c3d03i0", "35c41a15a27f2b3061e9d0cfffcbdb52a00f3055751f6a57fb7778b630611a85i0", "f6e4e1158d76285487250a6dd6ba6c15568e304fd7bf114cc6b6b7c6fd0782e6i0", "13b262cd366ebfabf884068ba95833f59b33c271b0c97345e21fdc150765f729i0", "882dbaffd4cf6ad9921c12a29bb815c4672278fbe5921c54d1478da6a8266aa2i0", "08a3e5cfa0c3376717a15e62fb884f45f91c92d99986e199700b29c43a4f18b4i0", "ee11650e004b0affc74e99a25bddccc80e23ca6a922a9232bfa181e75aecefaei0", "3d3680b1381b31b81e412c94a67541cd56659c560d4046eb8adaac710fb3e628i0", "1cebb03e2bab33e412e65ac3fc867f74496bb8cc3dc6b03c5f2dde935982ac38i0", "15bf0ae4f876a5847436efbc214d4fcdec99162e9c520dfda570c00c6ad33995i0", "5cc3fcfbeef13448472a2022514c25c156315ab2ad40b55b4cb6533f6fc0f0d2i0", "5e9ec45eb41c028ab5ceea405da708c2947de533fb0147de3eefd17db9c1d1ffi0", "1acb4056011d0f5923695809407752503da325db6bb7ae7c4b7301453ce16815i0", "ec44c2127ce3bf2f2b99e160de3b9a5581d47839fb79896f2f8cd56ce10e09ebi0", "9df16572bcca02d29dd964db2c42b06214ba19c08b0cc0ba9ba5ddb7036ad167i0", "4cb01957bccc3a3f707dd3c00d4f710c914eb89ab1a6cf4b8140b0fbf12e9c25i0"];

    const mintHeads = ["b42f25f887cb5892b5407b9695fe75bebf5c5f6355c4170885fbafbe3b89069fi0", "2dd97623633460b15ad8b095ea4a934d92052db79b8ac6b403d8be8ae060d2bfi0", "94bcad993bc8191a283154837d0bb626cfe422a3f440e96c39ee7eda8edbefafi0", "ccee555aa81bc0dbdd42b15bcdb4d487526a32c84ef8d01761634325ff066a96i0", "1690b5d4a6c4613ef224ffbac924a358d6541a626c1978097ca863307e0d08b2i0", "6255fa89337019082a23397d6a9dfd5cf29d06d46512dc7205c9fa4c4572e35ai0", "728e42af6db188d41ecbe44a0f52f5ecf928c469e04bf7a9fba48e9ab4eb8b98i0", "d53d06f46ead29bbbbddc4920856e025c6b39e405c4477003a8d6e08a5c75b03i0", "d7532521a7ec1877ac01a355627aa2d2779d37a2caebc40d6fecadc9f2817391i0", "847b849f986342c7fd60862322eda41be4788cbe309ae48aeee9b32ca8c6250di0", "0d0238e800096118dc5c07def29de08c8eda639f9cca5fe255ab0099db1b723ei0", "ffd088a06304e141c42ddfe0decc68031055dd256e5e21bbdf7b23c73758e181i0", "6f69e161f1480ff5c2023abd20eb6feb8016b3d635270e1021fd7239304d2e39i0", "3807c00e545634fda1088c929c4ecc5162d1014b94ea2a91f21189ce1fe2015di0", "4e87ccbee72d6ec9c665fd8888a9d7ecd69c0c58290befbccb11939fa755b806i0", "2f804e97af597b7ca0869985ac9b8f0a4d29d276979f30446c686389b33b9130i0", "d7b8499ca774e941e3942868c92f167ea353f298c65fd5f5f8f74ff82402607ai0", "35dd2e6220e45ec3f485c01f520f565cba9dabbac9acd18548c9e8df76a8f3c9i0", "defd83b671c0ab58c7e3706bb19bb4a2a1105a03a9bd6be223f5284297362777i0", "ec72c3499ccc00172c5829430651bcaf0c832eb7f5c52057b96a1ff2511cf5d0i0"];
    const orangeHeads = ["df2ef67da9ff23c7b4fc5474ce671745a2a5dbdce76a9aa0a7df7bd46e1f04b9i0", "42740b8f41976e2b450f37b0c4fd30995002d02ef5f1bf529a51e6d7f2512b9fi0", "2cec03dfb4d4f24d80588a2a1f270bbba66e28c0277f81b7789a2d2b4e8c370fi0", "d367b91413f6115215da88912399120460ef727069e531696b4d568285827b07i0", "6cfc63564de44ea62bbe24a444eecfdc6ef8e37eb0a00ca77f965b394faff29ci0", "35cfb9b3fee1b21d04bc7787b4b9aa9b1f78905e46c8cb01744a972f3444b7edi0", "5644a0ba9a81fdfbdc788a616f274321110f47fba5e91759b32f0c142a817f82i0", "6ce2a4d7f9b145684ecedf83a763c62eade8ca4ce2d56f8bc73a6df82f383668i0", "8494a90e72b8974ef0eef2b68ad5a41e0b7a29385f5bcbb04807c4c667ac1119i0", "fd8aead4ca4af4558cd2686827ac5738c21c17ce557147ec58205c91f039aae2i0", "e0e75f8fa58b0a9a236a8974c8c395c9fd773e250fb6e45ef5795c8a609a7cd8i0", "2a6926a5697fbfbe58f4dcef8025e3e04ed1b09e80fa0ea56984d991ff7898ebi0", "6e3dfb9c79d33dc52625f4e7d88b3fc1e904fea83796fdf0904b65c24cd595cci0", "b0820cd9f2774b205ecc53aceba1067c361f8a4825ba0ab5f3c512dd03e937cei0", "c28031314a3cb6a3e898281959f76fe76106dfc87585726f767c0eb947ac86aci0", "c94c3a56de8333f6094ad0e60784e6838fd0ea0484a3886fe41a5d0aaf098189i0", "25a3717ea39c230dce4efdd3219ceff5e9b3282bc56efb954c27b0ad4d53cdb8i0", "b24013e8ff8e0e0536eb02094ef386609d24135716bfab09472017cebfceaf2fi0", "498a1b5538c8cce5157aa162b3d8f5e6d154632b1ae3dd88814268b24cfa494fi0", "3ef148c2ce22e3355659eba9f1846f674d7773eb8d973ea647c0badb995d488bi0"];
    const purpleHeads = ["00f6d8364997b431e643f070931d94fc5a22bb710fb201b60d3ad5716a2bd86bi0", "38abc9d49626b82d226b7b06914313be103bae7eca3c2ec628b660253eb1d6e3i0", "806b1ba8ddb3c4d508ed3b00a40c0d4a9ddcd9c38a06ea7d957f58635d2db5efi0", "ebbdbfd19db3c3e986f25bacb0a712da5ca689fa3c151eaeb77877c23078c9b4i0", "a63c4dae2989f94b40fab8809baba2c851538bc998384e2de4a31d1498283670i0", "bd539fbcc64223908ca7f254e3a335994958a76670a8a686093a71e3ac914676i0", "d52f5cad52b3e8f2d34ea3b6ccca0689a078fae8b9a980cb79c7789a10c1dd00i0", "00982b058779bf30ff7f231ababa9915d9a71e5209a129d6490e6350699d4353i0", "01a9b4b3c1e4725495ddfb3e198d2e754fc5f009a2e388f6b1a5a79949af8d91i0", "2f43dd5cfaf5138257d41722c5c86e1adeaf22aaa97fe99b6013b56cd481723bi0", "d139ac699947d6b3b96d65b2f1e8c4e35f346ee81caabc4333167506be31dca9i0", "16c1b4dcc899377d4651bc8fc8f76bed4c413ba2e5508d60a1f79c7ee7ef858ai0", "7a912b504a3835bffd3e5692c9b2e28d45ae1d41dfb33bc7d90fd71083a072a2i0", "d971cae0b6d7fe5eb020eb11dc8fae7868855508b05213d5d71606177d03cdfai0", "fa3df84e47374493d0e822034fedc462191a36d2127b173553df70e4d012f960i0", "9184b77ad2f08d356ec04d0c817a7975cff0a5d62d5c34e5cfe9cc1dd597bff9i0", "56b75c53b64ec4b55270e869dd216cb45e30a21fb94a62b7e75768748ccaf0aci0", "3a301b02bf98c30c27b1cc1d3d9a969a43b90a3d359af89a3fabddb57a63a4fai0", "8a41f75643373b51ae7587cf41613e0176b766479588dee0c45f5a2b036b1750i0", "ace106f0076c161eed71162a759d5aaddd4f7c81e8218368d4c8dc9dec29e784i0"];
    const rainbowHeads = ["28df23b177765012e9569872df6f4d4ecc3d8d20cbbe58c626b4c5f391510ca3i0", "e1ad5409d915986566f768ca13887274ea776780bd239af3166f04481693ee42i0", "e5a0a2407a9ee87985153e5b7d3cec17259e5c50b020b34fb365a50665e4c9c5i0", "fde7aa46e777e11029be68728d7b29dd4fd10364ab974526ed8085eedbce8d48i0", "532d653527a62b397d489bbbc3d0ac509fad825a6fd18aaae7467d9a18cd0e33i0", "42ba332b9d50506ebfe2442295bb3093b34c1513e6f772abe377284625cbb4c6i0", "af7c0ab8920aa7863d1a1a13fc3943a5b7c50693e2656ae01412ff5eda9a9867i0", "10e52d0cd4b441d6cc6551a3385a8c39c5bffb700cf0abf50c5a33116565c3afi0", "1d723b38fb87bcf6ee0cfb44d2a795583f8c40f8479cfb792ac44947474c340ei0", "d86fb9eb424f27a808bab610d2fa1a784619ea6a4d751c28c711e39f7cfe5e6ai0", "f0986b9d25bcf163cadd5b67b05d2896291cc58bf2e01974a6d648e0c90dc0dci0", "c9b43c2b67f167057a2a962e000cc1d2b6908c8536828d3a7333985ca1f544d8i0", "1b4fcf4ea32b46cda41534911cd405a6b7618bd68e2cd846725d83898eadadeei0", "8a930489e5171f96f90d2b0f636cf5321dbce9211bce3fa92ea5aebe57ecd28ai0", "862d6a9ed6168e38259d95d7aabdd4f363c674776ede2b49de9f8f89900aa31ci0", "373e4e3af94da01324ae57b34948f8fef0e11ccec681594aa4db3b6d61a640a5i0", "dc3e5b1cf74276ba00fa1a3c7c7b6087c94d219685eecc292f87d4391e9d2451i0", "501a019d349105eb7b7eced8ef884ec3482844f01e724c55f857839c27d912f0i0", "c35e36998e3424ea3760b0ade2ef062fb4c9ddf975cea6366f9b759424d09c23i0", "fa3180e344b09c6848ae436c2e4bedf02ab29d2ab2f920c298a7c30c2242cb27i0"];
    const whiteHeads = ["0c2085061c4660e531b49f9aac098b8c42cb1e1b056eb8895ac4f798eb11b2b0i0", "016c41602f07d7328812d8de1117db3b1dde1e85724a537fb5e0dfb28d7783cdi0", "58310ef332578ce2940d4b09f3cb75185a2d73905ea73c55ae43223a6688bfdci0", "8379d30a81763dc45dc92745462986d0907f6b68d00031a7dc8d5fbcc37d3e0bi0", "aa3d232e43265f2d1db2835ab0ced0fe800970087f4d0ee5597d174448fc3d35i0", "a02c2c3988f27149333837ce8661192209adb36aa6f1c27139be5532e2dde02ei0", "0ef79828836051a19b6d779ad671920346857ff66ea534165acc85f7ea59ea32i0", "e2e9230a6afffbf9b5a53e49bfcd226461f879b0c627e8081b5ca68c3fe8bf7bi0", "e39d6ab760a303a35eb590910089df8b022f4d13ced931e08c35d3642d0d4413i0", "2b65eaeff6856b60010f47f0b9ae5a1eecb39168d80957671741fa19d81e833ai0", "5312df30282ac289c6ede4e1292e16dc878b00e9812b9694cdbd94e536759d4ei0", "6f508afb470476fe01977af69624fdc9e6f23f0058cd3dce5ae922a6c72e5d30i0", "b858ca5046a72da056f650d3a90428dc38b06624d23b61b88e29c7376c4e4f83i0", "d2c848294aa145f6653fbe2d3f2d4423d43816bccf1ad6f45a0aac4b25aa0d95i0", "a9d621226ae28888d9bccab79738e0bd3108d104bb530934f4a8e5c526d1e585i0", "8f7e78d4fc17010722d1b756c08da4fc5bf1ba052d91f99da196cd65011a4f4di0", "37814e60f28d0df493170e7748d2bc609772a3ebecc6c1626474e2bafaa771dei0", "fd452c1e1cb617ba2bc9813055bd727dde5efbbacfc59fe6f0ba036773c13ff3i0", "0d812593d10bee79f6f3f43d8eeedc303cde4dc86f737d9642b1a8cf9f128010i0", "9f1e1d549c21794ef789998243774721a701d858f54b22e0745c84622243badei0"];


    let currentBackgroundIndex = 0;
    let currentBodyIndex = 0;
    let currentHeadIndex = 0;
    let currentwBodyIndex = 0;
    let currentwHeadIndex = 0;

    const backgroundImg = document.getElementById("backgroundImg");
    const bodyImg = document.getElementById("bodyImg");
    const headImg = document.getElementById("headImg");
    const wbodyImg = document.getElementById("wbodyImg");
    const wheadImg = document.getElementById("wheadImg");
    const finalBackground = document.getElementById("finalBackground");
    const finalBody = document.getElementById("finalBody");
    const finalHead = document.getElementById("finalHead");
    const finalwBody = document.getElementById("finalwBody");
    const finalwHead = document.getElementById("finalwHead");
    const traitSelection = document.getElementById("traitSelection");

    //let thisBody;
    //let thisHead;
    //let thisBG; href="https://ordinals.com/"

    function setIndex(trait, indexOffset) {
      const {
        ids,
        currentIdx,
        imgElement,
        finalImgElement
      } = trait;
      const newIdx = (currentIdx + indexOffset + ids.length) % ids.length;

      imgElement.src = `/content/${ids[newIdx]}`;
      finalImgElement.src = `/content/${ids[newIdx]}`;
      trait.currentIdx = newIdx;

    }

    const backgroundTrait = {
      ids: backgrounds,
      currentIdx: currentBackgroundIndex,
      imgElement: backgroundImg,
      finalImgElement: finalBackground,
    };

    var bodyTrait;
    var headTrait;
    var wbodyTrait;
    var wheadTrait;
    let bodyIds, headIds, wbodyIds, wheadIds;

    function updateTraitImages() {
      const traitType = traitSelection.value;

      wbodyIds = whiteBodies;
      wheadIds = whiteHeads;

      switch (traitType) {
        case "mint":
          bodyIds = mintBodies;
          headIds = mintHeads;
          break;
        case "orange":
          bodyIds = orangeBodies;
          headIds = orangeHeads;
          break;
        case "purple":
          bodyIds = purpleBodies;
          headIds = purpleHeads;
          break;
        case "rainbow":
          bodyIds = rainbowBodies;
          headIds = rainbowHeads;
          break;
        case "black":
        default:
          bodyIds = blackBodies;
          headIds = blackHeads;
          break;
      }

      bodyTrait = {
        ids: bodyIds,
        currentIdx: currentBodyIndex,
        imgElement: bodyImg,
        finalImgElement: finalBody,
      };

      headTrait = {
        ids: headIds,
        currentIdx: currentHeadIndex,
        imgElement: headImg,
        finalImgElement: finalHead,
      };

      wbodyTrait = {
        ids: wbodyIds,
        currentIdx: currentwBodyIndex,
        imgElement: wbodyImg,
        finalImgElement: finalwBody,
      };

      wheadTrait = {
        ids: wheadIds,
        currentIdx: currentwHeadIndex,
        imgElement: wheadImg,
        finalImgElement: finalwHead,
      };

      setIndex(bodyTrait, 0);
      setIndex(headTrait, 0);
      setIndex(wbodyTrait, 0);
      setIndex(wheadTrait, 0);
    }

    traitSelection.addEventListener("change", updateTraitImages);

    document.getElementById("prevBackground").addEventListener("click", () => {
      setIndex(backgroundTrait, -1);
    });
    document.getElementById("nextBackground").addEventListener("click", () => {
      setIndex(backgroundTrait, 1);
    });
    document.getElementById("prevBody").addEventListener("click", () => {
      setIndex(bodyTrait, -1);
    });
    document.getElementById("nextBody").addEventListener("click", () => {
      setIndex(bodyTrait, 1);
    });
    document.getElementById("prevHead").addEventListener("click", () => {
      setIndex(headTrait, -1);
    });
    document.getElementById("nextHead").addEventListener("click", () => {
      setIndex(headTrait, 1);
    });

    document.getElementById("prevwBody").addEventListener("click", () => {
      setIndex(wbodyTrait, -1);
    });
    document.getElementById("nextwBody").addEventListener("click", () => {
      setIndex(wbodyTrait, 1);
    });
    document.getElementById("prevwHead").addEventListener("click", () => {
      setIndex(wheadTrait, -1);
    });
    document.getElementById("nextwHead").addEventListener("click", () => {
      setIndex(wheadTrait, 1);
    });

    // Set the initial trait selections
    setIndex(backgroundTrait, 0);
    updateTraitImages();

    const generateButton = document.getElementById("generateHTML");
    const terminal = document.getElementById("terminal");

    function animateTerminal(input, text, index = 0, delay = 2) {
      if (index < text.length) {
        input.value += text[index];
        input.scrollTop = input.scrollHeight; // scroll to the bottom
        setTimeout(() => animateTerminal(input, text, index + 1, delay), delay);
      }
    }

    function generateHtmlCode() {
      var backgroundSrc = finalBackground.src;
      var bodySrc = finalBody.src;
      var headSrc = finalHead.src;
      var wbodySrc = finalwBody.src;
      var wheadSrc = finalwHead.src;

      console.log(backgroundSrc, bodySrc, headSrc)

      backgroundSrc = backgroundSrc.replace(/^(https?:\/\/[^/]+)?/, '');
      bodySrc = bodySrc.replace(/^(https?:\/\/[^/]+)?/, '');
      headSrc = headSrc.replace(/^(https?:\/\/[^/]+)?/, '');
      wbodySrc = wbodySrc.replace(/^(https?:\/\/[^/]+)?/, '');
      wheadSrc = wheadSrc.replace(/^(https?:\/\/[^/]+)?/, '');

      backgroundSrc = backgroundSrc.replace("file:///", "").replace("C:", "");
      bodySrc = bodySrc.replace("file:///", "").replace("C:", "");
      headSrc = headSrc.replace("file:///", "").replace("C:", "");
      wbodySrc = wbodySrc.replace("file:///", "").replace("C:", "");
      wheadSrc = wheadSrc.replace("file:///", "").replace("C:", "");

      const htmlCode = `
<html lang="en">
<head>
  <base/>
  <meta charset="UTF-8">
  <meta protocol="FORGE" ticker="Recursive-Robots" operation="mint" name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
    #artifact { position: relative; width: 24rem; height: 24rem; }
    #artifact img { position: absolute; width: 100%; height: 100%; object-fit: contain; top: 0; left: 0; image-rendering: pixelated }
  </style>
</head>
<body>
  <div id="artifact">
    <img src="${backgroundSrc}" alt="Background" />
    <img src="${wbodySrc}" alt="Body" />
    <img src="${wheadSrc}" alt="Head" />
    <img src="${bodySrc}" alt="Body" />
    <img src="${headSrc}" alt="Head" />
  </div>

</body>
</html>`;

      return htmlCode;
    }

    generateButton.addEventListener("click", () => {
      terminal.value = "";
      const htmlCode = generateHtmlCode();
      animateTerminal(terminal, htmlCode);
    });
  </script>
</body>

</html>