13,382,540

<!doctype html>
<!--
___   ____     _____  _     ____      ___   _  _____  _       __    ___  
| |_) | |_       | |  | |_| | |_      | |_) | |  | |  | |\/|  / /\  | |_) 
|_|_) |_|__      |_|  |_| | |_|__     |_|_) |_|  |_|  |_|  | /_/--\ |_|   

concept: @AdrianDittmann dev: @ordinalOS 2023 -->
<html>

<head>
  <title>Be The Bitmap</title>
  <meta name=viewport content="width=device-width,initial-scale=1.2,maximum-scale=1">
  <style>
    body {
      background-color: #0000008f;
      color: #fff;
      font-family: helvetica
    }

    button {
      width: 90%;
      height: 75px;
      font-size: 22px;
      image-rendering: optimizeSpeed;
      image-rendering: pixelated;
      image-rendering: optimize-contrast;
      background-position: 0 0;
      background-repeat: repeat;
      background-size: 1px;
      touch-action: manipulation;
      background-color: #ddd
    }

    input {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      height: 14px
    }

    .wrapper {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      position: absolute;
      overflow: scroll;
      overflow-x: hidden
    }

    #image {
      display: none
    }

    #canvas {
      max-width: 70vw;
      max-height: 70vh;
      margin: 0 auto;
      border: 1px solid #000;
      background: rgba(0, 0, 0, .078);
      background-size: 40px 40px;
      background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
      -webkit-animation: rainbow 18s ease infinite;
      -z-animation: rainbow 18s ease infinite;
      -o-animation: rainbow 18s ease infinite;
      animation: rainbow 18s ease infinite
    }

    @-webkit-keyframes rainbow {
      0% {
        background-position: 0 82%
      }

      50% {
        background-position: 100% 19%
      }

      100% {
        background-position: 0 82%
      }
    }

    @-moz-keyframes rainbow {
      0% {
        background-position: 0 82%
      }

      50% {
        background-position: 100% 19%
      }

      100% {
        background-position: 0 82%
      }
    }

    @-o-keyframes rainbow {
      0% {
        background-position: 0 82%
      }

      50% {
        background-position: 100% 19%
      }

      100% {
        background-position: 0 82%
      }
    }

    @keyframes rainbow {
      0% {
        background-position: 0 82%
      }

      50% {
        background-position: 100% 19%
      }

      100% {
        background-position: 0 82%
      }
    }

    body ::-webkit-scrollbar {
      width: 16px;
      height: 16px;
      background: 0 0
    }

    body ::-webkit-scrollbar-button,
    body ::-webkit-scrollbar-thumb {
      width: 16px;
      height: 16px;
      background: silver;
      box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
      border: 1px solid;
      border-color: silver #000 #000 silver
    }

    body ::-webkit-scrollbar-track {
      image-rendering: optimizeSpeed;
      image-rendering: pixelated;
      image-rendering: optimize-contrast;
      background-position: 0 0;
      background-repeat: repeat
    }

    body ::-webkit-scrollbar-button {
      background-repeat: no-repeat;
      background-size: 16px
    }

    body ::-webkit-scrollbar-button:single-button:vertical:decrement {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=")
    }

    body ::-webkit-scrollbar-button:single-button:vertical:increment {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=")
    }

    body ::-webkit-scrollbar-button:single-button:horizontal:decrement {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=")
    }

    body ::-webkit-scrollbar-button:single-button:horizontal:increment {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=")
    }

    body ::-webkit-scrollbar-corner {
      background: silver
    }

    .marquee {
      position: fixed;
      width: 100%;
      bottom: 0;
      height: 9px;
      padding: 2px;
      font-size: 9px;
      color: #000;
      background-color: #fff;
      text-align: center;
      text-transform: uppercase
    }

    .gamepad {
      display: flex;
      justify-content: space-between;
      width: 75%;
      margin: 40px auto
    }

    .gamepad .button {
      width: 50px;
      height: 50px;
      margin: 5px;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #666;
      border: none;
      color: #fff;
      cursor: pointer;
      outline: 0
    }

    .d-pad {
      display: grid;
      grid-template-columns: 50px 50px 50px;
      grid-template-rows: 50px 50px 50px;
      gap: 5px
    }

    .d-pad #btnMoveUp {
      grid-column: 2;
      grid-row: 1
    }

    .d-pad #btnMoveLeft {
      grid-column: 1;
      grid-row: 2
    }

    .d-pad #btnMoveRight {
      grid-column: 3;
      grid-row: 2
    }

    .d-pad #btnMoveDown {
      grid-column: 2;
      grid-row: 3
    }

    .d-pad #btnCenter {
      grid-column: 2;
      grid-row: 2;
      background: orange
    }

    .zoom-controls {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: end
    }

    /*!
*/
    .cropper-container {
      direction: ltr;
      font-size: 0;
      line-height: 0;
      position: relative;
      -ms-touch-action: none;
      touch-action: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none
    }

    .cropper-container img {
      display: block;
      height: 100%;
      image-orientation: 0deg;
      max-height: none !important;
      max-width: none !important;
      min-height: 0 !important;
      min-width: 0 !important;
      width: 100%
    }

    .cropper-canvas,
    .cropper-crop-box,
    .cropper-drag-box,
    .cropper-modal,
    .cropper-wrap-box {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0
    }

    .cropper-canvas,
    .cropper-wrap-box {
      overflow: hidden
    }

    .cropper-drag-box {
      background-color: #fff;
      opacity: 0
    }

    .cropper-modal {
      background-color: #000;
      opacity: .5
    }

    .cropper-view-box {
      display: block;
      height: 100%;
      outline: 1px solid #39f;
      outline-color: rgba(51, 153, 255, .75);
      overflow: hidden;
      width: 100%
    }

    .cropper-dashed {
      border: 0 dashed #eee;
      display: block;
      opacity: .5;
      position: absolute
    }

    .cropper-dashed.dashed-h {
      border-bottom-width: 1px;
      border-top-width: 1px;
      height: 33.33333%;
      left: 0;
      top: 33.33333%;
      width: 100%
    }

    .cropper-dashed.dashed-v {
      border-left-width: 1px;
      border-right-width: 1px;
      height: 100%;
      left: 33.33333%;
      top: 0;
      width: 33.33333%
    }

    a {
      color: orange
    }

    .cropper-center {
      display: block;
      height: 0;
      left: 50%;
      opacity: .75;
      position: absolute;
      top: 50%;
      width: 0
    }

    .cropper-center:after,
    .cropper-center:before {
      background-color: #eee;
      content: " ";
      display: block;
      position: absolute
    }

    .cropper-center:before {
      height: 1px;
      left: -3px;
      top: 0;
      width: 7px
    }

    .cropper-center:after {
      height: 7px;
      left: 0;
      top: -3px;
      width: 1px
    }

    .cropper-face,
    .cropper-line,
    .cropper-point {
      display: block;
      height: 100%;
      opacity: .1;
      position: absolute;
      width: 100%
    }

    .cropper-face {
      background-color: #fff;
      left: 0;
      top: 0
    }

    .cropper-line {
      background-color: #39f
    }

    .cropper-line.line-e {
      cursor: ew-resize;
      right: -3px;
      top: 0;
      width: 5px
    }

    .cropper-line.line-n {
      cursor: ns-resize;
      height: 5px;
      left: 0;
      top: -3px
    }

    .cropper-line.line-w {
      cursor: ew-resize;
      left: -3px;
      top: 0;
      width: 5px
    }

    .cropper-line.line-s {
      bottom: -3px;
      cursor: ns-resize;
      height: 5px;
      left: 0
    }

    .cropper-point {
      background-color: #39f;
      height: 5px;
      opacity: .75;
      width: 5px
    }

    .cropper-point.point-e {
      cursor: ew-resize;
      margin-top: -3px;
      right: -3px;
      top: 50%
    }

    .cropper-point.point-n {
      cursor: ns-resize;
      left: 50%;
      margin-left: -3px;
      top: -3px
    }

    .cropper-point.point-w {
      cursor: ew-resize;
      left: -3px;
      margin-top: -3px;
      top: 50%
    }

    .cropper-point.point-s {
      bottom: -3px;
      cursor: s-resize;
      left: 50%;
      margin-left: -3px
    }

    .cropper-point.point-ne {
      cursor: nesw-resize;
      right: -3px;
      top: -3px
    }

    .cropper-point.point-nw {
      cursor: nwse-resize;
      left: -3px;
      top: -3px
    }

    .cropper-point.point-sw {
      bottom: -3px;
      cursor: nesw-resize;
      left: -3px
    }

    .cropper-point.point-se {
      bottom: -3px;
      cursor: nwse-resize;
      height: 20px;
      opacity: 1;
      right: -3px;
      width: 20px
    }

    @media (min-width:768px) {
      .cropper-point.point-se {
        height: 15px;
        width: 15px
      }
    }

    @media (min-width:992px) {
      .cropper-point.point-se {
        height: 10px;
        width: 10px
      }
    }

    @media (min-width:1200px) {
      .cropper-point.point-se {
        height: 5px;
        opacity: .75;
        width: 5px
      }
    }

    .cropper-point.point-se:before {
      background-color: #39f;
      bottom: -50%;
      content: " ";
      display: block;
      height: 200%;
      opacity: 0;
      position: absolute;
      right: -50%;
      width: 200%
    }

    .cropper-invisible {
      opacity: 0
    }

    .cropper-bg {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
    }

    .cropper-hide {
      display: block;
      height: 0;
      position: absolute;
      width: 0
    }

    .cropper-hidden {
      display: none !important
    }

    .cropper-move {
      cursor: move
    }

    .cropper-crop {
      cursor: crosshair
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 200px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: #000;
      background-color: rgba(0, 0, 0, .4)
    }

    .modal-content {
      background-color: #686868;
      margin: auto;
      padding: 10px;
      border: 1px solid #888;
      width: 80%;
      font-size: 8px
    }

    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: 700
    }

    .close:focus,
    .close:hover {
      color: #000;
      text-decoration: none;
      cursor: pointer
    }

    .titlebar {
      color: #fff;
      height: 80px;
      background: 0 0;
      border: none;
      font-size: 14px
    }

    .cropper-disabled .cropper-drag-box,
    .cropper-disabled .cropper-face,
    .cropper-disabled .cropper-line,
    .cropper-disabled .cropper-point {
      cursor: not-allowed
    }
  </style>
</head>

<body>
  <div class=wrapper>
    <center>
      <label for=inputImage style="display:inline-block;padding:5px 20px;cursor:pointer;background-color:#b9b8b8;color:#1f1f1f;border:none;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:20px 0 10px;transition-duration:.4s">Upload Image</label>
      <input type=file id=inputImage accept=image/* hidden>
      <div style=width:300px;margin-bottom:10px>
        <canvas id=image style=display:none></canvas>
      </div>
      <canvas id=canvas width=1000 height=1000></canvas>
      <button class=titlebar id=titlebar>
        <h1>BE THE BITMAP</h1>
      </button>
      <br>
      <div class=gamepad>
        <div class=d-pad>
          <button class=button id=btnMoveUp>&#x2191;</button>
          <button class=button id=btnMoveLeft>&#x2190;</button>
          <button class=button id=btnMoveRight>&#x2192;</button>
          <button class=button id=btnMoveDown>&#x2193;</button>
          <button class=button id=btnCenter>&#x25EF;</button>
        </div>
        <div class=zoom-controls>
          <button class=button id=btnZoomIn>+</button>
          <button class=button id=btnZoomOut>-</button>
        </div>
      </div>
      <br>
      <br>
      <br>
      <br>
      <button id=btnDownload1000>Download 1000px</button>
      <br>
      <br>
      <button id=btnDownload400>Download 400px</button>
      <br>
      <span style=font-size:12px>Best for Social Media</span>
      <br>
      <br>
      <br>
      <br>
      <div class=marquee>
        <marquee>BE THE BITMAP // BE THE BITMAP PFP TOOL // Made with love by @ordinalOS & @AdrianDittmann // S/O @blockamoto .bitmap // BE THE BITMAP // BE THE BITMAP PFP TOOL // Made with love by @ordinalOS & @AdrianDittmann // S/O @blockamoto .bitmap // BE THE BITMAP // BE THE BITMAP PFP TOOL // Made with love by @ordinalOS & @AdrianDittmann // S/O @blockamoto .bitmap // BE THE BITMAP // BE THE BITMAP PFP TOOL // Made with love by @ordinalOS & @AdrianDittmann // S/O @blockamoto .bitmap // Jun 24 2023 // This Tool is fully on chain using a recursive inscription of cropper.js b00cfb90d712ab0c5fd80580629c1910538859e55b9a9d6306f734420f3721f5i0 // See you soon :)
        </marquee>
      </div>
    </center>
  </div>
  <div id=myModal class=modal>
    <div class=modal-content>
      <span class=close>&times;</span>
      <p style=font-size:9px>
        Be The Bitmap | PFP TOOL<br>
        <br>
        Cropper.js v1.5.6<br>
        <span style=font-size:8px>b00cfb90d712ab0c5fd80580629c1910538859e55b9a9d6306f734420f3721f5i0</span><br>
        Made with love by
        <a target=_blank href=https://twitter.com/ordinalos>@ordinalOS</a>
        &
        <a target=_blank href=https://twitter.com/AdrianDittmann>@AdrianDittmann</a>
        s/o
        <a target=_blank href=https://twitter.com/blockamoto>@blockamoto</a><br>
      </p>
    </div>
  </div>
  <script src="/content/b00cfb90d712ab0c5fd80580629c1910538859e55b9a9d6306f734420f3721f5i0"></script>
  <script>
    var cropper, URL = window.URL || window.webkitURL,
      inputImage = document.getElementById("inputImage"),
      image = document.getElementById("image"),
      canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d");

    function downloadImage(e) {
      var t = cropper.getCroppedCanvas({
        width: 553.3333,
        height: 553.3333
      });
      ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(t, (canvas.width - 553.3333) / 2, (canvas.height - 553.3333) / 2);
      var o = document.createElement("canvas");
      o.width = e, o.height = e, o.getContext("2d").drawImage(canvas, 0, 0, e, e);
      var n = document.createElement("a");
      n.download = "image_" + e + "px.png", n.href = o.toDataURL(), n.click()
    }

    function setDragMode() {
      cropper.setDragMode("move")
    }

    function zoomIn() {
      cropper.zoom(.1)
    }

    function zoomOut() {
      cropper.zoom(-.1)
    }

    function moveLeft() {
      cropper.move(-10, 0)
    }

    function moveRight() {
      cropper.move(10, 0)
    }

    function moveUp() {
      cropper.move(0, -10)
    }

    function moveDown() {
      cropper.move(0, 10)
    }

    function btnCenter() {
      cropper.reset()
    }
    document.getElementById("btnDownload1000").onclick = function() {
      downloadImage(1e3)
    }, document.getElementById("btnDownload400").onclick = function() {
      downloadImage(400)
    }, document.getElementById("btnZoomIn").onclick = zoomIn, document.getElementById("btnZoomOut").onclick = zoomOut, document.getElementById("btnMoveLeft").onclick = moveLeft, document.getElementById("btnMoveRight").onclick = moveRight, document.getElementById("btnMoveUp").onclick = moveUp, document.getElementById("btnMoveDown").onclick = moveDown, document.getElementById("btnCenter").onclick = btnCenter, inputImage.onchange = function() {
      var e, t = this.files;
      if (t && t.length)
        if (e = t[0], /^image\/\w+/.test(e.type)) {
          var o = new Image;
          o.src = URL.createObjectURL(e), o.onload = function() {
            URL.revokeObjectURL(this.src), image.width = o.width, image.height = o.height;
            var e = image.getContext("2d");
            e.clearRect(0, 0, image.width, image.height), e.drawImage(o, 0, 0, o.width, o.height), void 0 !== cropper && cropper.destroy(), cropper = new Cropper(image, {
              aspectRatio: 1,
              autoCropArea: 2,
              viewMode: 1,
              cropBoxResizable: !1,
              ready: function() {
                var e = this.cropper.getContainerData(),
                  t = Math.min(e.width, e.height);
                this.cropper.setCropBoxData({
                  width: t,
                  height: t,
                  left: (e.width - t) / 2,
                  top: (e.height - t) / 2
                })
              },
              crop: function() {
                var e = cropper.getCroppedCanvas({
                  width: 553.3333,
                  height: 553.3333
                });
                ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(e, (canvas.width - 553.3333) / 2, (canvas.height - 553.3333) / 2)
              }
            })
          }
        } else window.alert("Please choose an image file.")
    }
  </script>
  <script>
    var modal = document.getElementById("myModal"),
      btn = document.getElementById("titlebar"),
      span = document.getElementsByClassName("close")[0];
    btn.onclick = function() {
      modal.style.display = "block"
    }, span.onclick = function() {
      modal.style.display = "none"
    }, window.onclick = function(n) {
      n.target == modal && (modal.style.display = "none")
    }
  </script>
</body>

</html>
eOne.btc

1 year ago
everyone
eOne.btc

1 year ago
everyone
Inscription
13,382,540

ID
1ce23...93fi0
Owned By
SCP001
File Type
HTMLtext/html;charset=utf-8
File Size
14.394 KB
Created
June 24, 2023, 1:50 PM UTC
1 year ago
Creation Block
795,720
Creation Transaction
1ce23...3d93f
Creation Fee
72,010sats
Tags
No tags yet
Sat

Sat Number
1825098591808018
Sat Name
axpjoccbptv
Sat Creation Block
620,078
Sat Creation Year
2020
Inscriptions
1. 1. 13,382,540
Cursed Inscriptions
No cursed inscriptions yet
SATRIBUTES
No Satributes
Recursive Modules

13,345,027

text/javascript
13,382,540

eOne.btc

eOne.btc

13,382,540

1ce23...93fi0

SCP001

HTMLtext/html;charset=utf-8

14.394 KB

June 24, 2023, 1:50 PM UTC

1 year ago

72,010sats

No tags yet

Sat

axpjoccbptv

2020

No cursed inscriptions yet

No Satributes

Recursive Modules

13,345,027
