Claper/lib/claper_web/live/event_live/join.html.heex

<style>
  body {
    background: linear-gradient(-45deg, #2C033A, #21033A, #053138,  #053138);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
  }
</style>

<div class="lg:overflow-hidden">
  <div
    x-data="{open: false}"
    id="menu"
    class="w-full h-24 py-4 text-right md:px-5 relative z-20"
    phx-update="ignore"
  >
    <div
      x-show="open"
      x-transition
      class="absolute h-24 bg-white w-full top-0 md:hidden px-5 py-3 flex flex-col items-center justify-center space-y-2"
      @click.away="open = false"
    >
      <a href="https://get.claper.co/" class="text-sm font-semibold text-black">
        {gettext("About")}
      </a>
      <%= if @current_user do %>
        <.link
          href={~p"/events"}
          class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
        >
          {gettext("Dashboard")}
        </.link>
      <% else %>
        <.link
          href={~p"/users/log_in"}
          class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
        >
          {gettext("Login")}
        </.link>
      <% end %>
    </div>
    <button @click="open = true" class="md:hidden">
      <img src="/images/icons/menu-outline.svg" class="h-9" />
    </button>
    <div class="hidden md:block">
      <a href="https://get.claper.co/" class="text-sm text-white font-semibold mr-3">
        {gettext("About")}
      </a>
      <%= if @current_user do %>
        <.link
          href={~p"/events"}
          class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
        >
          {gettext("Dashboard")}
        </.link>
      <% else %>
        <.link
          href={~p"/users/log_in"}
          class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
        >
          {gettext("Login")}
        </.link>
      <% end %>
    </div>
  </div>

  <div class="px-5 lg:w-1/3 lg:mx-auto">
    <div class="mt-10 ">
      <img src="/images/logo.svg" class="h-12 mx-auto mb-16" />
    </div>

    <%= form_for :event, ~p"/join", ["phx-submit": "join", "phx-hook": "JoinEvent", id: "form"], fn f -> %>
      <div class="relative">
        {text_input(f, :code,
          required: true,
          autofocus: true,
          id: "input",
          class:
            "transition-all bg-transparent tracking-widest w-full uppercase text-white text-2xl px-3 border-b border-gray-200 focus:border-b-2 pt-5 pl-12 pb-3 outline-hidden"
        )}
        <img
          class="icon absolute top-5 left-2 transition-all duration-100"
          src="/images/icons/hashtag-white.svg"
          alt="code"
        />
      </div>

      <div class="mt-10">
        <button
          type="submit"
          id="submit"
          class="w-full flex justify-center text-white p-4 rounded-full tracking-wide font-bold outline-hidden focus:shadow-outline shadow-lg bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
        >
          {gettext("Join")}
        </button>
        <img src="/images/loading.gif" id="loading" class="hidden h-12 mx-auto" />
      </div>

      <%= if @last_event do %>
        <.link href={~p"/e/#{@last_event.code}"}>
          <div class="rounded-md bg-gray-600/50 p-4 mt-8">
            <div class="flex justify-center items-center">
              <p class="text-sm text-white">
                {gettext("Return to your last event")} ({@last_event.name})
              </p>
              <p class="text-base ml-3 mt-1">
                <a href="#" class="whitespace-nowrap font-medium text-white">
                  <span aria-hidden="true">&rarr;</span>
                </a>
              </p>
            </div>
          </div>
        </.link>
      <% end %>
    <% end %>
  </div>
</div>