Packages

exshome

0.1.3
0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

DIY Elixir-based smart home.

HexDocs

Current section

Files

Jump to
Readme
8 Versions
18 Dependencies
0 Dependants
Files
Activity
exshome lib exshome_player web templates index.html.heex
Raw

lib/exshome_player/web/templates/index.html.heex 

<section class="flex min-h-full items-center justify-center flex-col">

  <form class="flex h-full items-center justify-center flex-col w-full md:w-3/4 lg:w-1/2 p-10">

    <marquee class="m-2 text-4xl font-bold w-full">

      <%= @deps.title %>

    </marquee>

    <div>

      <%= for button <- ["previous_track", (if @deps.pause, do: "play", else: "pause"), "next_track"] do %>

        <button

          phx-click={button}

          type="button"

          class="text-sm sm:text-xl sm:m-4 min-h-[5em] min-w-[5em] rounded-lg bg-gray-300 hover:bg-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 shadow-md dark:shadow-gray-600 relative border-2 border-blue-300 text-orange-600"

        >

          <div class={"icon mt-[-35%] #{button}"}>

            <i />

          </div>

        </button>

      <% end %>

    </div>

    <input

      class="w-full rounded-full mt-2 bg-blue-300 text-blue-600 text-lg h-[0.7em] shadow-xl dark:shadow-gray-600"

      name="position"

      type="range"

      min="0"

      max={@deps.duration}

      value={@deps.position}

      phx-change="set_position"

    />

    <div class="w-full mt-7 text-xl flex items-center justify-center">

      <span class="mb-1">&#128264;</span>

      <input

        class="w-3/4 rounded-full bg-orange-300 text-orange-600 mx-2 h-[1em] shadow-lg dark:shadow-gray-800"

        name="volume"

        type="range"

        min="0"

        max="100"

        value={@deps.volume}

        phx-change="set_volume"

      />

      <span class="mb-1">&#128266;</span>

    </div>

  </form>

</section>