recorder.html

gistfile1.txt

<div class="w-full">
  <div class="flex flex-col items-center justify-center space-y-2">
    <div
      class="flex bg-purp-100 rounded-full items-center justify-center p-4"
    >
      <div
        class="cursor-pointer h-8 w-8 bg-red-600 rounded-full hover:bg-red-500"
        data-action="click->widgets--recorder#start"
        data-target="widgets--recorder.recordButton"
        id="start"
      ></div>
      <div
        class="cursor-pointer hidden h-6 w-6 bg-red-600 hover:bg-red-500"
        data-action="click->widgets--recorder#stop"
        data-target="widgets--recorder.recordButton"
      ></div>
    </div>
    <span
      class="text-sm text-gray-600 tracking-wide font-medium"
      data-target="widgets--recorder.status"
      >Press to record...</span
    >
    <span
      class="hidden text-sm text-gray-600 tracking-wide font-medium"
      data-target="widgets--recorder.status"
      >Press to stop...</span
    >
  </div>
  <div class="flex border-t border-gray-100 my-4"></div>
  <div class="flex w-full items-center">
    <div class="pr-4 text-gray-600">

    </div>
    <div class="bg-gray-300 w-full h-2 rounded-full overflow-x-hidden">
      <div
        class="bg-gray-500 block h-2"
        style="width: 0%"
        data-target="widgets--recorder.micInput"
      ></div>
    </div>
  </div>
</div>