public/404-mobile.html
<!DOCTYPE html>
<html class="dark">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<title>404: Not Found</title>
<link rel="stylesheet" href="/assets/error/style-mobile.css">
<body <% if @traceback %>class="error-message"<% end %>>
<div class="h-full min-w-full bg-black font-sans text-sm text-white antialiased">
<div class="flex min-h-screen flex-col px-4">
<header class="fixed">
<div class="grid h-16 grid-cols-3">
<div class="flex cursor-pointer items-center justify-self-start text-base">
<button class="flex cursor-pointer items-center" aria-label="Go home">
<svg xmlns="http://www.w3.org/2000/svg" class="icon fill-current icon-mobile-home" width="32" height="32" aria-hidden="true" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 14a1.5 1.5 0 0 1 1.5-1.5h4a1.5 1.5 0 0 1 1.5 1.5v4.5h3V9.442L12 4.838 5.5 9.442V18.5h3V14Zm1.5 6H4V9.184a1 1 0 0 1 .422-.816l7-4.959a1 1 0 0 1 1.156 0l7 4.959a1 1 0 0 1 .422.816V20h-6v-6h-4v6Z"></path>
</svg>
</button>
</div>
</div>
</header>
<main class="flex grow flex-col items-center justify-center">
<h1 class="mb-9 text-8xl font-extrabold">404</h1>
<% if !@traceback %>
<img alt="Error" src="/assets/error/error-mobile-404.svg">
<h2 class="mt-9 max-w-prose text-center text-xl font-semibold">Requested resource was not found</h2>
<p class="mt-4 min-h-[4rem] max-w-prose text-center text-gray">Sorry, but the Phoenix is not able to find your resource. Try checking the URL for errors.</p>
<% if @message.present? %>
<p class="max-w-prose text-center text-gray"><%= @message %></p>
<% end %>
<% else %>
<pre class="traceback">
<%= @exception.message %>
<% if @exception.backtrace %>
<code>
<% @exception.backtrace.each {|row| %>
<%= row %>
<% } %>
</code>
<% end %>
</pre>
<% end %>
</main>
</div>
</div>
</body>
</html>