index.html

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

<head prefix="og: https://ogp.me/ns# 
https://ogp.me/ns/website#">
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="canonical" href="https://myrio.now.sh/" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Myrio Text</title>

  <!-- CSP -->
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self' data: blob:; object-src 'none'; frame-src 'none'; manifest-src 'self'">

  <!-- icons -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="favicon.png">

  <!-- SEO basic meta tags -->
  <meta name="title" content="Myrio Text">
  <meta name="description"
    content="Myrio Text lets you encode your text in the form of an image, and decode it back to text. It's a fun way to share secret messages with your friends.">
  <meta name="keywords"
    content="myrio text, text to image, image to text, encode text, decode text, secret messages, arnav, arnav-kr, arnav-kr.github.io, myrio.now.sh, myrio.vercel.app, encrypt decrypt, secret">
  <meta name="robots" content="index, follow">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://myrio.now.sh/">
  <meta property="og:title" content="Myrio Text">
  <meta property="og:description"
    content="Myrio Text lets you encode your text in the form of an image, and decode it back to text. It's a fun way to share secret messages with your friends.">
  <meta property="og:image" content="https://myrio.now.sh/assets/og_banner.png">
  <meta property="og:image:secure_url" content="https://myrio.now.sh/assets/og_banner.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Myrio Text" />

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://myrio.now.sh/">
  <meta property="twitter:title" content="Myrio Text">
  <meta property="twitter:description"
    content="Myrio Text lets you encode your text in the form of an image, and decode it back to text. It's a fun way to share secret messages with your friends.">
  <meta property="twitter:image" content="https://myrio.now.sh/assets/og_image.png">

  <!-- Structured JSON Data -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "url": "https://myrio.now.sh/",
      "name": "Myrio Text",
      "alternateName": "Myrio Text",
      "description": "Myrio Text lets you encode your text in the form of an image, and decode it back to text. It's a fun way to share secret messages with your friends.",
      "keywords": "myrio text, text to image, image to text, encode text, decode text, secret messages, arnav, arnav-kr, arnav-kr.github.io, myrio.now.sh, myrio.vercel.app, encrypt decrypt, secret",
      "image": {
        "@type": "ImageObject",
        "url": "https://myrio.now.sh/assets/og_banner.png",
        "representativeOfPage": true,
        "embeddedTextCaption": "Myrio Text"
      },
      "applicationCategory": [
        "UtilityApplication",
        "BrowserApplication"
      ],
      "sameAs": [
        "https://myrio.now.sh/",
        "https://myrio.vercel.app/"
      ],
      "author": {
        "@type": "Person",
        "name": "Arnav Kumar",
        "alternateName": "Arnav",
        "image": {
          "@type": "ImageObject",
          "url": "https://avatars.githubusercontent.com/u/72879799?v=4",
          "width": 371,
          "height": 371
        },
        "url": "https://github.com/arnav-kr/",
        "sameAs": [
          "https://github.com/arnav-kr",
          "https://www.linkedin.com/in/arnav-kr/",
          "https://twitter.com/arnavkr_",
          "https://x.com/arnav-kr/",
          "https://www.reddit.com/u/arnav-kr/",
          "https://www.instagram.com/its.arnavkr/",
          "https://www.facebook.com/its.arnavkr/",
          "https://www.youtube.com/@ArnavOfficial"
        ]
      },
      "publisher": {
        "@type": "Organization",
        "name": "Myrio Text",
        "url": "https://myrio.now.sh/",
        "logo": {
          "@type": "ImageObject",
          "url": "https://myrio.now.sh/assets/logo.png",
          "width": 1024,
          "height": 1024
        },
        "sameAs": [
          "https://myrio.now.sh/",
          "https://myrio.vercel.app/"
        ]
      }
    }
  </script>
  <!-- web manifest -->
  <link rel="manifest" href="manifest.webmanifest">
</head>

<body
  class="group/body tab-encode flex flex-col min-h-screen dark:bg-zinc-900 dark:text-zinc-50 bg-zinc-50 text-zinc-900 zinc-50">
  <header
    class="select-none w-full flex justify-between items-center gap-2 xs:p-4 scale-90 sm:scale-100 p-2 sm:p-8 pb-6 lg:pb-0 xxl:justify-around">
    <img src="favicon.svg" alt="Myrio Text Logo" title="Myrio Text" class="w-14 h-14">
    <nav
      class="relative rounded-[6px] shadow-sm dark:shadow-lg dark:bg-zinc-900 dark:text-zinc-50 text-zinc-900 ring-1 ring-zinc-200 dark:ring-zinc-700 font-semibold flex gap-3 p-1.5">
      <label tabindex="0"
        class="cursor-pointer rounded-[4px] py-2 pl-3 block has-[:checked]:bg-zinc-100 has-[:checked]:ring-1 has-[:checked]:ring-zinc-200 dark:has-[:checked]:ring-zinc-600 dark:has-[:checked]:bg-zinc-700 has-[:checked]:pr-3">
        <input type="radio" name="mode" value="encode" class="mode hidden" id="encode-checkbox" checked>
        <span>Encode</span>
      </label>
      <label tabindex="0"
        class="cursor-pointer rounded-[4px] py-2 pr-3 block has-[:checked]:bg-zinc-100 has-[:checked]:ring-1 has-[:checked]:ring-zinc-200 dark:has-[:checked]:ring-zinc-600 dark:has-[:checked]:bg-zinc-700 has-[:checked]:pl-3">
        <input type="radio" name="mode" value="decode" class="mode hidden" id="decode-checkbox">
        <span>Decode</span>
      </label>
    </nav>
    <div class="flex gap-2 items-center justify-center">
      <button class="floating-button aspect-square h-12 w-12" title="Toggle Theme" id="theme-toggle">
        <!-- sun -->
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="w-6 stroke-zic-900 dark:stroke-zinc-50 hidden dark:block">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
        </svg>
        <!-- moon -->
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="w-6 stroke-zinc-900 dark:stroke-zinc-50 dark:hidden">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
        </svg>
      </button>
      <a href="https://github.com/arnav-kr/MyrioText" target="_blank" rel="noopener noreferrer"
        title="Myrio Text GitHub Repo"
        class="flex p-3 rounded-md shadow-sm ring-1 bg-zinc-50 dark:bg-zinc-900 dark:hover:bg-zinc-800 hover:bg-zinc-100 transition duration-150 ring-zinc-200 dark:ring-zinc-800">
        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
          class="w-7 h-7 fill-zinc-900 dark:fill-zinc-50">
          <title>Myrio Text GitHub Repo</title>
          <path
            d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
        </svg></a>
    </div>
  </header>
  <main
    class="flex flex-grow flex-col items-center lg:flex-row lg:justify-evenly w-full py-2 px-6 min-h-[calc(100% - 128px)]">
    <!-- output section -->
    <section class="flex flex-col sm:flex-row gap-2 p-4 sm:justify-center items-center sm:items-start">
      <!-- output canvas -->
      <div
        class="aspect-square p-1.5 w-full h-full flex justify-center items-center max-w-xs min-w-56 min-h-56 sm:min-w-64 sm:min-h-64 bg-zinc-50 dark:bg-zinc-800 rounded-lg shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-700 overflow-auto"
        role="presentation" aria-roledescription="Encoded Image Preview">
        <canvas class="max-w-full" id="render" width="16" height="16">
          <span class="inline-block m-2">Huh, Your Browser Doesn't Support Canvas? 🤨</span>
        </canvas>
      </div>

      <!-- output actions -->
      <div class="output-actions flex-row sm:flex-col gap-2 pb-2 flex">
        <!-- download -->
        <button id="download-button" class="floating-button" title="Download Image">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path
              d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z" />
            <path
              d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z" />
          </svg>
          <span class="font-semibold text-base text-zinc-50 hidden">Download</span>
        </button>
        <!-- copy -->
        <button id="copy-button" type="button" class="floating-button" title="Copy Image">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path
              d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" />
            <path
              d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" />
          </svg>
          <span class="font-semibold text-base text-zinc-50 hidden">Copy</span>
        </button>
        <!-- share -->
        <button id="share-button" type="button" class="floating-button" title="Share Image">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path
              d="M13 4.5a2.5 2.5 0 1 1 .702 1.737L6.97 9.604a2.518 2.518 0 0 1 0 .792l6.733 3.367a2.5 2.5 0 1 1-.671 1.341l-6.733-3.367a2.5 2.5 0 1 1 0-3.475l6.733-3.366A2.52 2.52 0 0 1 13 4.5Z" />
          </svg>
          <span class="font-semibold text-base text-zinc-50 hidden">Share</span>
        </button>
      </div>
    </section>
    <!-- control section -->
    <section class="w-full max-w-md p-4">
      <!-- encode section -->
      <section id="encode-section" class="hidden group-[.tab-encode]/body:block">
        <form id="encode-form">
          <!-- input text -->
          <label for="text-input" class="label select-none">Enter Your Text to Encode:</label>
          <textarea id="text-input" name="text-input" class="resize input" rows="6" required></textarea>

          <!-- unit size -->
          <label for="unit-size" class="label select-none">Unit Size:</label>
          <input type="number" id="unit-size" name="unit-size" class="input" value="10" min="1" max="255" step="1"
            spellcheck="false" autocomplete="off" required>

          <!-- disable color channels, they are not reliable :( -->
          <!-- color channels
          <label for="color-channels" class="label">Color Channels:</label>
          <fieldset id="color-channels" class="flex gap-2 mb-2">
            <label for="red"
              class="cursor-pointer badge has-[:checked]:bg-red-600 dark:has-[:checked]:bg-red-600 ring-red-500 dark:ring-red-500">
              <input type="checkbox" id="red" name="red-channel" value="red" class="color-channel peer sr-only" />
              <span class="text-red-500 peer-checked:text-zinc-50">Red</span>
            </label>
            <label for="green"
              class="cursor-pointer badge has-[:checked]:bg-green-600 dark:has-[:checked]:bg-green-600 ring-green-500 dark:ring-green-500">
              <input type="checkbox" id="green" name="green-channel" value="green" class="color-channel peer sr-only" />
              <span class="text-green-500 peer-checked:text-zinc-50">Green</span>
            </label>
            <label for="blue"
              class="cursor-pointer badge has-[:checked]:bg-blue-600 dark:has-[:checked]:bg-blue-600 ring-blue-500 dark:ring-blue-500">
              <input type="checkbox" id="blue" name="blue-channel" value="blue" class="color-channel peer sr-only" />
              <span class="text-blue-500 peer-checked:text-zinc-50">Blue</span>
            </label>
            <label for="alpha"
              class="cursor-not-allowed badge has-[:checked]:bg-zinc-200 dark:has-[:checked]:bg-zinc-700 ring-zinc-300 dark:ring-zinc-600">
              <input type="checkbox" id="alpha" name="alpha-channel" value="alpha" class="color-channel peer sr-only" checked
                 />
              <span class="peer-checked:text-zinc-700 dark:peer-checked:text-zinc-200">Alpha</span>
            </label>
          </fieldset> -->

          <div class="flex flex-col ms:flex-row gap-4 py-2 peer">
            <!-- live convert -->
            <label for="live-convert" class="flex items-center cursor-pointer select-none">
              <div
                class="relative focus-within:ring-2 focus-within:ring-offset-2 ring-white ring-offset-black rounded-full">
                <input type="checkbox" id="live-convert" name="live-convert" class="peer sr-only" checked />
                <div class="block h-5 rounded-full dark:bg-zinc-800 bg-zinc-300 peer-checked:bg-sky-700 w-8">
                </div>
                <div
                  class="absolute w-3 h-3 transition bg-white rounded-full dot dark:bg-zinc-500 left-1 top-1 peer-checked:translate-x-full peer-checked:bg-white">
                </div>
              </div>
              <span class="label inline-block align-middle mb-0.5 ml-2">Live Convert</span>
            </label>

            <!-- use encryption -->
            <label for="use-encryption" class="flex items-center cursor-pointer select-none peer/use-encryption">
              <div
                class="relative focus-within:ring-2 focus-within:ring-offset-2 ring-white ring-offset-black rounded-full">
                <input type="checkbox" id="use-encryption" name="use-encryption"
                  class="use-encryption-checkbox peer sr-only" />
                <div class="block h-5 rounded-full dark:bg-zinc-800 bg-zinc-300 peer-checked:bg-sky-700 w-8">
                </div>
                <div
                  class="absolute w-3 h-3 transition bg-white rounded-full dot dark:bg-zinc-500 left-1 top-1 peer-checked:translate-x-full peer-checked:bg-white">
                </div>
              </div>
              <span class="label inline-block align-middle mb-0.5 ml-2">Use Encryption</span>
            </label>
          </div>
          <!-- <input type="checkbox" id="use-encryption"
            class="peer align-middle accent-sky-700 dark:accent-sky-600 w-4 h-4 rounded-sm text-zinc-600 dark:ring-zinc-700">
          <label for="use-encryption" class="label inline-block align-middle mb-0.5">Use Encryption</label> -->

          <!-- encryption key input -->
          <div class="hidden peer-checked:block mt-2 peer-has-[.use-encryption-checkbox:checked]:block">
            <label for="key" class="label select-none">Encryption Key:</label>
            <input type="text" id="key" name="key" class="input" spellcheck="false" autocomplete="off" />
          </div>

          <!-- encode button -->
          <button id="encode-button" type="submit" class="mt-3 button" disabled>
            <span class="font-semibold text-base text-zinc-50">Encode</span>
          </button>

          <!-- <div class="w-full text-sm font-semibold text-center my-2">OR</div>
          <label for="image-file"
            class="w-full bg-sky-700 py-3 px-4 flex items-center justify-center gap-2 rounded-md shadow-sm">
            <span class="w-6 h-6 mr-2">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="fill-zinc-50 w-6 h-6">
                <path
                  d="M440-367v127q0 17 11.5 28.5T480-200q17 0 28.5-11.5T520-240v-127l36 36q6 6 13.5 9t15 2.5q7.5-.5 14.5-3.5t13-9q11-12 11.5-28T612-388L508-492q-6-6-13-8.5t-15-2.5q-8 0-15 2.5t-13 8.5L348-388q-12 12-11.5 28t12.5 28q12 11 28 11.5t28-11.5l35-35ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T720-80H240Zm280-560v-160H240v640h480v-440H560q-17 0-28.5-11.5T520-640ZM240-800v200-200 640-640Z" />
              </svg>
            </span>
            <span class="font-semibold text-base text-zinc-50">Upload Image</span>
            <input type="file" name="image-file" id="image-file" class="hidden">
          </label> -->
        </form>
      </section>
      <!-- decode section -->
      <section id="decode-section" class="hidden group-[.tab-decode]/body:block">
        <form id="decode-form">
          <!-- decoded text -->
          <div class="relative">
            <textarea id="output-text" name="output-text" tabindex="-1"
              class="resize input mb-6 focus:ring-1 focus:ring-zinc-300 dark:focus:ring-zinc-700" rows="6"
              placeholder="Decoded text will show up here" readonly></textarea>
            <button id="copy-text-button" type="button"
              class="absolute right-0 top-0 p-3 border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-none rounded-bl-md rounded-tr-md dark:hover:bg-opacity-65 opacity-75 bg-zinc-50 transition duration-100  dark:bg-zinc-800 ease-[ease]">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 copy-icon">
                <path
                  d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" />
                <path
                  d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" />
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                class="size-5 check-icon hidden">
                <path fill-rule="evenodd"
                  d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
                  clip-rule="evenodd" />
              </svg>
            </button>
          </div>
          <!-- input image -->
          <label for="image-file"
            class="w-full cursor-pointer select-none p-3 flex items-center gap-3 rounded-lg shadow-sm ring-1 ring-zinc-200 dark:ring-zinc-800 hover:bg-zinc-200 hover:bg-opacity-20 dark:hover:bg-zinc-800 dark:hover:bg-opacity-35 transition duration-200 ease-[ease] focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-white dark:focus-within:ring-white focus-within:ring-offset-black">
            <div
              class="flex items-center justify-center aspect-square h-16 rounded-md bg-zinc-300 dark:bg-zinc-800 bg-opacity-55 dark:bg-opacity-65">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                class="size-9 opacity-50 dark:opacity-70">
                <path fill-rule="evenodd"
                  d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z"
                  clip-rule="evenodd" />
              </svg>
            </div>
            <div class="text-zinc-800 dark:text-zinc-100">
              <span class="text-base font-semibold">
                <span id="file-count" class="peer"></span>
                <span class="peer-empty:inline hidden">Upload Image</span>
                <br>
                <span class="text-sm">
                  <span id="file-name" class="peer overflow-truncate"></span>
                  <span class="peer-empty:inline hidden">Drop, Paste, or Click to Upload an Image</span>
                </span>
            </div>
            <input type="file" name="image-file" id="image-file" class="sr-only" accept="image/png" required>
          </label>
          <!-- decryption key -->
          <div class="hidden mt-2">
            <label for="decryption-key" class="label select-none">Decryption Key:</label>
            <input type="text" id="decryption-key" name="decryption-key" class="input" spellcheck="false"
              autocomplete="off" />
          </div>

          <button id="decode-button" type="submit" class="mt-3 button" disabled>
            <span class="font-semibold text-base text-zinc-50">Decode</span>
          </button>
        </form>
      </section>
    </section>
  </main>
  <aside class="fixed bottom-0 right-0 h-auto w-full sm:w-auto p-4 pb-6 flex flex-col gap-5 items-center sm:items-start"
    id="toasts">
    <!-- <div class="toast show">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 transition-none">
        <path fill-rule="evenodd"
          d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
          clip-rule="evenodd" />
      </svg>
      <span>A default one</span> -->
  </aside>
  <aside id="drag-popup"
    class="fixed p-5 inset-0 top-0 left-0 grid place-items-center bg-zinc-100 dark:bg-zinc-800 hidden">
    <div
      class="w-full h-full box-border border-dashed border-4 border-zinc-500 dark:border-zinc-400 grid place-items-center text-lg font-bold">
      Drop Image Here
    </div>
  </aside>
  <aside class="fixed bottom-4 right-4 ">
    <button type="button" id="install-button" title="Install App"
      class="button group flex hidden items-center justify-center align-middle gap-2 w-auto py-3 hover:w-33 hover:h-12">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="size-5 fill-white hidden lg:block">
        <path
          d="M320-160v-40H160q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h280q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H160v480h640v-80q0-17 11.5-28.5T840-400q17 0 28.5 11.5T880-360v80q0 33-23.5 56.5T800-200H640v40q0 17-11.5 28.5T600-120H360q-17 0-28.5-11.5T320-160Zm320-393v-247q0-17 11.5-28.5T680-840q17 0 28.5 11.5T720-800v247l76-75q11-11 27.5-11.5T852-628q11 11 11 28t-11 28L708-428q-12 12-28 12t-28-12L508-572q-11-11-11.5-27.5T508-628q11-11 28-11t28 11l76 75Z" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="size-5 fill-white block lg:hidden">
        <path
          d="M280-40q-33 0-56.5-23.5T200-120v-720q0-33 23.5-56.5T280-920h240q17 0 28.5 11.5T560-880q0 17-11.5 28.5T520-840H280v40h240q17 0 28.5 11.5T560-760q0 17-11.5 28.5T520-720H280v480h400v-40q0-17 11.5-28.5T720-320q17 0 28.5 11.5T760-280v160q0 33-23.5 56.5T680-40H280Zm0-120v40h400v-40H280Zm400-392v-248q0-17 11.5-28.5T720-840q17 0 28.5 11.5T760-800v248l76-76q11-11 28-11t28 11q11 11 11 28t-11 28L748-428q-12 12-28 12t-28-12L548-572q-11-11-11-28t11-28q11-11 28-11t28 11l76 76ZM280-800v-40 40Zm0 640v40-40Z" />
      </svg>
      <span class="group-hover:block hidden">Install App</span>
    </button>
  </aside>
  <footer>
    <hr class="my-3 mx-8 bg-transparent border-zinc-200 dark:border-zinc-700">
    <p class="text-center pb-4">Made with ❤️ by <a href="https://github.com/arnav-kr" target="_blank"
        rel="noopener noreferrer" class="font-semibold text-sky-700 dark:text-sky-300 hover:underline">Arnav Kumar</a>
    </p>
  </footer>
  <script src="/src/main.js" type="module"></script>
</body>

</html>