toreyheinz / PiDayGame

<div class="min-h-screen bg-gradient-to-b from-indigo-950 via-purple-950 to-black flex flex-col items-center justify-center px-4 py-8">
  <Layouts.flash_group flash={@flash} />

  <!-- Pi Symbol Animation -->
  <div class="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 mb-2 animate-pulse">
    &pi;
  </div>

  <h1 class="text-4xl md:text-5xl font-bold text-white mb-2 text-center">
    Pi Station
  </h1>
  <p class="text-purple-300 text-lg mb-8 text-center">
    Pi Day Party &middot; March 14, 2026
  </p>

  <!-- Join Form -->
  <div class="bg-white/10 backdrop-blur-md rounded-2xl p-6 w-full max-w-md border border-white/20">
    <form action="/join" method="post" class="space-y-6">
      <input type="hidden" name="_csrf_token" value={get_csrf_token()} />

      <div>
        <label class="block text-purple-200 text-sm font-medium mb-2">Your Name</label>
        <input
          type="text"
          name="player[name]"
          placeholder="Enter your name..."
          maxlength="20"
          required
          class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-xl text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent text-lg"
          autofocus
        />
      </div>

      <div>
        <label class="block text-purple-200 text-sm font-medium mb-3">Choose Your Avatar</label>
        <div class="grid grid-cols-5 gap-3">
          <%= for {avatar, index} <- Enum.with_index(@avatars) do %>
            <label class="cursor-pointer">
              <input
                type="radio"
                name="player[avatar_key]"
                value={avatar}
                class="hidden peer"
                {if index == 0, do: [checked: true], else: []}
              />
              <div class="w-full aspect-square rounded-xl bg-white/10 border-2 border-transparent peer-checked:border-cyan-400 peer-checked:bg-cyan-400/20 hover:bg-white/20 flex items-center justify-center text-2xl transition-all">
                <%= avatar_symbol(avatar) %>
              </div>
              <div class="text-center text-xs text-purple-300 mt-1 truncate"><%= avatar %></div>
            </label>
          <% end %>
        </div>
      </div>

      <button
        type="submit"
        class="w-full py-4 bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-400 hover:to-purple-400 text-white font-bold text-lg rounded-xl transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-purple-500/25"
      >
        Join the Party!
      </button>
    </form>
  </div>

  <p class="text-purple-400/60 text-sm mt-6">
    3.14159265358979323846...
  </p>
</div>