Mirrors/Claper
1
0
Fork 0
mirror of https://github.com/ClaperCo/Claper.git synced 2026-02-24 20:19:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Revamp event join page with gradient background, floating shapes, and enhanced UI elements for improved user experience

Browse Source
This commit is contained in:
Alex Lion
2026-02-02 20:00:59 +01:00
parent 8ace57d2a8
commit fe5ae576a0
1 changed files with 219 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
lib/claper_web/live/event_live/join.html.heex
View File

@@ -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>