ema-0.8.0.0: www/ema-indicator.html

<!-- 
The inline CSS here is roughly analogous to the ones generated by Tailwind.
See the original version based on Tailwind`: https://gist.github.com/srid/2471813953a6df9b24909b9bb1d3cd2b
-->

<div style="
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0.5rem;
  font-size: 12px;
  line-height: 18px;
  tab-size: 4;
  text-size-adjust: 100%;
" id="ema-indicator">
  <div style="
    display: flex;
    overflow: hidden;
    font-size: 0.75rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    height: 2rem;
    width: 2rem;
    box-sizing: border-box;
    border-style: solid;
    border-width: 2px;
    border-color: rgb(229 231 235);
    background-color: rgb(255 255 255);
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transition-property: width, height;
    transition-duration: 500ms;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  " onMouseOver="this.style.width='100%'" onMouseOut="this.style.width='2rem'" id="ema-status" title="Ema Status">
    <div hidden style="
      flex: none;
      width: 0.75rem;
      height: 0.75rem;
      background-color: rgb(22 163 74);
      border-radius: 9999px;
    " id="ema-connected"></div>
    <div hidden style="
      flex: none;
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 9999px;
        animation: spin 1s linear infinite;
      background-image: linear-gradient(to right, var(--tw-gradient-stops));
      --tw-gradient-from: #93c5fd;
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
      --tw-gradient-to: #2563eb;
    " id="ema-reloading">
      <style>
        @keyframes spin {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }
      </style>
    </div>
    <div hidden style="
      flex: none;
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 9999px;
        background-color: rgb(234 179 8);
    " id="ema-connecting">
      <div style="
        flex: none;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 9999px;
        background-color: rgb(234 179 8);
        animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
      ">
        <style>
          @keyframes ping {

            75%,
            100% {
              transform: scale(2);
              opacity: 0;
            }
          }
        </style>
      </div>
    </div>
    <div hidden style="
      flex: none;
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 9999px;
      background-color: rgb(239 68 68);
    " id="ema-disconnected"></div>
    <p style="white-space: nowrap;" id="ema-message"></p>
  </div>
</div>