mobile design for contest prices

style footer

resolve conflict

lib/quadquizaminos_web/live/contest_prizes.ex

@@ -3,62 +3,68 @@ defmodule QuadquizaminosWeb.ContestPrizes do
   alias QuadquizaminosWeb.Router.Helpers, as: Routes
 
   def render(assigns) do
+    prices = [
+      %{
+        icon: "trophy",
+        heading: "High Score",
+        content:
+          "One lucky person will win a $25 MyRewards Gift Card. The prize goes to ELIGIBLE person with the highest Score DURING THE CONTEST (see rules).",
+        price: "25"
+      },
+      %{
+        icon: "th",
+        heading: "Most Bricks",
+        content:
+          " One lucky person will win a $25 MyRewards Gift Card. The prize goes to ELIGIBLE person with the the most bricks in a game DURING THE CONTEST (see rules). ",
+        price: "25"
+      },
+      %{
+        icon: "question",
+        heading: "Most Questions",
+        content:
+          " One lucky person will win a $25 MyRewards Gift Card. The prize goes to ELIGIBLE person who answers the most trivia questions in the game DURING THE CONTEST (see rules). ",
+        price: "25"
+      },
+      %{
+        icon: "gift",
+        heading: "???????",
+        content: """
+        One lucky person will win a
+        $25 MyRewards Gift Card.
+        The prize goes to ELIGIBLE person
+        who meets a suprise criteria
+        DURING THE CONTEST (see rules).
+        In the past, the surpise criteria
+        was the first questions in the lecture Q&A.
+        Another time it was for finding a new bug
+        in the game.
+        Or it has been for the best question in the Q&A.
+        Or it might be used when there is a tie.
+        Or it could even be for the most creative handle.
+        Or it might be some other criteria.
+        """,
+        price: "25"
+      }
+    ]
+
     ~L"""
-    <h1>Contest Prizes</h1>
-    <p>
-    This is the prize page for the
-    AT&T Software Symposium Security Workshop
-    QuadBlockQuiz contest.
-    See
+    <h1 class="heading-1 mt-7 text-4xl tracking-widest">Contest Prizes</h1>
+    <p class="pb-7">
+    This is the prize page for the AT&T Software Symposium Security Workshop QuadBlockQuiz contest. See
     <a href= <%= Routes.live_path(QuadquizaminosWeb.Endpoint, QuadquizaminosWeb.ContestRules) %> > Contest Rules </a>
     for more information on contest rules.
     </p>
 
-    <h2>$25 MyRewards for High Score</h2>
-    <p>
-    One lucky person will win a
-    $25 MyRewards Gift Card.
-    The prize goes to ELIGIBLE person
-    with the highest Score
-    DURING THE CONTEST (see rules).
-    </p>
-
-    <h2>$25 MyRewards for Most Bricks</h2>
-    <p>
-    One lucky person will win a
-    $25 MyRewards Gift Card.
-    The prize goes to ELIGIBLE person
-    with the the most bricks in a game
-    DURING THE CONTEST (see rules).
-    </p>
-
-    <h2>$25 MyRewards for Most Questions</h2>
-    <p>
-    One lucky person will win a
-    $25 MyRewards Gift Card.
-    The prize goes to ELIGIBLE person
-    who answers the most trivia questions in the game
-    DURING THE CONTEST (see rules).
-    </p>
-
-    <h2>$25 MyRewards for ????????</h2>
-    <p>
-    One lucky person will win a
-    $25 MyRewards Gift Card.
-    The prize goes to ELIGIBLE person
-    who meets a suprise criteria
-    DURING THE CONTEST (see rules).
-    In the past, the surpise criteria
-    was the first questions in the lecture Q&A.
-    Another time it was for finding a new bug
-    in the game.
-    Or it has been for the best question in the Q&A.
-    Or it might be used when there is a tie.
-    Or it could even be for the most creative handle.
-    Or it might be some other criteria.
-    </p>
-
-
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mt-4 gap-4 place-items-center">
+    <%= for price <- prices do %>
+      <div class="bg-slate-100 p-4 pb-8 rounded-md text-center">
+        <i class="text-blue-300 fas fa-<%= price.icon %> fa-4x mt-6"></i>
+        <h2 class="heading-2 my-6"><%= price.heading %> </h2>
+        <p class="text-sm pb-2"><%= price.content %></p>
+        <span class="text-3xl font-bold"> $ <%=price.price %> </span>
+      </div>
+      <% end %>
+    </div>
     """
   end
 end

lib/quadquizaminos_web/router.ex

@@ -46,7 +46,6 @@ defmodule QuadquizaminosWeb.Router do
     live "/contestboard", ContestboardLive
 
     live "/contests/:id", ContestsLive, :show
-    live "/contest_prizes", ContestPrizes
     get "/anonymous", SessionController, :anonymous
     post "/anonymous", SessionController, :anonymous
     resources "/sessions", SessionController, only: [:new, :create]
@@ -73,6 +72,8 @@ defmodule QuadquizaminosWeb.Router do
     live "/contest_rules", ContestRules
     live "/leaderboard", LeaderboardLive
     live "/contests", ContestsLive, :index
+    live "/contest-prizes", ContestPrizes
+
   end
 
   scope "/admin", QuadquizaminosWeb, as: :admin do

lib/quadquizaminos_web/templates/layout/tailwind.html.leex

@@ -32,24 +32,24 @@
         <%= @inner_content %>
       </div>
     </div>
-    <div class="container mx-auto">
-    <footer class="grid grid-flow-col place-items-center h-32 gap-4">
+    <footer class="h-64 bg-slate-100">
+    <div class="h-64 container mx-auto grid grid-flow-col  gap-4 place-items-center ">
       <a href="https://sfractal.com/" class="phx-logo">
-        <img src="<%= Routes.static_path(@conn, "/images/sFractalConsulting.png") %>" alt="sFractal Logo" />
+        <img src="<%= Routes.static_path(@conn, "/images/sFractalConsulting.png") %>" alt="sFractal Logo" class="max-h-32"/>
       </a>
       <a href="https://podiihq.com/" class="phx-logo">
-        <img src="<%= Routes.static_path(@conn, "/images/podiilogo.png") %>" alt="Podii Logo" />
+        <img src="<%= Routes.static_path(@conn, "/images/podiilogo.png") %>" alt="Podii Logo" class="max-h-32"/>
       </a>
       <a href="https://briarcutter.com/" class="phx-logo">
-        <img src="<%= Routes.static_path(@conn, "/images/Briar Cutter Final PNG@2x.png") %>" alt="Briar Cutter Logo" />
+        <img src="<%= Routes.static_path(@conn, "/images/Briar Cutter Final PNG@2x.png") %>" alt="Briar Cutter Logo" class="max-h-32"/>
       </a>
       <a href="https://grox.io/" class="phx-logo">
-        <img src="<%= Routes.static_path(@conn, "/images/groxio.png") %>" alt="Grox.io Logo" />
+        <img src="<%= Routes.static_path(@conn, "/images/groxio.png") %>" alt="Grox.io Logo" class="max-h-32"/>
         </a>
         <a href="https://google.com/" class="phx-logo">
-          <img src="<%= Routes.static_path(@conn, "/images/google2.0.0.jpg") %>" alt="Google Logo" />
+          <img src="<%= Routes.static_path(@conn, "/images/google2.0.0.png") %>" alt="Google Logo" class="max-h-32"/>
         </a>
-    </footer>
       </div>
+    </footer>
   </body>
 </html>