miklo
/
spejstore-new
forked from wiktor/spejstore-new
1
0
Fork 0
Code Pull Requests Activity

errors: add cute error pages

This commit is contained in:
Dariusz Niemczyk 2023-08-25 21:04:43 +02:00
parent 820f04cc01
commit 401fcc088d
No known key found for this signature in database
6 changed files with 272 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/fonts/pressstart2p-regular-webfont.woff Normal file
View File

Binary file not shown.

BIN
static/fonts/pressstart2p-regular-webfont.woff2 Normal file
View File

Binary file not shown.

68
templates/400.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<style>
@font-face {
font-family: "Press Start 2P";
src: url("static/fonts/pressstart2p-regular-webfont.woff2") format("woff2"),
url("static/fonts/pressstart2p-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
:root {
--color: #54fe55;
--glowSize: 10px;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
* {
font-family: "Press Start 2P", cursive;
box-sizing: border-box;
}
#app {
padding: 1rem;
background: black;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
color: var(--color);
text-shadow: 0px 0px var(--glowSize);
font-size: 6rem;
flex-direction: column;
.txt {
font-size: 1.8rem;
}
}
@keyframes blink {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.blink {
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
<html lang="en">
<div id="app">
<div>400</div>
<div class="txt">Invalid request<span class="blink">_</span></div>
</div>
</html>

68
templates/403.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<style>
@font-face {
font-family: "Press Start 2P";
src: url("static/fonts/pressstart2p-regular-webfont.woff2") format("woff2"),
url("static/fonts/pressstart2p-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
:root {
--color: #54fe55;
--glowSize: 10px;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
* {
font-family: "Press Start 2P", cursive;
box-sizing: border-box;
}
#app {
padding: 1rem;
background: black;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
color: var(--color);
text-shadow: 0px 0px var(--glowSize);
font-size: 6rem;
flex-direction: column;
.txt {
font-size: 1.8rem;
}
}
@keyframes blink {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.blink {
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
<html lang="en">
<div id="app">
<div>403</div>
<div class="txt">Forbidden<span class="blink">_</span></div>
</div>
</html>

68
templates/404.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<style>
@font-face {
font-family: "Press Start 2P";
src: url("static/fonts/pressstart2p-regular-webfont.woff2") format("woff2"),
url("static/fonts/pressstart2p-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
:root {
--color: #54fe55;
--glowSize: 10px;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
* {
font-family: "Press Start 2P", cursive;
box-sizing: border-box;
}
#app {
padding: 1rem;
background: black;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
color: var(--color);
text-shadow: 0px 0px var(--glowSize);
font-size: 6rem;
flex-direction: column;
.txt {
font-size: 1.8rem;
}
}
@keyframes blink {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.blink {
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
<html lang="en">
<div id="app">
<div>400</div>
<div class="txt">Not found<span class="blink">_</span></div>
</div>
</html>

68
templates/500.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<style>
@font-face {
font-family: "Press Start 2P";
src: url("static/fonts/pressstart2p-regular-webfont.woff2") format("woff2"),
url("static/fonts/pressstart2p-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
:root {
--color: #54fe55;
--glowSize: 10px;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
* {
font-family: "Press Start 2P", cursive;
box-sizing: border-box;
}
#app {
padding: 1rem;
background: black;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
color: var(--color);
text-shadow: 0px 0px var(--glowSize);
font-size: 6rem;
flex-direction: column;
.txt {
font-size: 1.8rem;
}
}
@keyframes blink {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.blink {
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
<html lang="en">
<div id="app">
<div>500</div>
<div class="txt">Something went wrong...<span class="blink">_</span></div>
</div>
</html>