From fe5ae576a08cfaabdca6e00b91c0089bb5af482f Mon Sep 17 00:00:00 2001
From: Alex Lion <dev@alexandrelion.com>
Date: Mon, 2 Feb 2026 20:00:59 +0100
Subject: [PATCH] Revamp event join page with gradient background, floating
 shapes, and enhanced UI elements for improved user experience

---
 lib/claper_web/live/event_live/join.html.heex | 299 +++++++++++++-----
 1 file changed, 219 insertions(+), 80 deletions(-)

diff --git a/lib/claper_web/live/event_live/join.html.heex b/lib/claper_web/live/event_live/join.html.heex
index 773b841..336078e 100644
--- a/lib/claper_web/live/event_live/join.html.heex
+++ b/lib/claper_web/live/event_live/join.html.heex
@@ -1,99 +1,238 @@
 <style>
   body {
-    background: #140553;
-    height: 100vh;
+    background: linear-gradient(135deg, #140553 0%, #1a0a5c 25%, #2d1278 50%, #140553 75%, #0d0335 100%);
+    background-size: 400% 400%;
+    animation: gradientShift 15s ease infinite;
+    min-height: 100vh;
+  }
+
+  @keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+  }
+
+  .join-card {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .code-input {
+    background: rgba(255, 255, 255, 0.08);
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    transition: all 0.3s ease;
+  }
+
+  .code-input:focus {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(134, 17, 237, 0.8);
+    box-shadow: 0 0 20px rgba(134, 17, 237, 0.3);
+  }
+
+  .floating-shapes {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  .shape {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.1;
+    animation: float 20s infinite ease-in-out;
+  }
+
+  .shape-1 {
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(135deg, #06b6d4, #8611ed);
+    top: -100px;
+    right: -100px;
+    animation-delay: 0s;
+  }
+
+  .shape-2 {
+    width: 200px;
+    height: 200px;
+    background: linear-gradient(135deg, #8611ed, #06b6d4);
+    bottom: 10%;
+    left: -50px;
+    animation-delay: -5s;
+  }
+
+  .shape-3 {
+    width: 150px;
+    height: 150px;
+    background: linear-gradient(135deg, #06b6d4, #8611ed);
+    top: 40%;
+    right: 5%;
+    animation-delay: -10s;
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translate(0, 0) rotate(0deg); }
+    25% { transform: translate(10px, -20px) rotate(5deg); }
+    50% { transform: translate(-5px, 10px) rotate(-5deg); }
+    75% { transform: translate(-15px, -10px) rotate(3deg); }
   }
 </style>
 
-<div class="lg:overflow-hidden">
+<div class="min-h-screen relative overflow-hidden">
+  <!-- Floating background shapes -->
+  <div class="floating-shapes">
+    <div class="shape shape-1"></div>
+    <div class="shape shape-2"></div>
+    <div class="shape shape-3"></div>
+  </div>
+
+  <!-- Navigation -->
   <div
     x-data="{open: false}"
     id="menu"
-    class="w-full h-24 py-4 text-right md:px-5 relative z-20"
+    class="w-full py-4 px-5 md:px-8 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="btn btn-primary">
-          {gettext("Dashboard")}
-        </.link>
-      <% else %>
-        <.link href={~p"/users/log_in"} class="btn btn-primary">
-          {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="btn btn-primary">
-          {gettext("Dashboard")}
-        </.link>
-      <% else %>
-        <.link href={~p"/users/log_in"} class="btn btn-primary">
-          {gettext("Login")}
-        </.link>
-      <% end %>
+    <div class="flex items-center justify-between max-w-6xl mx-auto">
+      <img src="/images/logo.svg" class="h-8" />
+
+      <!-- Mobile menu -->
+      <div
+        x-show="open"
+        x-transition
+        class="fixed inset-0 bg-secondary-500/95 z-50 md:hidden flex flex-col items-center justify-center space-y-6"
+        @click.away="open = false"
+      >
+        <button @click="open = false" class="absolute top-6 right-6">
+          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
+        <a href="https://get.claper.co/" class="text-lg font-semibold text-white hover:text-primary-300 transition-colors">
+          {gettext("About")}
+        </a>
+        <%= if @current_user do %>
+          <.link href={~p"/events"} class="btn btn-primary btn-lg">
+            {gettext("Dashboard")}
+          </.link>
+        <% else %>
+          <.link href={~p"/users/log_in"} class="btn btn-primary btn-lg">
+            {gettext("Login")}
+          </.link>
+        <% end %>
+      </div>
+
+      <button @click="open = true" class="md:hidden p-2">
+        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+      </button>
+
+      <!-- Desktop menu -->
+      <div class="hidden md:flex items-center gap-6">
+        <a href="https://get.claper.co/" class="text-sm text-white/80 font-medium hover:text-white transition-colors">
+          {gettext("About")}
+        </a>
+        <%= if @current_user do %>
+          <.link href={~p"/events"} class="btn btn-primary">
+            {gettext("Dashboard")}
+          </.link>
+        <% else %>
+          <.link href={~p"/users/log_in"} class="btn btn-primary">
+            {gettext("Login")}
+          </.link>
+        <% end %>
+      </div>
     </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"
-        />
+  <!-- Main content -->
+  <div class="relative z-10 flex flex-col items-center justify-center px-5 pt-12 md:pt-24 pb-16">
+    <div class="w-full max-w-md">
+      <!-- Hero section -->
+      <div class="text-center mb-10">
+        <h1 class="text-4xl md:text-5xl font-bold text-white mb-4 font-display">
+          {gettext("Join the event")}
+        </h1>
+        <p class="text-white/60 text-lg">
+          {gettext("Enter the code shared by the presenter")}
+        </p>
       </div>
 
-      <div class="mt-10">
-        <button type="submit" id="submit" class="btn btn-gradient w-full">
-          {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>
+      <!-- Join card -->
+      <div class="join-card rounded-3xl p-8 md:p-10">
+        <%= form_for :event, ~p"/join", ["phx-submit": "join", "phx-hook": "JoinEvent", id: "form"], fn f -> %>
+          <div class="relative">
+            <label class="block text-white/50 text-sm font-medium mb-3 uppercase tracking-wider">
+              {gettext("Event code")}
+            </label>
+            <div class="relative">
+              <span class="absolute left-5 top-1/2 -translate-y-1/2 text-white/40 text-2xl font-bold">#</span>
+              {text_input(f, :code,
+                required: true,
+                autofocus: true,
+                maxlength: 10,
+                placeholder: "ABCD1234",
+                id: "input",
+                class:
+                  "code-input w-full text-white text-2xl md:text-3xl font-bold tracking-[0.2em] uppercase pl-12 pr-6 py-5 rounded-2xl outline-none placeholder-white/20 text-center"
+              )}
             </div>
           </div>
-        </.link>
-      <% end %>
-    <% end %>
+
+          <div class="mt-8">
+            <button type="submit" id="submit" class="btn btn-gradient btn-lg w-full shadow-none">
+              {gettext("Join")}
+            </button>
+            <img src="/images/loading.gif" id="loading" class="hidden h-12 mx-auto mt-4" />
+          </div>
+
+          <%= if @last_event do %>
+            <.link href={~p"/e/#{@last_event.code}"} class="block mt-6">
+              <div class="group flex items-center justify-center gap-3 py-4 px-5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 transition-all">
+                <div class="w-10 h-10 rounded-full bg-primary-500/20 flex items-center justify-center">
+                  <svg class="w-5 h-5 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                  </svg>
+                </div>
+                <div class="text-left">
+                  <p class="text-white/50 text-xs">{gettext("Return to your last event")}</p>
+                  <p class="text-white font-medium">{@last_event.name}</p>
+                </div>
+                <svg class="w-5 h-5 text-white/40 group-hover:text-white/60 group-hover:translate-x-1 transition-all ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </div>
+            </.link>
+          <% end %>
+        <% end %>
+      </div>
+
+      <!-- Claper promo section -->
+      <div class="mt-16 text-center relative">
+        <div class="absolute left-1/2 -translate-x-1/2 -top-3 w-24 h-px bg-gradient-to-r from-transparent via-white/30 to-transparent"></div>
+
+        <p class="text-white/40 text-sm uppercase tracking-widest mb-4">{gettext("Are you a presenter?")}</p>
+
+        <h3 class="text-white text-xl md:text-2xl font-display font-semibold mb-3">
+          {gettext("Turn your slides into conversations")}
+        </h3>
+
+        <p class="text-white/50 text-sm max-w-xs mx-auto mb-6">
+          {gettext("Add live polls, Q&A, quizzes and reactions to engage your audience in real-time.")}
+        </p>
+
+        <a href="https://get.claper.co/" class="group inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-medium transition-colors">
+          {gettext("Start creating for free")}
+          <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+          </svg>
+        </a>
+      </div>
+    </div>
   </div>
 </div>