endpoints.path: /
endpoints.endpoint_type: HTTP
endpoints.scan_time: 2025-10-13T15:22:55.733654
endpoints.uri: https://utils.callfry.com/
endpoints.protocol: HTTP/1.1
endpoints.status_reason: OK
endpoints.key: Access-Control-Allow-Methods
endpoints.headers: GET, PUT, POST, DELETE, PATCH, OPTIONS
endpoints.key: Access-Control-Allow-Credentials
endpoints.headers: true
endpoints.key: Connection
endpoints.headers: keep-alive
endpoints.key: Accept-Ranges
endpoints.headers: bytes
endpoints.key: Content-Length
endpoints.headers: 14574
endpoints.key: Access-Control-Allow-Origin
endpoints.headers: *
endpoints.key: Last-Modified
endpoints.headers: Wed, 23 Apr 2025 10:13:07 GMT
endpoints.key: Access-Control-Allow-Headers
endpoints.headers: DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization
endpoints.key: Strict-Transport-Security
endpoints.headers: max-age=31536000; includeSubDomains
endpoints.key: Content-Type
endpoints.headers: text/html
endpoints.key: Date
endpoints.headers: <REDACTED>
endpoints.key: Access-Control-Max-Age
endpoints.headers: 1728000
endpoints.key: ETag
endpoints.headers: "6808bd33-38ee"
endpoints.html_tags: <title>HTML Utils - Dev Toolkit</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
endpoints.body: <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Utils - Dev Toolkit</title>
      <style>
          :root {
              --bg-color: #0a0a0a;
              --text-color: #33ff33;
              --accent-color: #8844ff;
              --link-color: #00ccff;
              --border-color: #444;
              --card-bg: #111;
              --font-mono: 'Courier New', monospace;
          }
  
          * {
              box-sizing: border-box;
              transition: all 0.2s ease;
          }
  
          body {
              background-color: var(--bg-color);
              color: var(--text-color);
              font-family: var(--font-mono);
              margin: 0;
              padding: 20px;
              line-height: 1.6;
              background-image:
                  radial-gradient(rgba(0, 255, 0, 0.1) 2px, transparent 2px),
                  linear-gradient(rgba(0, 255, 0, 0.05) 1px, transparent 1px);
              background-size: 40px 40px, 40px 40px;
          }
  
          .container {
              max-width: 1200px;
              margin: 0 auto;
          }
  
          header {
              border-bottom: 1px solid var(--border-color);
              padding-bottom: 20px;
              margin-bottom: 30px;
              text-align: center;
          }
  
          h1 {
              font-size: 2.5rem;
              margin-bottom: 5px;
              text-shadow: 0 0 10px rgba(51, 255, 51, 0.7);
              position: relative;
              display: inline-block;
          }
  
          h1::before {
              content: "[";
              color: var(--accent-color);
              margin-right: 10px;
          }
  
          h1::after {
              content: "]";
              color: var(--accent-color);
              margin-left: 10px;
          }
  
          h2 {
              border-bottom: 1px dashed var(--accent-color);
              padding-bottom: 5px;
              display: inline-block;
          }
  
          .subtitle {
              font-style: italic;
              color: #aaa;
          }
  
          .projects {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
              gap: 20px;
          }
  
          .project-card {
              background-color: var(--card-bg);
              border: 1px solid var(--border-color);
              border-radius: 5px;
              padding: 20px;
              position: relative;
              overflow: hidden;
          }
  
          .project-card:hover {
              transform: translateY(-5px);
              box-shadow: 0 5px 15px rgba(0, 204, 255, 0.2);
              border-color: var(--link-color);
          }
  
          .project-card::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              height: 3px;
              background: linear-gradient(90deg, var(--accent-color), var(--link-color));
          }
  
          .project-header {
              margin-bottom: 15px;
              display: flex;
              justify-content: space-between;
              align-items: center;
          }
  
          .project-title {
              font-size: 1.3rem;
              margin: 0;
              color: var(--link-color);
          }
  
          .project-icon {
              font-size: 1.5rem;
              color: var(--accent-color);
          }
  
          .project-description {
              margin-bottom: 15px;
          }
  
          .project-links {
              margin-top: 20px;
          }
  
          .project-link {
              display: inline-block;
              background-color: rgba(0, 204, 255, 0.1);
              padding: 5px 15px;
              border: 1px solid var(--link-color);
              border-radius: 3px;
              color: var(--link-color);
              text-decoration: none;
              font-weight: bold;
              margin-right: 10px;
          }
  
          .project-link:hover {
              background-color: rgba(0, 204, 255, 0.2);
              transform: scale(1.05);
          }
  
          footer {
              margin-top: 50px;
              text-align: center;
              font-size: 0.9rem;
              color: #666;
              border-top: 1px solid var(--border-color);
              padding-top: 20px;
          }
  
          @media (max-width: 768px) {
              .projects {
                  grid-template-columns: 1fr;
              }
          }
  
          /* Matrix rain effect in the background */
          .matrix-bg {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: -1;
              opacity: 0.05;
          }
  
          /* Loading text animation */
          .loading-text {
              overflow: hidden;
              white-space: nowrap;
              border-right: 3px solid var(--accent-color);
              animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
              display: inline-block;
              width: 100%;
              max-width: 500px;
              margin: 0 auto;
          }
  
          @keyframes typing {
              from { width: 0 }
              to { width: 100% }
          }
  
          @keyframes blink-caret {
              from, to { border-color: transparent }
              50% { border-color: var(--accent-color) }
          }
  
          /* Token Stats special meme styling */
          .unicorn-card {
              background: linear-gradient(135deg, #ff9fd9 0%, #9c28b0 50%, #4158d0 100%);
              position: relative;
              border: 3px solid #ff00cc !important;
              overflow: visible !important;
              transform-style: preserve-3d;
              box-shadow: 0 5px 20px rgba(255, 0, 204, 0.4);
          }
  
          .unicorn-card::before {
              background: linear-gradient(90deg, #ff00cc, #3393ff) !important;
              height: 5px !important;
          }
  
          .unicorn-card::after {
              content: "🦄";
              position: absolute;
              font-size: 40px;
              top: -25px;
              right: -10px;
              filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
              transform: rotate(15deg);
              animation: float 3s ease-in-out infinite;
              z-index: 10;
          }
  
          .unicorn-card .project-title {
              color: white;
              text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
              font-weight: bold;
              font-size: 1.6rem;
          }
  
          .unicorn-card .project-description {
              color: white;
              text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
          }
  
          .unicorn-card .project-link {
              background: rgba(255, 255, 255, 0.2);
              border: 2px solid white;
              color: white;
              font-weight: bold;
              padding: 8px 20px;
              border-radius: 50px;
              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
              transition: all 0.3s;
          }
  
          .unicorn-card .project-link:hover {
              background: white;
              color: #ff00cc;
              transform: translateY(-3px) scale(1.05);
              box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
          }
  
          .status-badge {
              position: absolute;
              top: 10px;
              right: 10px;
              background: #00c853;
              color: white;
              font-size: 12px;
              padding: 3px 10px;
              border-radius: 20px;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              z-index: 5;
          }
  
          .glitter {
              position: absolute;
              width: 10px;
              height: 10px;
              background: white;
              border-radius: 50%;
              opacity: 0;
          }
  
          @keyframes float {
              0% { transform: translateY(0) rotate(15deg); }
              50% { transform: translateY(-15px) rotate(5deg); }
              100% { transform: translateY(0) rotate(15deg); }
          }
  
          @keyframes glitter {
              0% { opacity: 1; transform: scale(0); }
              50% { opacity: 0.5; transform: scale(1); }
              100% { opacity: 0; transform: scale(0); }
          }
      </style>
  </head>
  <body>
      <canvas class="matrix-bg" id="matrix"></canvas>
      <div class="container">
          <header>
              <h1>HTML-UTILS</h1>
              <div style="width: 100%; max-width: 500px; margin: 0 auto;">
                  <p class="subtitle loading-text">A collection of specialized web tools for developers</p>
              </div>
          </header>
  
          <div class="projects">
              <div class="project-card unicorn-card">
                  <span class="status-badge">Much Wow!</span>
                  <div class="project-header">
                      <h3 class="project-title">Token Stats</h3>
                      <span class="project-icon">💰</span>
                  </div>
                  <div class="project-description">
                      TO THE MOON! 🚀 Next-level crypto dashboard for tracking those sweet gainz across chains. Diamond hands only! 💎🙌
                  </div>
                  <div class="project-links">
                      <a href="token_stats/index.html" class="project-link">Launch Tool</a>
                  </div>
              </div>
  
              <div class="project-card">
                  <div class="project-header">
                      <h3 class="project-title">Bytes to Base64</h3>
                      <span class="project-icon">🔄</span>
                  </div>
                  <div class="project-description">
                      A suite of utilities for converting between byte arrays, Base64 encoding and various data formats.
                  </div>
                  <div class="project-links">
                      <a href="bytes_to_base64/byte_to_base64.html" class="project-link">Bytes to Base64</a>
                      <a href="bytes_to_base64/base64_to_bytes.html" class="project-link">Base64 to Bytes</a>
                      <a href="bytes_to_base64/show_dataurl.html" class="project-link">DataURL Viewer</a>
                      <a href="bytes_to_base64/decode_zip_base64.html" class="project-link">Decode ZIP</a>
                  </div>
              </div>
  
              <div class="project-card">
                  <div class="project-header">
                      <h3 class="project-title">Motif Search</h3>
                      <span class="project-icon">🧬</span>
                  </div>
                  <div class="project-description">
                      Advanced tool for searching sequence motifs, calculating probabilities and statistical significance. Perfect for bioinformatics and genetic sequence analysis.
                  </div>
                  <div class="project-links">
                      <a href="motif_search/motif_search.html" class="project-link">Launch Tool</a>
                  </div>
              </div>
  
              <div class="project-card">
                  <div class="project-header">
                      <h3 class="project-title">Generate Sequences</h3>
                      <span class="project-icon">🔧</span>
                  </div>
                  <div class="project-description">
                      Create custom sequences with specific motifs and patterns for testing or analysis purposes. Supports complementary sequence generation.
                  </div>
                  <div class="project-links">
                      <a href="generate_sequences/generate_sequences.html" class="project-link">Launch Tool</a>
                  </div>
              </div>
          </div>
  
          <footer>
              <p>HTML-UTILS &copy; <span id="year"></span> | Dockerized Developer Tools</p>
          </footer>
      </div>
  
      <script>
          // Set current year in the footer
          document.getElementById('year').textContent = new Date().getFullYear();
  
          // Matrix rain effect
          const canvas = document.getElementById('matrix');
          const ctx = canvas.getContext('2d');
  
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
  
          // Characters for the matrix effect
          const characters = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワ';
          const fontSize = 14;
          const columns = canvas.width / fontSize;
  
          // An array to store the current y position of each column
          const drops = [];
  
          // Initialize all columns
          for (let i = 0; i < columns; i++) {
              drops[i] = 1;
          }
  
          function draw() {
              // Set a semi-transparent black background to create trail effect
              ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
              ctx.fillRect(0, 0, canvas.width, canvas.height);
  
              // Set the color and font of falling characters
              ctx.fillStyle = '#0f0';
              ctx.font = fontSize + 'px monospace';
  
              // Loop through each column
              for (let i = 0; i < drops.length; i++) {
                  // Choose a random character
                  const text = characters.charAt(Math.floor(Math.random() * characters.length));
  
                  // Draw the character
                  ctx.fillText(text, i * fontSize, drops[i] * fontSize);
  
                  // Randomly reset the drop position to create randomness
                  if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                      drops[i] = 0;
                  }
  
                  // Move the drop down
                  drops[i]++;
              }
          }
  
          // Add glitter effect to unicorn card
          function addGlitter() {
              const card = document.querySelector('.unicorn-card');
              const cardRect = card.getBoundingClientRect();
  
              setInterval(() => {
                  const glitter = document.createElement('div');
                  glitter.classList.add('glitter');
  
                  // Random position within the card
                  const x = Math.random() * cardRect.width;
                  const y = Math.random() * cardRect.height;
  
                  glitter.style.left = x + 'px';
                  glitter.style.top = y + 'px';
  
                  card.appendChild(glitter);
  
                  // Animate and remove
                  glitter.style.animation = 'glitter 1.5s forwards';
                  setTimeout(() => {
                      glitter.remove();
                  }, 1500);
              }, 200);
          }
  
          // Run the animations
          setInterval(draw, 50);
          addGlitter();
  
          // Handle window resize
          window.addEventListener('resize', () => {
              canvas.width = window.innerWidth;
              canvas.height = window.innerHeight;
          });
      </script>
  </body>
  </html>
  
endpoints.html_title: HTML Utils - Dev Toolkit
endpoints.supported_versions: HTTP/1.1 HTTP/2
endpoints.banner: HTTP/1.1 200 OK
  Date:  <REDACTED>
  Content-Type: text/html
  Content-Length: 14574
  Connection: keep-alive
  Last-Modified: Wed, 23 Apr 2025 10:13:07 GMT
  ETag: "6808bd33-38ee"
  Accept-Ranges: bytes
  Strict-Transport-Security: max-age=31536000; includeSubDomains
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Credentials: true
  Access-Control-Allow-Methods: GET, PUT, POST, DELETE, PATCH, OPTIONS
  Access-Control-Allow-Headers: DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization
  Access-Control-Max-Age: 1728000
  
endpoints.ip: 164.90.242.18
[binary data, 4 values, 119 bytes]