Ord.io Logo
Inscriptions
Runes
Ord.io Logo
Ord.io
Inscription

77,406,912

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Holden's Art Journey</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Audiowide&display=swap');

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #111;
      color: #fff;
      margin: 0;
      font-family: 'Permanent Marker', cursive;
      font-size: 14px;
      /* Reduced font size to fit more text */
    }

    .text-container {
      text-align: center;
      color: red;
      padding: 10px;
      max-width: 90%;
      overflow: hidden;
      /* Hide overflow instead of auto */
      animation: pulseColor 3s infinite;
      transition: color 0.1s ease;
      touch-action: none;
    }

    @keyframes pulseColor {
      0% {
        color: red;
      }

      50% {
        color: yellow;
      }

      100% {
        color: red;
      }
    }

    @media screen and (max-width: 480px) {
      body {
        font-size: 12px;
        /* Even smaller for very small screens */
      }
    }

    .text-container p {
      line-height: 1.2;
      /* Reduced line height to fit more text */
      margin: 0.2em 0;
      /* Reduced margin for paragraphs */
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      10%,
      30%,
      50%,
      70%,
      90% {
        transform: translateX(-5px);
      }

      20%,
      40%,
      60%,
      80% {
        transform: translateX(5px);
      }
    }

    .text-container.shake {
      animation: shake 0.5s infinite;
    }

    @keyframes flashBlue {
      0% {
        color: red;
      }

      50% {
        color: blue;
      }

      100% {
        color: red;
      }
    }

    @keyframes pulseBlueWhite {
      0% {
        color: blue;
      }

      50% {
        color: white;
      }

      100% {
        color: blue;
      }
    }

    .text-container.flash {
      animation: flashBlue 0.5s;
    }

    .text-container.bluepulse {
      animation: pulseBlueWhite 1s infinite;
    }

    .neon-green {
      font-family: 'Audiowide', sans-serif;
      color: #00FF00;
    }
  </style>
</head>

<body>
  <div class="text-container" id="textContainer">
    <p id="typedText"></p>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const textContainer = document.getElementById('textContainer');
      const typedText = document.getElementById('typedText');
      const sentences = [
        "Hi! I’m <span id='holdenName'>Holden</span>! I was born on November 15, 2022, at 9:26 in the morning, and this is where all my art lives!",
        "Every time I create something new—a drawing, a doodle, or something exciting—it’ll be saved here as part of my journey.",
        "This is my special place to share my imagination and the things I dream up along the way.",
        "Thanks for being here to see the world through my eyes, one creation at a time!"
      ];

      let fullText = '';
      let currentSentenceIndex = 0;
      let currentCharacterIndex = 0;

      function typeText() {
        if (currentSentenceIndex < sentences.length) {
          if (currentCharacterIndex < sentences[currentSentenceIndex].length) {
            // Append the current character to fullText without updating the DOM immediately
            fullText += sentences[currentSentenceIndex].charAt(currentCharacterIndex);
            // Update the DOM with the full text including the current character
            typedText.innerHTML = fullText + (currentCharacterIndex < sentences[currentSentenceIndex].length - 1 ? '█' : ''); // Cursor effect
            currentCharacterIndex++;
            setTimeout(typeText, 50); // Types out each character every 50ms
          } else {
            fullText += '<br>';
            currentSentenceIndex++;
            currentCharacterIndex = 0;
            if (currentSentenceIndex < sentences.length) {
              setTimeout(typeText, 1000); // Pause before next sentence
            }
          }
        }
      }

      typeText(); // Start typing

      let clickCount = 0;

      textContainer.addEventListener('click', function(event) {
        event.preventDefault();
        if (clickCount < 69) {
          clickCount++;
          this.classList.add('flash');
          setTimeout(() => this.classList.remove('flash'), 500);
        } else {
          clickCount = 0;
          this.classList.add('shake');
          setTimeout(() => {
            this.classList.remove('shake');
            this.classList.add('bluepulse');
            const holdenName = document.getElementById('holdenName');
            holdenName.textContent = 'h0lden.sats';
            holdenName.classList.add('neon-green');
          }, 3000);
        }
      });
    });
  </script>
</body>

</html>
  • ID

    5349f...e12i0

  • Owned By
    Owner Image

    bc1pu...qn375

  • File Type

    HTMLtext/html;charset=utf-8

  • File Size

    5.723 KB

  • Created

    November 15, 2024, 10:04 AM UTC

    176 days ago

  • Creation Block
    870,391
  • Creation Transaction
    5349f...7ce12
  • Creation Fee

    8,460sats

  • Tags

    No tags yet

Sat