Added custom error messages.
This commit is contained in:
Martin Edenhofer
parent
b5189dfebb
commit
84502312e4
11 changed files with 108 additions and 71 deletions
|
|
@ -1,26 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The page you were looking for doesn't exist (404)</title>
|
||||
<style type="text/css">
|
||||
body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
|
||||
div.dialog {
|
||||
width: 25em;
|
||||
padding: 0 4em;
|
||||
margin: 4em auto 0 auto;
|
||||
border: 1px solid #ccc;
|
||||
border-right-color: #999;
|
||||
border-bottom-color: #999;
|
||||
}
|
||||
h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
|
||||
</style>
|
||||
</head>
|
||||
<html class="dark">
|
||||
<meta charset="utf-8">
|
||||
<title>404: Not Found</title>
|
||||
<link rel="stylesheet" href="/assets/error/style.css">
|
||||
|
||||
<body>
|
||||
<!-- This file lives in public/404.html -->
|
||||
<div class="dialog">
|
||||
<h1>The page you were looking for doesn't exist.</h1>
|
||||
<p>You may have mistyped the address or the page may have moved.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<h1>404: Requested Page was not found.</h1>
|
||||
<div class="error-image" style="background-image: url(/assets/error/error-2.svg)"></div>
|
||||
<p>Sorry, but the Phoenix is not able to find your page. Try checking the URL for errors.</p>
|
||||
</html>
|
||||
|
|
@ -1,26 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The change you wanted was rejected (422)</title>
|
||||
<style type="text/css">
|
||||
body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
|
||||
div.dialog {
|
||||
width: 25em;
|
||||
padding: 0 4em;
|
||||
margin: 4em auto 0 auto;
|
||||
border: 1px solid #ccc;
|
||||
border-right-color: #999;
|
||||
border-bottom-color: #999;
|
||||
}
|
||||
h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
|
||||
</style>
|
||||
</head>
|
||||
<html class="dark">
|
||||
<meta charset="utf-8">
|
||||
<title>422: Not Found</title>
|
||||
<link rel="stylesheet" href="/assets/error/style.css">
|
||||
|
||||
<body>
|
||||
<!-- This file lives in public/422.html -->
|
||||
<div class="dialog">
|
||||
<h1>The change you wanted was rejected.</h1>
|
||||
<p>Maybe you tried to change something you didn't have access to.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<h1>422: The change you wanted was rejected.</h1>
|
||||
<div class="error-image" style="background-image: url(/assets/error/error-1.svg)"></div>
|
||||
<p>Maybe you tried to change something you didn't have access to.</p>
|
||||
</html>
|
||||
|
|
@ -1,25 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>We're sorry, but something went wrong (500)</title>
|
||||
<style type="text/css">
|
||||
body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
|
||||
div.dialog {
|
||||
width: 25em;
|
||||
padding: 0 4em;
|
||||
margin: 4em auto 0 auto;
|
||||
border: 1px solid #ccc;
|
||||
border-right-color: #999;
|
||||
border-bottom-color: #999;
|
||||
}
|
||||
h1 { font-size: 100%; color: #f00; line-height: 1.5em; }
|
||||
</style>
|
||||
</head>
|
||||
<html class="dark">
|
||||
<meta charset="utf-8">
|
||||
<title>500: Something went wrong</title>
|
||||
<link rel="stylesheet" href="/assets/error/style.css">
|
||||
|
||||
<body>
|
||||
<!-- This file lives in public/500.html -->
|
||||
<div class="dialog">
|
||||
<h1>We're sorry, but something went wrong.</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<h1>500: We're sorry, but something went wrong.</h1>
|
||||
<div class="error-image" style="background-image: url(/assets/error/error-2.svg)"></div>
|
||||
<p>We're sorry, but something went wrong.</p>
|
||||
</html>
|
||||
1
public/assets/error/error-1.svg
Normal file
1
public/assets/error/error-1.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 650" enable-background="new 0 0 750 650"><path fill="#ceb249" d="m402.63 286.83l8.93 173.24-64-218.41z"/><path fill="#f8e192" d="m402.63 286.83l-54.69-.1 121.23 107.4z"/><path fill="#e09b16" d="m406.93 210.14l-40.31 17.79 11.17 89.38 24.31-37.54z"/><path fill="#f3d14f" d="m402.63 286.83l-32.25-53.9-19.02 55.94.23 207.07z"/><path opacity=".15" fill="#fff" d="m402.63 286.83l2.86 50.87-57.55-50.97"/><path fill="#e09b16" d="m406.25 122.5l-31.25-28.75-31.25 28.75-39.16 51.28 40.37 109.22h30.04 30.04l40.37-109.22z"/><path fill="#3f2e20" d="m442.5 227.5l-67.5 20-67.5-20 67.5-15z"/><g fill="#dfe0e1"><ellipse cx="409.5" cy="229.5" rx="22.5" ry="30"/><ellipse cx="345.5" cy="227.5" rx="22.5" ry="30"/></g><ellipse fill="#f8f9fa" cx="375" cy="220.5" rx="22.5" ry="30"/><path fill="#5d3d1b" d="m405.04 283l37.46-55.5-67.5 20-67.5-20 37.46 55.5z"/><path fill="#835c3a" d="m375 247.5l-67.5-20 37.46 55.5h30.04v-35.5"/><path fill="#704c2a" d="m442.5 227.5l-67.5 20v35.5h30.04z"/><g fill="#389cd8"><path d="m552.5 283h-130l-2.5 10h132.5 5v-5c0-2.75-2.25-5-5-5"/><path d="m347.5 283h60v10h-60z"/></g><path fill="#1e5a6e" d="m307.07 248.12l9.67-41.11 56.27 81.16z"/><path fill="#c8431c" d="m343.75 122.5l19.33 71.58 43.17-71.58z"/><path fill="#af2527" d="m375 190.4l-31.25-67.9h62.5"/><path fill="#cb4f83" d="m375 93.75l-31.25 28.75 31.25 36.25 31.25-36.25z"/><path fill="#c8431c" d="m375 93.75l.01 28.75 12.72-59.45z"/><path fill="#af2527" d="m375 93.75l.01 28.75 24.05-59.45z"/><path fill="#3aa3c2" d="m406.25 122.5l39.16 51.28"/><path opacity=".15" fill="#fff" d="m373.01 288.17l-65.94-40.05 3.33-18.51z"/><path fill="#7db3ca" d="m343.75 122.5l-36.68 125.62-2.48-74.34z"/><g fill="#c8431c"><path d="m407.5 303l5-20h-10z"/><path d="m397.5 303l5-20h-10z"/></g><path fill="#cb4f83" d="m412.5 283h-20l4-8h12z"/><path fill="#c8431c" d="m402.5 305l5-24h-10z"/><path opacity=".15" fill="#fff" d="m402.5 305l5-24h-10z"/><g fill="#c8431c"><path d="m342.5 303l-5-20h10z"/><path d="m352.5 303l-5-20h10z"/></g><path fill="#cb4f83" d="m337.5 283h20l-4-8h-12z"/><path fill="#c8431c" d="m347.5 305l-5-24h10z"/><path opacity=".15" fill="#fff" d="m347.5 305l-5-24h10z"/><path fill="#c7e4f1" d="m406.25 122.5l-91.1 197.92 130.26-146.64z"/><path fill="#3aa3c2" d="m315.15 320.42l84.18-132.07 6.92-65.85"/><path opacity=".15" fill="#fff" d="m406.25 122.5l39.16 51.28-46.08 14.57z"/><path fill="#389cd8" d="m197.5 283h125l-4.5 10h-120.5-5v-5c0-2.75 2.25-5 5-5"/><g fill="none" stroke="#a1a4a7" stroke-width="2" stroke-miterlimit="10"><path d="m472.5 247.5v-40"/><path d="m482.5 247.5v-40"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
1
public/assets/error/error-2.svg
Normal file
1
public/assets/error/error-2.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 650" enable-background="new 0 0 750 650"><defs><use id="1" opacity=".5" xlink:href="#2"/><path id="2" d="m340 259.82h70v60h-70z"/><clipPath id="0"><use xlink:href="#1"/></clipPath></defs><path fill="#3aa3c2" d="m503.63 133.93l-87.89 145.47-6.4-37.56z"/><path fill="#67878f" d="m483.86 149.06l89.12 56.91-116.42-35.39z"/><path fill="#1e5a6e" d="m483.86 149.06l25.52 102.55-52.82-81.03z"/><path opacity=".15" fill="#fff" d="m475.6 162.83l9.34-9.61 24.44 98.39z"/><path fill="#ceb249" d="m433.17 215.46l60.57-162.56-126.68 189.09z"/><path fill="#f8e192" d="m433.17 215.46l-52.2-16.34 147.9-66.01z"/><path fill="#7db3ca" d="m413.39 244.36l55.36-112.95-36.67 138.54z"/><path fill="#f3d14f" d="m433.17 215.46l-46.96 41.72-5.24-58.06 66.35-198.44z"/><path fill="#3aa3c2" d="m468.75 131.41l98.3-16.15-117.4 55.09z"/><path fill="#c7e4f1" d="m322.42 244.31l146.33-112.9-74.78 152.51z"/><g fill="#dc8c18"><path d="m493.75 271.32h-25v-30z"/><path d="m256 271.32h25v-30z"/></g><path fill="#a27c4c" d="m387.5 614.32l-25 35v-270h25z"/><path fill="#dc8c18" d="m452.5 374.32c0 2.75-2.25 5-5 5h-145c-2.75 0-5-2.25-5-5v-15c0-2.75 2.25-5 5-5h145c2.75 0 5 2.25 5 5v15"/><path fill="#e7b141" d="m379.77 198.83c-2.622-.828-6.913-.828-9.536 0l-85.46 26.988c-2.623.828-4.768 3.756-4.768 6.506v130c0 2.75 2.25 5 5 5h180c2.75 0 5-2.25 5-5v-130c0-2.75-2.146-5.678-4.768-6.506l-85.46-26.988"/><path opacity=".15" fill="#fff" d="m375 218.57l-71.25 22.5v110h142.5v-110z"/><g fill="#dc9118"><path opacity=".2" d="m446.25 241.07v110l18.75 16.25c2.75 0 5-2.25 5-5v-130c0-2.75-2.146-5.678-4.768-6.506l-18.982 15.256"/><path opacity=".2" d="m284.77 225.81c-2.621.828-4.768 3.756-4.768 6.506v130c0 2.75 2.25 5 5 5l18.75-16.25v-110l-18.982-15.256"/><path opacity=".9" d="m303.75 351.07l-18.75 16.25h90v-16.25z"/><path opacity=".65" d="m370.23 198.83l-85.46 26.988 18.982 15.256 71.25-22.5v-20.365c-1.729 0-3.457.207-4.767.621"/><path opacity=".6" d="m446.25 351.07l18.75 16.25h-90v-16.25z"/><path opacity=".9" d="m379.77 198.83l85.46 26.988-18.982 15.256-71.25-22.5v-20.365c1.728 0 3.456.207 4.767.621"/></g><g fill="#36af6a"><path d="m347.5 604.32h-150c-2.75 0-5 2.25-5 5v5h5 150 5v-10h-5"/><path d="m402.5 604.32h150c2.75 0 5 2.25 5 5v5h-5-150-5v-10h5"/></g><path fill="#67878f" d="m422.5 324.82c0 2.75-2.25 5-5 5h-85c-2.75 0-5-2.25-5-5v-70c0-2.75 2.25-5 5-5h85c2.75 0 5 2.25 5 5v70"/><ellipse fill="#444a4f" cx="374.94" cy="340.48" rx="5" ry="6"/><use fill="#7db3ca" xlink:href="#2"/><path opacity=".3" fill="#1e5a6e" d="m422.5 254.82c0-2.75-2.25-5-5-5h-85c-2.75 0-5 2.25-5 5l12.5 5h70l12.5-5m-95 70c0 2.75 2.25 5 5 5h85c2.75 0 5-2.25 5-5l-12.5-5h-70l-12.5 5"/><g opacity=".5"><g clip-path="url(#0)"><path fill="#c8431c" d="m413.81 318.97l6.71-81.51 41.11-41.34z"/><path fill="#e09b16" d="m376.48 236.01l44.04 1.45 28.69-85.39-38.18 23.3z"/><g fill="#c8431c"><path d="m333.56 322.45l15.12-12.04 36.77 9.6z"/><path d="m355.04 298.93l41.81-65.34-3.03 25.14"/></g><path opacity=".15" fill="#fff" d="m313.46 233.81l134.25 4.24-33.9 80.92z"/><path fill="#e09b16" d="m350.77 301.33l43.78 28.12 43.56-67.74-104-25.5z"/><path fill="#cb4f83" d="m410.4 304.77l-15.03 25.52-44.6-28.96-11.33-42.89 49.11 27.8z"/><path fill="#c7e4f1" d="m318.46 247.61l150.29-116.2-80.2 154.83z"/><path fill="#af2527" d="m396.71 322.99l-77.18-16.89 31.24-4.77z"/></g></g><use opacity=".8" fill="#1e5a6e" xlink:href="#2"/><g fill="none" stroke="#fff" stroke-width="2" stroke-miterlimit="10"><path d="m355 284.82h40"/><path d="m355 294.82h40"/></g></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
1
public/assets/error/error-3.svg
Normal file
1
public/assets/error/error-3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.4 KiB |
1
public/assets/error/error-4.svg
Normal file
1
public/assets/error/error-4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
BIN
public/assets/error/firasans-regular-webfont.eot
Executable file
BIN
public/assets/error/firasans-regular-webfont.eot
Executable file
Binary file not shown.
BIN
public/assets/error/firasans-regular-webfont.ttf
Executable file
BIN
public/assets/error/firasans-regular-webfont.ttf
Executable file
Binary file not shown.
BIN
public/assets/error/firasans-regular-webfont.woff
Executable file
BIN
public/assets/error/firasans-regular-webfont.woff
Executable file
Binary file not shown.
80
public/assets/error/style.css
Normal file
80
public/assets/error/style.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
@font-face {
|
||||
font-family: 'Fira Sans';
|
||||
src: url('firasans-regular-webfont.eot');
|
||||
src: url('firasans-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('firasans-regular-webfont.woff') format('woff'),
|
||||
url('firasans-regular-webfont.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Fira Sans";
|
||||
height: 100%;
|
||||
color: #8c959c;
|
||||
background: #f8f9fa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background: #444a4f;
|
||||
color: #919497;
|
||||
}
|
||||
|
||||
body {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
margin: 0;
|
||||
padding: 40px 10px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: #444a4f;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.dark h1 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f1d158;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: #ccb250;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 400px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.error-image {
|
||||
height: 650px;
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
Loading…
Reference in a new issue