www/live-indicator.html

   1 <!--
   2 The inline CSS here is roughly analogous to the ones generated by Tailwind.
   3 See the original version based on Tailwind`: https://gist.github.com/srid/2471813953a6df9b24909b9bb1d3cd2b
   4 -->
   5
   6 <div style="
   7   display: none;
   8   position: absolute;
   9   top: 0px;
  10   left: 0px;
  11   padding: 0.5rem;
  12   font-size: 12px;
  13   line-height: 18px;
  14   tab-size: 4;
  15   text-size-adjust: 100%;
  16 " id="live-indicator">
  17   <div style="
  18     display: flex;
  19     overflow: hidden;
  20     font-size: 0.75rem;
  21     align-items: center;
  22     gap: 0.5rem;
  23     padding: 0.5rem;
  24     height: 2rem;
  25     width: 2rem;
  26     box-sizing: border-box;
  27     border-style: solid;
  28     border-width: 2px;
  29     border-color: rgb(229 231 235);
  30     background-color: rgb(255 255 255);
  31     border-radius: 9999px;
  32     box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  33     transition-property: width, height;
  34     transition-duration: 500ms;
  35       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  36   " onMouseOver="this.style.width='100%'" onMouseOut="this.style.width='2rem'" id="live-status" title="Live Status">
  37     <div hidden style="
  38       flex: none;
  39       width: 0.75rem;
  40       height: 0.75rem;
  41       background-color: rgb(22 163 74);
  42       border-radius: 9999px;
  43     " id="live-connected"></div>
  44     <div hidden style="
  45       flex: none;
  46       width: 0.75rem;
  47       height: 0.75rem;
  48       border-radius: 9999px;
  49         animation: spin 1s linear infinite;
  50       background-image: linear-gradient(to right, var(--tw-gradient-stops));
  51       --tw-gradient-from: #93c5fd;
  52       --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  53       --tw-gradient-to: #2563eb;
  54     " id="live-reloading">
  55       <style>
  56         @keyframes spin {
  57           from {
  58             transform: rotate(0deg);
  59           }
  60
  61           to {
  62             transform: rotate(360deg);
  63           }
  64         }
  65       </style>
  66     </div>
  67     <div hidden style="
  68       flex: none;
  69       width: 0.75rem;
  70       height: 0.75rem;
  71       border-radius: 9999px;
  72         background-color: rgb(234 179 8);
  73     " id="live-connecting">
  74       <div style="
  75         flex: none;
  76         width: 0.75rem;
  77         height: 0.75rem;
  78         border-radius: 9999px;
  79         background-color: rgb(234 179 8);
  80         animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  81       ">
  82         <style>
  83           @keyframes ping {
  84
  85             75%,
  86             100% {
  87               transform: scale(2);
  88               opacity: 0;
  89             }
  90           }
  91         </style>
  92       </div>
  93     </div>
  94     <div hidden style="
  95       flex: none;
  96       width: 0.75rem;
  97       height: 0.75rem;
  98       border-radius: 9999px;
  99       background-color: rgb(239 68 68);
 100     " id="live-disconnected"></div>
 101     <p style="white-space: nowrap;" id="live-message"></p>
 102   </div>
 103 </div>