mirror of
https://github.com/ClaperCo/Claper.git
synced 2025-12-29 00:25:02 +01:00
196 lines
8.1 KiB
Plaintext
196 lines
8.1 KiB
Plaintext
<style>
|
|
body {
|
|
background: black;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div
|
|
id="presenter"
|
|
phx-hook="Presenter"
|
|
data-max-page={@event.presentation_file.length}
|
|
data-hash={@event.presentation_file.hash}
|
|
data-current-page={@state.position}
|
|
>
|
|
<!-- JOIN SCREEN -->
|
|
<div
|
|
id="joinScreen"
|
|
class={"#{if @state.join_screen_visible, do: 'opacity-100 z-40', else: 'opacity-0'} h-full w-full flex flex-col justify-center bg-black absolute transition-opacity"}
|
|
>
|
|
<div class="h-full bg-black text-white bg-opacity-50 text-center flex flex-col items-center justify-center">
|
|
<span class="font-semibold mb-10 sm:text-3xl md:text-4xl lg:text-6xl">
|
|
<%= gettext("Scan to interact in real-time") %>
|
|
</span>
|
|
<div
|
|
phx-hook="QRCode"
|
|
data-code={@event.code}
|
|
data-dynamic="true"
|
|
id="qr"
|
|
phx-update="ignore"
|
|
class="rounded-lg mx-auto flex items-center justify-center mb-14"
|
|
>
|
|
</div>
|
|
<span class="font-semibold mb-10 sm:text-3xl md:text-4xl lg:text-6xl">
|
|
<%= gettext("Or go to %{url} and use the code:", url: @host) %>
|
|
</span>
|
|
<span class="font-semibold mb-10 sm:text-5xl md:text-6xl lg:text-8xl">
|
|
#<%= String.upcase(@event.code) %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- POLL -->
|
|
<%= if @current_poll do %>
|
|
<div
|
|
id="poll"
|
|
class={"#{if @state.poll_visible, do: 'opacity-100', else: 'opacity-0'} h-full w-full flex flex-col justify-center bg-black bg-opacity-90 absolute z-30 left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 p-10 transition-opacity"}
|
|
>
|
|
<div class="w-1/2 mx-auto">
|
|
<p class="text-white font-bold text-5xl mb-24"><%= @current_poll.title %></p>
|
|
|
|
<div class="flex flex-col space-y-10">
|
|
<%= if (length @current_poll.poll_opts) > 0 do %>
|
|
<%= for opt <- @current_poll.poll_opts do %>
|
|
<div class="bg-gray-500 px-6 py-4 rounded-full flex justify-between items-center relative text-white">
|
|
<div
|
|
style={"width: #{opt.percentage}%;"}
|
|
class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full h-full absolute left-0 transition-all"
|
|
>
|
|
</div>
|
|
<div class="flex space-x-3 z-10 text-left">
|
|
<span class="flex-1 text-2xl font-bold"><%= opt.content %></span>
|
|
</div>
|
|
<span class="text-2xl z-10 font-bold">
|
|
<%= opt.percentage %>% (<%= opt.vote_count %>)
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<%= if @current_embed do %>
|
|
<!-- EMBED -->
|
|
<div
|
|
id="embed"
|
|
class={"#{if @state.chat_visible, do: 'h-5/6 w-9/12 right-0', else: 'h-screen w-full'} transition-all duration-150 inline-block transform -translate-y-1/2 top-1/2 z-30 absolute transition-opacity"}
|
|
>
|
|
<%= raw(@current_embed.content) %>
|
|
</div>
|
|
<% end %>
|
|
<!-- MESSAGES -->
|
|
<div
|
|
id="slider-wrapper"
|
|
class="w-full min-h-screen flex items-center justify-center relative bg-black"
|
|
>
|
|
<div
|
|
class={"#{if @state.chat_visible, do: 'opacity-100 w-3/12 px-4 showed', else: 'opacity-0 w-0 p-0'} transition-all duration-150 flex flex-col h-screen py-5 justify-end max-h-screen bg-black"}
|
|
id="test"
|
|
phx-update="replace"
|
|
>
|
|
<%= if @state.show_only_pinned == false do %>
|
|
<div id="post-list" phx-update="replace">
|
|
<%= for post <- @posts do %>
|
|
<div class={if post.__meta__.state == :deleted, do: "hidden"} id={"#{post.id}-post"}>
|
|
<div class="px-4 pb-2 pt-3 rounded-b-lg rounded-tr-lg bg-white shadow-md text-black break-word mt-4">
|
|
<%= if post.name do %>
|
|
<p class="text-gray-400 text-lg font-semibold mb-2 mr-2"><%= post.name %></p>
|
|
<% end %>
|
|
<p class="text-3xl"><%= post.body %></p>
|
|
|
|
<%= if post.like_count > 0 || post.love_count > 0 || post.lol_count > 0 do %>
|
|
<div class="flex h-6 space-x-2 text-lg text-gray-500 pb-3 items-center mt-5">
|
|
<div class="flex items-center">
|
|
<%= if post.like_count > 0 do %>
|
|
<img src="/images/icons/thumb.svg" class="h-7" />
|
|
<span class="ml-1"><%= post.like_count %></span>
|
|
<% end %>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<%= if post.love_count > 0 do %>
|
|
<img src="/images/icons/heart.svg" class="h-7" />
|
|
<span class="ml-1"><%= post.love_count %></span>
|
|
<% end %>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<%= if post.lol_count > 0 do %>
|
|
<img src="/images/icons/laugh.svg" class="h-7" />
|
|
<span class="ml-1"><%= post.lol_count %></span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% else %>
|
|
<div id="pinned-posts" phx-update="replace">
|
|
<%= for post <- @pinned_posts do %>
|
|
<div class={if post.__meta__.state == :deleted, do: "hidden"} id={"#{post.id}-post"}>
|
|
<div class="px-4 pb-2 pt-3 rounded-b-lg rounded-tr-lg bg-white shadow-md text-black break-word mt-4">
|
|
<%= if post.name do %>
|
|
<p class="text-gray-400 text-lg font-semibold mb-2 mr-2"><%= post.name %></p>
|
|
<% end %>
|
|
<p class="text-3xl"><%= post.body %></p>
|
|
|
|
<%= if post.like_count > 0 || post.love_count > 0 || post.lol_count > 0 do %>
|
|
<div class="flex h-6 space-x-2 text-lg text-gray-500 pb-3 items-center mt-5">
|
|
<div class="flex items-center">
|
|
<%= if post.like_count > 0 do %>
|
|
<img src="/images/icons/thumb.svg" class="h-7" />
|
|
<span class="ml-1"><%= post.like_count %></span>
|
|
<% end %>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<%= if post.love_count > 0 do %>
|
|
<img src="/images/icons/heart.svg" class="h-7" />
|
|
<span class="ml-1"><%= post.love_count %></span>
|
|
<% end %>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<%= if post.lol_count > 0 do %>
|
|
<img src="/images/icons/laugh.svg" class="h-7" />
|
|
<span class="ml-1"><%= post.lol_count %></span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<!-- SLIDES -->
|
|
<div id="slider" phx-update="ignore">
|
|
<%= for index <- 1..@event.presentation_file.length do %>
|
|
<%= if Application.get_env(:claper, :presentations) |> Keyword.get(:storage) == "local" do %>
|
|
<img
|
|
class="w-1/3 max-h-screen mx-auto"
|
|
src={"/uploads/#{@event.presentation_file.hash}/#{index}.jpg"}
|
|
/>
|
|
<% else %>
|
|
<img
|
|
class="w-full max-h-screen mx-auto inline-block"
|
|
src={"https://#{Application.get_env(:claper, :presentations) |> Keyword.get(:aws_bucket)}.s3.#{Application.get_env(:ex_aws, :region)}.amazonaws.com/presentations/#{@event.presentation_file.hash}/#{index}.jpg"}
|
|
/>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<!-- ONLINE BADGE -->
|
|
<div class="absolute z-20 bottom-5 right-5 px-4 pt-3 pb-1 rounded-md bg-black shadow-md text-white flex-1">
|
|
<div id="reacts" phx-hook="GlobalReacts" data-class-name="h-24" phx-update="ignore"></div>
|
|
|
|
<div class="inline-flex justify-between items-center text-white text-2xl">
|
|
<img src="/images/icons/online-users.svg" class="h-12 mr-2" />
|
|
<span id="counter"><%= @attendees_nb %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|