bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add controller, routes, and templates for other error pages

Browse Source
This commit is contained in:
Andy Smith
2025-07-29 13:32:00 -05:00
parent da546109a5
commit 84b8bb0a43
14 changed files with 233 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/controllers/errors_controller.rb
+25
View File
@@ -0,0 +1,25 @@
class ErrorsController < ApplicationController
require_untenanted_access
layout "error"
def bad_request
render status: :bad_request
end
def not_found
render status: :not_found
end
def not_acceptable
render status: :not_acceptable
end
def unprocessable_entity
render status: :unprocessable_entity
end
def internal_server_error
render status: :internal_server_error
end
end
app/views/errors/bad_request.html.erb
+7
View File
@@ -0,0 +1,7 @@
<hgroup class="error-page__stamp">
<h1 class="error-page__title">400</h1>
<h2>Bad request</h2>
<hr />
<div>Your request could not be understood by the server.</div>
</hgroup>
app/views/errors/internal_server_error.html.erb
+7
View File
@@ -0,0 +1,7 @@
<hgroup class="error-page__stamp">
<h1 class="error-page__title">500</h1>
<h2>Internal server error</h2>
<hr />
<div>Something went wrong on our end; please try again later.</div>
</hgroup>
app/views/errors/not_acceptable.html.erb
+7
View File
@@ -0,0 +1,7 @@
<hgroup class="error-page__stamp">
<h1 class="error-page__title">406</h1>
<h2>Not acceptable</h2>
<hr />
<div>The requested resource is not available in a format acceptable to your browser.</div>
</hgroup>
app/views/errors/not_found.html.erb
+7
View File
@@ -0,0 +1,7 @@
<hgroup class="error-page__stamp">
<h1 class="error-page__title">404</h1>
<h2>Sorry, that page doesn’t exist!</h2>
<hr />
<div>You may have mistyped the address or the page may have moved.</div>
</hgroup>
app/views/errors/unprocessable_entity.html.erb
+7
View File
@@ -0,0 +1,7 @@
<hgroup class="error-page__stamp">
<h1 class="error-page__title">422</h1>
<h2>Unprocessable entity</h2>
<hr />
<div>The server understands the request but was unable to process it.</div>
</hgroup>
app/views/layouts/error.html.erb
+164
View File
@@ -0,0 +1,164 @@
<!doctype html>
<html lang="en">
<head>
<title>The page you were looking for doesn’t exist (404 Not found)</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<meta name="robots" content="noindex, nofollow">
<style>
:root {
--color-canvas: white;
--color-ink: oklch(26% 0.05 264);
--color-accent: oklch(57.02% 0.1895 260.46);
--text-large: 6rem;
--text-medium: 2rem;
--text-normal: 1rem;
@media (prefers-color-scheme: dark) {
--color-canvas: oklch(20% 0.0195 232.58);
--color-ink: oklch(96.02% 0.0034 260);
--color-accent: oklch(74% 0.1293 256);
}
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
html {
font-size: 1.5rem;
overflow: hidden;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
align-items: center;
background-color: var(--color-canvas);
color: var(--color-ink);
display: flex;
flex-direction: column;
font-family: system-ui;
font-size: var(--text-normal);
font-style: normal;
font-weight: 500;
gap: 2rem;
line-height: 1.375;
min-height: 100vh;
overflow: hidden;
padding-inline: 1rem;
justify-content: center;
text-align: center;
text-rendering: optimizeLegibility;
text-size-adjust: none;
/* Cool wavy striped lines */
&:before {
--mask:
radial-gradient(6px at 50% calc(100% + 3px), #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px ,
radial-gradient(6px at 50% -3px, #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) 50% calc(50% + 3px)/16px 6px ;
-webkit-mask: var(--mask);
mask: var(--mask);
background: var(--color-accent);
content: "";
inset: 0;
opacity: 0.15;
position: absolute;
z-index: -1;
}
}
.error-page__logo {
--logo-size: 1.15em;
align-items: center;
display: flex;
font-size: var(--text-medium);
font-weight: bold;
justify-content: center;
svg {
block-size: var(--logo-size);
inline-size: var(--logo-size);
display: block;
translate: 0 -10%; /* align with text */
}
}
.error-page__stamp {
--padding: 1rem 2rem;
--stroke-width: 0.25rem;
align-items: center;
background-color: color-mix(in oklch, var(--color-canvas), transparent 50%);
background-color: var(--color-canvas);
border-radius: calc(var(--stroke-width) * 2);
border: calc(var(--stroke-width) * 1) dashed var(--color-accent);
color: var(--color-accent);
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.25;
max-inline-size: 36ch;
rotate: -5deg;
padding: var(--padding);
position: relative;
}
h1 {
font-size: var(--text-large);
font-weight: 900;
line-height: 1;
position: relative;
text-transform: uppercase;
@supports (-webkit-text-stroke: 1px black) {
-webkit-text-stroke: var(--stroke-width) var(--color-accent);
-webkit-text-fill-color: transparent;
}
}
h2 {
font-size: var(--text-normal);
font-weight: inherit;
/* margin-block-end: 1rem; */
}
hr {
inline-size: 100%;
border: 0;
border-block-start: calc(var(--stroke-width) / 2) solid currentcolor;
margin: 1ch auto;
}
a {
color: inherit;
line-height: 2rem;
display: inline-block;
padding-inline: 1ch;
border-radius: 99rem;
text-decoration: none;
span {
text-decoration: underline;
text-underline-offset: 0.25ch;
}
&:hover {
color: var(--color-accent);
}
}
</style>
</head>
<body>
<figure class="error-page__logo">
<svg fill="none" height="275" viewBox="0 0 202 275" width="202" xmlns="http://www.w3.org/2000/svg"><path d="m201 258c0 11.159-44.772 16-100 16-55.2285 0-100-4.841-100-16s44.7715-16 100-16c55.228 0 100 4.841 100 16z" fill="#000" opacity=".08"/><path clip-rule="evenodd" d="m144.805 2.24222c2.294-1.843841 5.681-1.617368 7.696.56152 2.014 2.17904 1.917 5.51121-.174 7.57326l-.209.1953-.012.0117c-.009.0075-.022.0181-.039.0332-.035.0309-.087.078-.156.1397-.138.1235-.344.309-.614.5508-.54.484-1.336 1.1979-2.353 2.1152-2.033 1.835-4.952 4.4821-8.487 7.7256-7.073 6.4897-16.602 15.357-26.441 24.8759-2.543 2.4612-4.066 5.7749-4.269 9.2891-.383 6.654-.719 11.235-1.012 17.6885 27.89.2759 50.213 1.9831 62.831 3.1963l2.598.2558.018.002c7.816.8155 13.555 7.8838 12.741 15.4687l.001.001c-3.418 33.6092-7.351 63.0722-10.988 87.6142.005.178.001.359-.012.54-.03.417-.11.819-.228 1.203-3.37 24.477-6.469 42.647-8.652 56.28-2.231 13.914-13.656 24.673-28.256 25.45h-.011c-24.343 1.247-48.8273 1.346-73.2036.126l-2.3589-.122c-14.5946-.782-26.0187-11.539-28.2492-25.453-2.1836-13.632-5.2839-31.801-8.6543-56.276-.1189-.385-.1974-.789-.2278-1.208-.0133-.182-.0178-.363-.013-.542-3.6384-24.542-7.5712-54.004-10.9942-87.6112l.0009-.001c-.814-7.5854 4.9246-14.6542 12.7413-15.4697l.0179-.002c12.5608-1.2701 37.7453-3.3397 69.6834-3.4824.3004-6.6424.644-11.4215 1.0396-18.2793.3592-6.2258 3.0569-12.1147 7.5909-16.5019 9.93-9.6079 19.535-18.5451 26.654-25.0772 3.561-3.2672 6.504-5.93628 8.557-7.78905 1.027-.9262 1.831-1.64876 2.38-2.14063.274-.24594.485-.43526.628-.56249.07-.06313.124-.111.161-.14356.018-.01633.033-.02867.043-.03711.004-.00412.007-.00855.01-.01074l.003-.00195.001-.00098zm-43.801 180.81978c-19.4 0-36.6494.529-49.0474 1.058-5.7553.246-10.4622.491-13.8495.684 3.0876 22.131 5.9039 38.413 7.9281 51.05l.0726.422c1.6067 8.833 8.807 15.28 17.7176 15.757l2.319.12c22.4196 1.123 44.9546 1.111 67.4046.099l4.644-.225c9.05-.486 16.331-7.128 17.781-16.173 2.024-12.637 4.838-28.919 7.925-51.05-3.387-.193-8.094-.438-13.849-.684-12.398-.529-29.647-1.058-49.046-1.058zm-3.9481-99.0874c-31.2286.1604-55.8254 2.1836-68.0558 3.42-1.5771.1659-2.8714 1.698-2.7906 3.2392l.0119.1494.005.0489c3.2299 31.7109 6.9166 59.5089 10.3775 83.0379.0293-.002.0589-.003.0885-.005 3.4785-.201 8.5176-.468 14.7777-.735 11.3621-.485 26.7597-.968 44.1622-1.054-.0045-.387-.0095-.861-.015-1.42-.017-1.739-.0366-4.292-.0487-7.56-.0243-6.536-.0177-13.933.1084-25.385.1704-15.474.5585-32.713 1.3789-53.7364zm11.2131.0235c-.826 21.0519-1.215 38.3339-1.386 53.8319-.125 11.393-.133 18.735-.109 25.226.012 3.245.032 5.777.049 7.495.006.614.011 1.125.016 1.527 17.212.092 32.437.571 43.698 1.052 6.26.267 11.3.534 14.779.735.029.002.057.003.086.005 3.46-23.529 7.146-51.326 10.372-83.037l.005-.0498c.176-1.5891-1.149-3.2156-2.776-3.3886-11.793-1.1922-35.083-3.1168-64.734-3.3965z" fill="var(--color-ink)" fill-rule="evenodd"/><path d="m101.001 183.062c19.505 0 36.849.529 49.315 1.058 5.786.246 10.519.491 13.924.684-3.103 22.131-5.933 38.413-7.968 51.05-1.458 9.045-8.779 15.687-17.879 16.173l-4.669.225c-22.573 1.012-45.231 1.024-67.7731-.099l-2.3317-.12c-8.9591-.477-16.199-6.924-17.8145-15.757l-.073-.422c-2.0352-12.637-4.867-28.919-7.9714-51.05 3.4057-.193 8.1386-.438 13.9252-.684 12.4657-.529 29.8098-1.058 49.3155-1.058z" fill="#68abe9"/><path d="m56.6279 193.649c2.9632-.313 5.6326 1.728 6.0947 4.602l.0376.281.2601 2.344c1.2836 11.298 2.3362 16.481 4.1927 23.957.6454 2.598.9475 4.032 1.2977 5.222.0161.055.0326.106.0475.155.8538.102 2.113.162 4.2422.244 11.6052.444 23.1581.591 34.6066.001 3.073-.159 5.693 2.172 5.854 5.206.16 3.033-2.2 5.621-5.272 5.779-11.9181.615-23.8417.456-35.6199.005-2.1972-.084-4.2851-.159-5.9622-.427-1.7844-.284-3.9749-.903-5.7881-2.707-1.6614-1.653-2.3709-3.704-2.807-5.186-.4338-1.474-.8976-3.572-1.4193-5.673-1.9779-7.965-3.1089-13.606-4.441-25.321l-.269-2.427-.0238-.282c-.1652-2.905 2.0059-5.459 4.9692-5.773z" fill="#fff" opacity=".15"/></svg>
Fizzy
</figure>
<%= yield %>
<a href="javascript:window.history.back();">&larr; <span>Go back</span></a>
</body>
</html>
config/application.rb
+3
View File
@@ -28,5 +28,8 @@ module Fizzy
# enable load_async
config.active_record.async_query_executor = :global_thread_pool
# use routes for error pages instead of static files
config.exceptions_app = self.routes
end
end
config/routes.rb
+6
View File
@@ -179,6 +179,12 @@ Rails.application.routes.draw do
get "manifest" => "rails/pwa#manifest", as: :pwa_manifest
get "service-worker" => "pwa#service_worker"
match "/400", to: "errors#bad_request", via: :all
match "/404", to: "errors#not_found", via: :all
match "/406", to: "errors#not_acceptable", via: :all
match "/422", to: "errors#unprocessable_entity", via: :all
match "/500", to: "errors#internal_server_error", via: :all
root "events#index"
Queenbee.routes(self)
public/400.html
-114
View File
@@ -1,114 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>The server cannot process the request due to a client error (400 Bad Request)</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<meta name="robots" content="noindex, nofollow">
<style>
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
font-size: 16px;
}
body {
background: #FFF;
color: #261B23;
display: grid;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: clamp(1rem, 2.5vw, 2rem);
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: 400;
letter-spacing: -0.0025em;
line-height: 1.4;
min-height: 100vh;
place-items: center;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
}
a {
color: inherit;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.0925em;
}
b, strong {
font-weight: 700;
}
i, em {
font-style: italic;
}
main {
display: grid;
gap: 1em;
padding: 2em;
place-items: center;
text-align: center;
}
main header {
width: min(100%, 12em);
}
main header svg {
height: auto;
max-width: 100%;
width: 100%;
}
main article {
width: min(100%, 30em);
}
main article p {
font-size: 75%;
}
main article br {
display: none;
@media(min-width: 48em) {
display: inline;
}
}
</style>
</head>
<body>
<!-- This file lives in public/400.html -->
<main>
<header>
<svg height="172" viewBox="0 0 480 172" width="480" xmlns="http://www.w3.org/2000/svg"><path d="m124.48 3.00509-45.6889 100.02991h26.2239v-28.1168h38.119v28.1168h21.628v35.145h-21.628v30.82h-37.308v-30.82h-72.1833v-31.901l50.2851-103.27391zm115.583 168.69891c-40.822 0-64.884-35.146-64.884-85.7015 0-50.5554 24.062-85.700907 64.884-85.700907 40.823 0 64.884 35.145507 64.884 85.700907 0 50.5555-24.061 85.7015-64.884 85.7015zm0-133.2831c-17.572 0-22.709 21.8984-22.709 47.5816 0 25.6835 5.137 47.5815 22.709 47.5815 17.303 0 22.71-21.898 22.71-47.5815 0-25.6832-5.407-47.5816-22.71-47.5816zm140.456 133.2831c-40.823 0-64.884-35.146-64.884-85.7015 0-50.5554 24.061-85.700907 64.884-85.700907 40.822 0 64.884 35.145507 64.884 85.700907 0 50.5555-24.062 85.7015-64.884 85.7015zm0-133.2831c-17.573 0-22.71 21.8984-22.71 47.5816 0 25.6835 5.137 47.5815 22.71 47.5815 17.302 0 22.709-21.898 22.709-47.5815 0-25.6832-5.407-47.5816-22.709-47.5816z" fill="#f0eff0"/><path d="m123.606 85.4445c3.212 1.0523 5.538 4.2089 5.538 8.0301 0 6.1472-4.209 9.5254-11.298 9.5254h-15.617v-34.0033h14.565c7.089 0 11.353 3.1566 11.353 9.2484 0 3.6551-2.049 6.3134-4.541 7.1994zm-12.904-2.9905h5.095c2.603 0 3.988-.9968 3.988-3.1013 0-2.1044-1.385-3.0459-3.988-3.0459h-5.095zm0 6.6456v6.5902h5.981c2.492 0 3.877-1.3291 3.877-3.2674 0-2.049-1.385-3.3228-3.877-3.3228zm43.786 13.9004h-8.362v-1.274c-.831.831-3.323 1.717-5.981 1.717-4.929 0-9.083-2.769-9.083-8.0301 0-4.818 4.154-7.9193 9.581-7.9193 2.049 0 4.486.6646 5.483 1.3845v-1.606c0-1.606-.942-2.9905-3.046-2.9905-1.606 0-2.548.7199-2.935 1.8275h-8.197c.72-4.8181 4.985-8.6393 11.409-8.6393 7.088 0 11.131 3.7659 11.131 10.2453zm-8.362-6.9779v-1.4399c-.554-1.0522-2.049-1.7167-3.655-1.7167-1.717 0-3.434.7199-3.434 2.3813 0 1.7168 1.717 2.4367 3.434 2.4367 1.606 0 3.101-.6645 3.655-1.6614zm27.996 6.9779v-1.994c-1.163 1.329-3.599 2.548-6.147 2.548-7.199 0-11.131-5.8151-11.131-13.0145s3.932-13.0143 11.131-13.0143c2.548 0 4.984 1.2184 6.147 2.5475v-13.0697h8.695v35.997zm0-9.1931v-6.5902c-.664-1.3291-2.159-2.326-3.821-2.326-2.99 0-4.763 2.4368-4.763 5.6488s1.773 5.5934 4.763 5.5934c1.717 0 3.157-.9415 3.821-2.326zm35.471-2.049h-3.101v11.2421h-8.806v-34.0033h15.285c7.31 0 12.35 4.1535 12.35 11.5744 0 5.1503-2.603 8.6947-6.757 10.2453l7.975 12.1836h-9.858zm-3.101-15.2849v8.1962h5.538c3.156 0 4.596-1.606 4.596-4.0981s-1.44-4.0981-4.596-4.0981zm36.957 17.8323h8.03c-.886 5.7597-5.206 9.2487-11.685 9.2487-7.643 0-12.682-5.2613-12.682-13.0145 0-7.6978 5.316-13.0143 12.515-13.0143 7.643 0 11.962 5.095 11.962 12.5159v2.1598h-16.115c.277 2.9905 1.827 4.5965 4.32 4.5965 1.772 0 3.156-.7753 3.655-2.4921zm-3.822-10.0237c-2.049 0-3.433 1.2737-3.987 3.5997h7.532c-.111-2.0491-1.385-3.5997-3.545-3.5997zm30.98 27.5234v-10.799c-1.163 1.329-3.6 2.548-6.147 2.548-7.2 0-11.132-5.9259-11.132-13.0145 0-7.144 3.932-13.0143 11.132-13.0143 2.547 0 4.984 1.2184 6.147 2.5475v-1.9937h8.695v33.726zm0-17.9981v-6.5902c-.665-1.3291-2.105-2.326-3.821-2.326-2.991 0-4.763 2.4368-4.763 5.6488s1.772 5.5934 4.763 5.5934c1.661 0 3.156-.9415 3.821-2.326zm36.789-15.7279v24.921h-8.695v-2.16c-1.329 1.551-3.821 2.714-6.646 2.714-5.482 0-8.75-3.5999-8.75-9.1379v-16.3371h8.64v14.288c0 2.1045.996 3.5997 3.212 3.5997 1.606 0 3.101-1.0522 3.544-2.769v-15.1187zm19.084 16.2263h8.03c-.886 5.7597-5.206 9.2487-11.685 9.2487-7.643 0-12.682-5.2613-12.682-13.0145 0-7.6978 5.316-13.0143 12.515-13.0143 7.643 0 11.963 5.095 11.963 12.5159v2.1598h-16.116c.277 2.9905 1.828 4.5965 4.32 4.5965 1.772 0 3.156-.7753 3.655-2.4921zm-3.822-10.0237c-2.049 0-3.433 1.2737-3.987 3.5997h7.532c-.111-2.0491-1.385-3.5997-3.545-3.5997zm13.428 11.0206h8.474c.387 1.3845 1.606 2.1598 3.156 2.1598 1.44 0 2.548-.5538 2.548-1.7168 0-.9414-.72-1.2737-1.939-1.5506l-4.873-.9969c-4.154-.886-6.867-2.8797-6.867-7.2547 0-5.3165 4.762-8.4178 10.633-8.4178 6.812 0 10.522 3.1567 11.297 8.0855h-8.03c-.277-1.0522-1.052-1.9937-3.046-1.9937-1.273 0-2.326.5538-2.326 1.6614 0 .7753.554 1.163 1.717 1.3845l4.929 1.163c4.541 1.0522 6.978 3.4335 6.978 7.4763 0 5.3168-4.818 8.2518-10.91 8.2518-6.369 0-10.965-2.88-11.741-8.2518zm27.538-.8861v-9.5807h-3.655v-6.7564h3.655v-6.8671h8.584v6.8671h5.205v6.7564h-5.205v8.307c0 1.9383.941 2.769 2.658 2.769.941 0 1.993-.2216 2.769-.5538v7.3654c-.997.443-2.88.775-4.818.775-5.871 0-9.193-2.769-9.193-9.0819z" fill="#d30001"/></svg>
</header>
<article>
<p><strong>The server cannot process the request due to a client error.</strong> Please check the request and try again. If you’re the application owner check the logs for more information.</p>
</article>
</main>
</body>
</html>
public/404.html
-148
View File
@@ -1,148 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>The page you were looking for doesn’t exist (404 Not found)</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<meta name="robots" content="noindex, nofollow">
<style>
:root {
--color-canvas: white;
--color-ink: oklch(26% 0.05 264);
--color-accent: oklch(57.02% 0.1895 260.46);
--stroke-width: clamp(4px, 0.25vw, 6vw);
--padding: clamp(2rem, 2vw, 8rem);
--text-large: clamp(6rem, 7vw, 6vw);
--text-medium: clamp(3rem, 3vw, 6vw);
--text-normal: clamp(1rem, 1.25vw, 6vw);
@media (prefers-color-scheme: dark) {
--color-canvas: oklch(20% 0.0195 232.58);
--color-ink: oklch(96.02% 0.0034 260);
--color-accent: oklch(74% 0.1293 256);
}
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
html {
font-size: 1.1875rem;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
background-color: var(--color-canvas);
color: var(--color-ink);
display: grid;
font-family: system-ui;
font-size: var(--text-normal);
font-style: normal;
font-weight: 700;
line-height: 1.375;
min-height: 100vh;
overflow: hidden;
justify-content: center;
padding-block-start: 20dvh;
text-rendering: optimizeLegibility;
text-size-adjust: none;
/* Cool wavy striped lines */
&:before {
--mask:
radial-gradient(6px at 50% calc(100% + 3px), #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px ,
radial-gradient(6px at 50% -3px, #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) 50% calc(50% + 3px)/16px 6px ;
-webkit-mask: var(--mask);
mask: var(--mask);
background: var(--color-accent);
content: "";
inset: 0;
opacity: 0.25;
position: absolute;
}
}
.error-page {
rotate: -8deg;
}
.error-page__logo {
--logo-size: 1.15em;
align-items: center;
display: flex;
text-align: center;
font-size: var(--text-medium);
justify-content: center;
margin-block-end: 0.5ch;
svg {
block-size: var(--logo-size);
inline-size: var(--logo-size);
display: block;
translate: 0 -10%;
}
}
.error-page__stamp {
align-items: center;
background-color: color-mix(in oklch, var(--color-canvas), transparent 50%);
border-radius: calc(var(--stroke-width) * 2);
border: calc(var(--stroke-width) * 1) dashed var(--color-accent);
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.25;
max-inline-size: 32ch;
padding: var(--padding);
position: relative;
text-align: center;
}
.error-page__title {
color: var(--color-accent);
font-size: var(--text-large);
font-weight: 900;
line-height: 1;
position: relative;
text-align: center;
text-transform: uppercase;
@supports (-webkit-text-stroke: 1px black) {
-webkit-text-stroke: var(--stroke-width) var(--color-accent);
-webkit-text-fill-color: transparent;
}
}
.error-page__subtitle {
color: var(--color-accent);
margin-block-end: 1ch;
}
.error-page__notes {
font-size: var(--text-sm);
font-weight: 500;
}
</style>
</head>
<body>
<header class="error-page">
<figure class="error-page__logo">
<svg fill="none" height="275" viewBox="0 0 202 275" width="202" xmlns="http://www.w3.org/2000/svg"><path d="m201 258c0 11.159-44.772 16-100 16-55.2285 0-100-4.841-100-16s44.7715-16 100-16c55.228 0 100 4.841 100 16z" fill="#000" opacity=".08"/><path clip-rule="evenodd" d="m144.805 2.24222c2.294-1.843841 5.681-1.617368 7.696.56152 2.014 2.17904 1.917 5.51121-.174 7.57326l-.209.1953-.012.0117c-.009.0075-.022.0181-.039.0332-.035.0309-.087.078-.156.1397-.138.1235-.344.309-.614.5508-.54.484-1.336 1.1979-2.353 2.1152-2.033 1.835-4.952 4.4821-8.487 7.7256-7.073 6.4897-16.602 15.357-26.441 24.8759-2.543 2.4612-4.066 5.7749-4.269 9.2891-.383 6.654-.719 11.235-1.012 17.6885 27.89.2759 50.213 1.9831 62.831 3.1963l2.598.2558.018.002c7.816.8155 13.555 7.8838 12.741 15.4687l.001.001c-3.418 33.6092-7.351 63.0722-10.988 87.6142.005.178.001.359-.012.54-.03.417-.11.819-.228 1.203-3.37 24.477-6.469 42.647-8.652 56.28-2.231 13.914-13.656 24.673-28.256 25.45h-.011c-24.343 1.247-48.8273 1.346-73.2036.126l-2.3589-.122c-14.5946-.782-26.0187-11.539-28.2492-25.453-2.1836-13.632-5.2839-31.801-8.6543-56.276-.1189-.385-.1974-.789-.2278-1.208-.0133-.182-.0178-.363-.013-.542-3.6384-24.542-7.5712-54.004-10.9942-87.6112l.0009-.001c-.814-7.5854 4.9246-14.6542 12.7413-15.4697l.0179-.002c12.5608-1.2701 37.7453-3.3397 69.6834-3.4824.3004-6.6424.644-11.4215 1.0396-18.2793.3592-6.2258 3.0569-12.1147 7.5909-16.5019 9.93-9.6079 19.535-18.5451 26.654-25.0772 3.561-3.2672 6.504-5.93628 8.557-7.78905 1.027-.9262 1.831-1.64876 2.38-2.14063.274-.24594.485-.43526.628-.56249.07-.06313.124-.111.161-.14356.018-.01633.033-.02867.043-.03711.004-.00412.007-.00855.01-.01074l.003-.00195.001-.00098zm-43.801 180.81978c-19.4 0-36.6494.529-49.0474 1.058-5.7553.246-10.4622.491-13.8495.684 3.0876 22.131 5.9039 38.413 7.9281 51.05l.0726.422c1.6067 8.833 8.807 15.28 17.7176 15.757l2.319.12c22.4196 1.123 44.9546 1.111 67.4046.099l4.644-.225c9.05-.486 16.331-7.128 17.781-16.173 2.024-12.637 4.838-28.919 7.925-51.05-3.387-.193-8.094-.438-13.849-.684-12.398-.529-29.647-1.058-49.046-1.058zm-3.9481-99.0874c-31.2286.1604-55.8254 2.1836-68.0558 3.42-1.5771.1659-2.8714 1.698-2.7906 3.2392l.0119.1494.005.0489c3.2299 31.7109 6.9166 59.5089 10.3775 83.0379.0293-.002.0589-.003.0885-.005 3.4785-.201 8.5176-.468 14.7777-.735 11.3621-.485 26.7597-.968 44.1622-1.054-.0045-.387-.0095-.861-.015-1.42-.017-1.739-.0366-4.292-.0487-7.56-.0243-6.536-.0177-13.933.1084-25.385.1704-15.474.5585-32.713 1.3789-53.7364zm11.2131.0235c-.826 21.0519-1.215 38.3339-1.386 53.8319-.125 11.393-.133 18.735-.109 25.226.012 3.245.032 5.777.049 7.495.006.614.011 1.125.016 1.527 17.212.092 32.437.571 43.698 1.052 6.26.267 11.3.534 14.779.735.029.002.057.003.086.005 3.46-23.529 7.146-51.326 10.372-83.037l.005-.0498c.176-1.5891-1.149-3.2156-2.776-3.3886-11.793-1.1922-35.083-3.1168-64.734-3.3965z" fill="var(--color-ink)" fill-rule="evenodd"/><path d="m101.001 183.062c19.505 0 36.849.529 49.315 1.058 5.786.246 10.519.491 13.924.684-3.103 22.131-5.933 38.413-7.968 51.05-1.458 9.045-8.779 15.687-17.879 16.173l-4.669.225c-22.573 1.012-45.231 1.024-67.7731-.099l-2.3317-.12c-8.9591-.477-16.199-6.924-17.8145-15.757l-.073-.422c-2.0352-12.637-4.867-28.919-7.9714-51.05 3.4057-.193 8.1386-.438 13.9252-.684 12.4657-.529 29.8098-1.058 49.3155-1.058z" fill="#68abe9"/><path d="m56.6279 193.649c2.9632-.313 5.6326 1.728 6.0947 4.602l.0376.281.2601 2.344c1.2836 11.298 2.3362 16.481 4.1927 23.957.6454 2.598.9475 4.032 1.2977 5.222.0161.055.0326.106.0475.155.8538.102 2.113.162 4.2422.244 11.6052.444 23.1581.591 34.6066.001 3.073-.159 5.693 2.172 5.854 5.206.16 3.033-2.2 5.621-5.272 5.779-11.9181.615-23.8417.456-35.6199.005-2.1972-.084-4.2851-.159-5.9622-.427-1.7844-.284-3.9749-.903-5.7881-2.707-1.6614-1.653-2.3709-3.704-2.807-5.186-.4338-1.474-.8976-3.572-1.4193-5.673-1.9779-7.965-3.1089-13.606-4.441-25.321l-.269-2.427-.0238-.282c-.1652-2.905 2.0059-5.459 4.9692-5.773z" fill="#fff" opacity=".15"/></svg>
Fizzy
</figure>
<header class="error-page__stamp">
<div class="error-page__title" data-text="<%= card.closure.reason %>">404</div>
<div class="error-page__subtitle">Sorry, that page does‘t exist!</div>
<div class="error-page__notes">You may have mistyped the address or the page may have moved</div>
</header>
</header>
</body>
</html>
public/406-unsupported-browser.html
-156
View File
@@ -1,156 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Your browser is not supported (406)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
--lch-ink: 0% 0 0;
--lch-ink-lighter: 75% 0.005 96;
--lch-ink-inverted: 100% 0 0;
--color-border: oklch(var(--lch-ink-lighter));
--color-canvas: oklch(var(--lch-ink-inverted));
--color-text: oklch(var(--lch-ink));
--btn-size: 2.65em;
background-color: var(--color-canvas);
block-size: 100dvh;
color: var(--color-text);
display: grid;
margin: 0;
padding: 0;
place-items: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@media (prefers-color-scheme: dark) {
--lch-ink: 100% 0 0;
--lch-ink-lighter: 45% 0 0;
--lch-ink-inverted: 0% 0 0;
}
}
svg {
fill: var(--color-text);
@media (prefers-color-scheme: dark) {
fill: var(--color-text);
}
}
.error {
align-items: center;
display: flex;
flex-direction: column;
gap: 2em;
justify-content: start;
margin-block: 2dvh 15dvh;
}
.error__img {
aspect-ratio: 1;
background-color: var(--color-text);
block-size: auto;
border-radius: 50%;
display: grid;
place-items: center;
inline-size: 30dvh;
svg {
fill: var(--color-canvas);
grid-area: 1/1;
max-inline-size: 66%;
@media (prefers-color-scheme: dark) {
fill: var(--color-canvas);
}
}
}
p {
max-inline-size: 50ch;
padding: 0 3dvw;
margin-inline: auto;
}
.buttons {
display: flex;
flex-direction: row;
gap: 1em;
justify-content: center;
}
.btn {
align-items: center;
aspect-ratio: 1;
background-color: var(--color-canvas);
block-size: var(--btn-size);
border-radius: 50%;
border: 1px solid var(--color-border);
color: var(--color-text);
cursor: pointer;
display: grid;
font-weight: 600;
font-size: 1.4rem;
gap: 0.5em;
inline-size: var(--btn-size);
justify-content: center;
padding: 0;
place-items: center;
text-align: center;
svg {
-webkit-touch-callout: none;
grid-area: 1/1;
inline-size: 1.3em;
max-inline-size: unset;
user-select: none;
}
}
.for-screen-reader {
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="error">
<div class="error__img">
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-label="Your browser is not supported">
<path d="m17.2 14.4c.1-.8.2-1.6.2-2.4s-.1-1.6-.2-2.4h4.1c.2.8.3 1.6.3 2.4s-.1 1.6-.3 2.4m-6.2 6.7c.7-1.3 1.3-2.8 1.7-4.3h3.5c-1.1 2-3 3.5-5.2 4.3m-.3-6.7h-5.6c-.1-.8-.2-1.6-.2-2.4s.1-1.6.2-2.4h5.6c.1.8.2 1.6.2 2.4s-.1 1.6-.2 2.4m-2.8 7.2c-1-1.4-1.8-3-2.3-4.8h4.6c-.5 1.7-1.3 3.3-2.3 4.8m-4.8-14.4h-3.5c1.1-2 3-3.5 5.2-4.3-.7 1.4-1.3 2.8-1.7 4.3m-3.5 9.6h3.5c.4 1.5 1 2.9 1.7 4.3-2.2-.8-4.1-2.3-5.2-4.3m-1-2.4c-.2-.8-.3-1.6-.3-2.4s.1-1.6.3-2.4h4.1c-.1.8-.2 1.6-.2 2.4s.1 1.6.2 2.4m5.2-12c1 1.4 1.8 3 2.3 4.8h-4.6c.5-1.7 1.3-3.3 2.3-4.8m8.3 4.8h-3.5c-.4-1.5-.9-2.9-1.7-4.3 2.2.8 4.1 2.3 5.2 4.3m-8.3-7.2c-6.6 0-12 5.4-12 12s5.4 12 12 12 12-5.4 12-12-5.4-12-12-12z"/>
</svg>
</div>
<a href="/" class="btn" autofocus="true">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="m21.864 9.5h-11.607a.25.25 0 0 1 -.174-.43l3.864-3.721a2.609 2.609 0 0 0 -.075-3.682 2.612 2.612 0 0 0 -3.68-.077l-9.792 9.699a1 1 0 0 0 -.008 1.411l9.625 9.724a2.66 2.66 0 0 0 3.755-3.757l-3.729-3.733a.25.25 0 0 1 .177-.427h11.673c1.556 0 2-1.675 2-2.51a2.28 2.28 0 0 0 -2.029-2.497z" />
</svg>
<span class="for-screen-reader">Go back</span>
</a>
<div>
<p>🇺🇸 Upgrade to a supported web browser. Fizzy requires a modern web browser. Please use one of the browsers listed below and make sure auto-updates are enabled.</p>
<p>🇪🇸 Actualiza a un navegador web compatible. Fizzy requiere un navegador web moderno. Utiliza uno de los navegadores listados a continuación y asegúrate de que las actualizaciones automáticas estén habilitadas.</p>
<p>🇫🇷 Mettez à jour vers un navigateur web pris en charge. Fizzy nécessite un navigateur web moderne. Veuillez utiliser l'un des navigateurs répertoriés ci-dessous et assurez-vous que les mises à jour automatiques sont activées.</p>
<p>🇮🇳 समर्थित वेब ब्राउज़र में अपग्रेड करें। Fizzy को एक आधुनिक वेब ब्राउज़र की आवश्यकता है। कृपया नीचे सूचीबद्ध ब्राउज़रों में से कोई एक का उपयोग करें और सुनिश्चित करें कि स्वचालित अपडेट्स सक्षम हैं।</p>
<p>🇩🇪 Aktualisieren Sie auf einen unterstützten Webbrowser. Fizzy erfordert einen modernen Webbrowser. Verwenden Sie bitte einen der unten aufgeführten Browser und stellen Sie sicher, dass automatische Updates aktiviert sind.</p>
<p>🇧🇷 Atualize para um navegador compatível. O Fizzy requer um navegador moderno. Por favor, use um dos navegadores listados abaixo e certifique-se de que as atualizações automáticas estão ativadas.</p>
<p><strong>Safari 17.2+, Chrome 119+, Firefox 121+, Opera 104+</strong></p>
</div>
</div>
</body>
</html>
public/422.html
-114
View File
File diff suppressed because one or more lines are too long
public/500.html
-114
View File
File diff suppressed because one or more lines are too long