Update layout of error pages
This commit is contained in:
Andreas Nedbal
Andreas Nedbal
parent
fcc03c6c06
commit
247d84415a
151
public/404.html
151
public/404.html
|
|
@ -1,56 +1,139 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Page not found!!1! (404)</title>
|
<meta charset="utf-8">
|
||||||
|
<title>Page not found!</title>
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<style>
|
<style>
|
||||||
body {
|
:root {
|
||||||
padding: 0;
|
--primary: #5e35b1;
|
||||||
margin: 0;
|
--muted: 108, 117, 125;
|
||||||
overflow: hidden;
|
--background: #f0edf4;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
*, *:before, *:after {
|
||||||
font-family: sans-serif;
|
box-sizing: border-box;
|
||||||
font-size: 1.5em;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 > small {
|
a {
|
||||||
font-size: 0.7em;
|
color: var(--primary);
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
span#links {
|
|
||||||
font-family: sans-serif;
|
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-top: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span#links > a {
|
|
||||||
color: #5E35B1;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-device-width: 480px) {
|
body {
|
||||||
canvas {
|
padding: 2rem 1rem 1rem 1rem;
|
||||||
display: none;
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||||
|
background-color: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-primary {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-muted {
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-weight-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-none {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links li:not(:last-child):after {
|
||||||
|
content: ' • ';
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-0 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-0 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container {
|
||||||
|
display:flex;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container picture {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container picture img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
body {
|
||||||
|
padding: 3rem 1rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1::after {
|
.error-artwork-container picture {
|
||||||
content: ' ...there is nothing here if you are on a mobile device';
|
width: 576px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding: 5rem 1rem 3rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container picture {
|
||||||
|
width: 768px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="canvas"></canvas>
|
<div class="error-artwork-container">
|
||||||
<h1>404. It dun goofed. <small>But play some Pong while you're at it.</small></h1><span id="links"><a href="https://github.com/Retrospring/retrospring/issues">Is it a bug?</a> · <a href="https://retrospring.net">Back to Retrospring</a></span>
|
<picture>
|
||||||
<script type="text/javascript">
|
<source
|
||||||
function paintCanvas(){ctx.fillStyle="#5E35B1",ctx.fillRect(0,0,W,H)}function Paddle(a){this.h=5,this.w=150,this.x=W/2-this.w/2,this.y="top"==a?0:H-this.h}function createParticles(a,b,c){this.x=a||0,this.y=b||0,this.radius=1.2,this.vx=-1.5+3*Math.random(),this.vy=c*Math.random()*1.5}function draw(){paintCanvas();for(var a=0;a<paddles.length;a++)p=paddles[a],ctx.fillStyle="white",ctx.fillRect(p.x,p.y,p.w,p.h);ball.draw(),update()}function increaseSpd(){points%4==0&&Math.abs(ball.vx)<15&&(ball.vx+=ball.vx<0?-1:1,ball.vy+=ball.vy<0?-2:2)}function trackPosition(a){mouse.x=a.pageX,mouse.y=a.pageY}function update(){if(updateScore(),mouse.x&&mouse.y)for(var a=1;a<paddles.length;a++)p=paddles[a],p.x=mouse.x-p.w/2;if(ball.x+=ball.vx,ball.y+=ball.vy,p1=paddles[1],p2=paddles[2],collides(ball,p1)?collideAction(ball,p1):collides(ball,p2)?collideAction(ball,p2):(ball.y+ball.r>H?(ball.y=H-ball.r,gameOver()):ball.y<0&&(ball.y=ball.r,gameOver()),ball.x+ball.r>W?(ball.vx=-ball.vx,ball.x=W-ball.r):ball.x-ball.r<0&&(ball.vx=-ball.vx,ball.x=ball.r)),1==flag)for(var b=0;b<particlesCount;b++)particles.push(new createParticles(particlePos.x,particlePos.y,multiplier));emitParticles(),flag=0}function collides(a,b){return a.x+ball.r>=b.x&&a.x-ball.r<=b.x+b.w?a.y>=b.y-b.h&&b.y>0?(paddleHit=1,!0):a.y<=b.h&&0==b.y?(paddleHit=2,!0):!1:void 0}function collideAction(a,b){a.vy=-a.vy,1==paddleHit?(a.y=b.y-b.h,particlePos.y=a.y+a.r,multiplier=-1):2==paddleHit&&(a.y=b.h+a.r,particlePos.y=a.y-a.r,multiplier=1),points++,increaseSpd(),collision&&(points>0&&collision.pause(),collision.currentTime=0,collision.play()),particlePos.x=a.x,flag=1}function emitParticles(){for(var a=0;a<particles.length;a++)par=particles[a],ctx.beginPath(),ctx.fillStyle="white",par.radius>0&&ctx.arc(par.x,par.y,par.radius,0,2*Math.PI,!1),ctx.fill(),par.x+=par.vx,par.y+=par.vy,par.radius=Math.max(par.radius-.05,0)}function updateScore(){ctx.fillStlye="white",ctx.font="16px Arial, sans-serif",ctx.textAlign="left",ctx.textBaseline="top",ctx.fillText("Score: "+points,20,20)}function gameOver(){ctx.fillStlye="white",ctx.font="20px Arial, sans-serif",ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillText("Game Over - You scored "+points+" points!",W/2,H/2+25),cancelRequestAnimFrame(init),over=1,restartBtn.draw()}function animloop(){init=requestAnimFrame(animloop),draw()}function startScreen(){draw(),startBtn.draw()}function btnClick(a){{var b=a.pageX;a.pageY}b>=startBtn.x&&b<=startBtn.x+startBtn.w&&(animloop(),startBtn={}),1==over&&b>=restartBtn.x&&b<=restartBtn.x+restartBtn.w&&(ball.x=20,ball.y=20,points=0,ball.vx=4,ball.vy=8,animloop(),over=0)}window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){return window.setTimeout(a,1e3/60)}}(),window.cancelRequestAnimFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout}();var canvas=document.getElementById("canvas"),ctx=canvas.getContext("2d"),W=window.innerWidth,H=window.innerHeight/1.09,particles=[],ball={},paddles=[2],mouse={},points=0,fps=60,particlesCount=20,flag=0,particlePos={},multipler=1,startBtn={},restartBtn={},over=0,init,paddleHit;canvas.addEventListener("mousemove",trackPosition,!0),canvas.addEventListener("mousedown",btnClick,!0),collision=document.getElementById("collide"),canvas.width=W,canvas.height=H,paddles.push(new Paddle("bottom")),paddles.push(new Paddle("top")),ball={x:50,y:50,r:5,c:"white",vx:4,vy:8,draw:function(){ctx.beginPath(),ctx.fillStyle=this.c,ctx.arc(this.x,this.y,this.r,0,2*Math.PI,!1),ctx.fill()}},startBtn={w:100,h:50,x:W/2-50,y:H/2-25,draw:function(){ctx.strokeStyle="white",ctx.lineWidth="2",ctx.strokeRect(this.x,this.y,this.w,this.h),ctx.font="18px Arial, sans-serif",ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStlye="white",ctx.fillText("Start",W/2,H/2)}},restartBtn={w:100,h:50,x:W/2-50,y:H/2-50,draw:function(){ctx.strokeStyle="white",ctx.lineWidth="2",ctx.strokeRect(this.x,this.y,this.w,this.h),ctx.font="18px Arial, sans-serif",ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStlye="white",ctx.fillText("Restart",W/2,H/2-25)}},startScreen();
|
srcset="/images/errors/small/404.png 576w,
|
||||||
|
/images/errors/medium/404.png 768w,
|
||||||
|
/images/errors/original/404.png 1200w">
|
||||||
|
<img src="/images/errors/small/404.png"/>
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<h1>
|
||||||
|
<span class="text-primary font-weight-bold">404</span>
|
||||||
|
<small class="text-muted">Page not found</small>
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Whatever you might have been searching for, it's not here!
|
||||||
|
</p>
|
||||||
|
<ul class="links">
|
||||||
|
<li class="d-none js-back-link">
|
||||||
|
<a href="javascript:history.back()">Back</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
if (window.history.length > 0) {
|
||||||
|
document.querySelector('.js-back-link').classList.toggle('d-none');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
164
public/422.html
164
public/422.html
|
|
@ -1,58 +1,150 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>REJECTED WOAH (422)</title>
|
<meta charset="utf-8">
|
||||||
|
<title>Whoops?</title>
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<style>
|
<style>
|
||||||
body {
|
:root {
|
||||||
padding: 0;
|
--primary: #5e35b1;
|
||||||
margin: 0;
|
--muted: 108, 117, 125;
|
||||||
overflow: hidden;
|
--background: #f0edf4;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
*, *:before, *:after {
|
||||||
font-family: sans-serif;
|
box-sizing: border-box;
|
||||||
font-size: 1.5em;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 > small {
|
a {
|
||||||
font-size: 0.7em;
|
color: var(--primary);
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
span#links {
|
|
||||||
font-family: sans-serif;
|
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-top: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span#links > a {
|
|
||||||
color: #5E35B1;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-device-width: 480px) {
|
body {
|
||||||
canvas {
|
padding: 2rem 1rem 1rem 1rem;
|
||||||
display: none;
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||||
|
background-color: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-primary {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-muted {
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-weight-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-none {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links li:not(:last-child):after {
|
||||||
|
content: ' • ';
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-0 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-0 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container {
|
||||||
|
display:flex;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container picture {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container picture img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
body {
|
||||||
|
padding: 3rem 1rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1::after {
|
.error-artwork-container picture {
|
||||||
content: ' ...there is nothing here if you are on a mobile device';
|
width: 576px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding: 5rem 1rem 3rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container picture {
|
||||||
|
width: 768px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="canvas"></canvas>
|
<div class="error-artwork-container">
|
||||||
<h1>422. The change you wanted was rejected. <small>But play some Pong while you're at it.</small></h1><span id="links"><a href="https://github.com/Retrospring/retrospring/issues">Is it a bug?</a> · <a href="https://retrospring.net">Back to Retrospring</a></span>
|
<picture>
|
||||||
<script type="text/javascript">
|
<source
|
||||||
function paintCanvas(){ctx.fillStyle="#5E35B1",ctx.fillRect(0,0,W,H)}function Paddle(a){this.h=5,this.w=150,this.x=W/2-this.w/2,this.y="top"==a?0:H-this.h}function createParticles(a,b,c){this.x=a||0,this.y=b||0,this.radius=1.2,this.vx=-1.5+3*Math.random(),this.vy=c*Math.random()*1.5}function draw(){paintCanvas();for(var a=0;a<paddles.length;a++)p=paddles[a],ctx.fillStyle="white",ctx.fillRect(p.x,p.y,p.w,p.h);ball.draw(),update()}function increaseSpd(){points%4==0&&Math.abs(ball.vx)<15&&(ball.vx+=ball.vx<0?-1:1,ball.vy+=ball.vy<0?-2:2)}function trackPosition(a){mouse.x=a.pageX,mouse.y=a.pageY}function update(){if(updateScore(),mouse.x&&mouse.y)for(var a=1;a<paddles.length;a++)p=paddles[a],p.x=mouse.x-p.w/2;if(ball.x+=ball.vx,ball.y+=ball.vy,p1=paddles[1],p2=paddles[2],collides(ball,p1)?collideAction(ball,p1):collides(ball,p2)?collideAction(ball,p2):(ball.y+ball.r>H?(ball.y=H-ball.r,gameOver()):ball.y<0&&(ball.y=ball.r,gameOver()),ball.x+ball.r>W?(ball.vx=-ball.vx,ball.x=W-ball.r):ball.x-ball.r<0&&(ball.vx=-ball.vx,ball.x=ball.r)),1==flag)for(var b=0;b<particlesCount;b++)particles.push(new createParticles(particlePos.x,particlePos.y,multiplier));emitParticles(),flag=0}function collides(a,b){return a.x+ball.r>=b.x&&a.x-ball.r<=b.x+b.w?a.y>=b.y-b.h&&b.y>0?(paddleHit=1,!0):a.y<=b.h&&0==b.y?(paddleHit=2,!0):!1:void 0}function collideAction(a,b){a.vy=-a.vy,1==paddleHit?(a.y=b.y-b.h,particlePos.y=a.y+a.r,multiplier=-1):2==paddleHit&&(a.y=b.h+a.r,particlePos.y=a.y-a.r,multiplier=1),points++,increaseSpd(),collision&&(points>0&&collision.pause(),collision.currentTime=0,collision.play()),particlePos.x=a.x,flag=1}function emitParticles(){for(var a=0;a<particles.length;a++)par=particles[a],ctx.beginPath(),ctx.fillStyle="white",par.radius>0&&ctx.arc(par.x,par.y,par.radius,0,2*Math.PI,!1),ctx.fill(),par.x+=par.vx,par.y+=par.vy,par.radius=Math.max(par.radius-.05,0)}function updateScore(){ctx.fillStlye="white",ctx.font="16px Arial, sans-serif",ctx.textAlign="left",ctx.textBaseline="top",ctx.fillText("Score: "+points,20,20)}function gameOver(){ctx.fillStlye="white",ctx.font="20px Arial, sans-serif",ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillText("Game Over - You scored "+points+" points!",W/2,H/2+25),cancelRequestAnimFrame(init),over=1,restartBtn.draw()}function animloop(){init=requestAnimFrame(animloop),draw()}function startScreen(){draw(),startBtn.draw()}function btnClick(a){{var b=a.pageX;a.pageY}b>=startBtn.x&&b<=startBtn.x+startBtn.w&&(animloop(),startBtn={}),1==over&&b>=restartBtn.x&&b<=restartBtn.x+restartBtn.w&&(ball.x=20,ball.y=20,points=0,ball.vx=4,ball.vy=8,animloop(),over=0)}window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){return window.setTimeout(a,1e3/60)}}(),window.cancelRequestAnimFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout}();var canvas=document.getElementById("canvas"),ctx=canvas.getContext("2d"),W=window.innerWidth,H=window.innerHeight/1.09,particles=[],ball={},paddles=[2],mouse={},points=0,fps=60,particlesCount=20,flag=0,particlePos={},multipler=1,startBtn={},restartBtn={},over=0,init,paddleHit;canvas.addEventListener("mousemove",trackPosition,!0),canvas.addEventListener("mousedown",btnClick,!0),collision=document.getElementById("collide"),canvas.width=W,canvas.height=H,paddles.push(new Paddle("bottom")),paddles.push(new Paddle("top")),ball={x:50,y:50,r:5,c:"white",vx:4,vy:8,draw:function(){ctx.beginPath(),ctx.fillStyle=this.c,ctx.arc(this.x,this.y,this.r,0,2*Math.PI,!1),ctx.fill()}},startBtn={w:100,h:50,x:W/2-50,y:H/2-25,draw:function(){ctx.strokeStyle="white",ctx.lineWidth="2",ctx.strokeRect(this.x,this.y,this.w,this.h),ctx.font="18px Arial, sans-serif",ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStlye="white",ctx.fillText("Start",W/2,H/2)}},restartBtn={w:100,h:50,x:W/2-50,y:H/2-50,draw:function(){ctx.strokeStyle="white",ctx.lineWidth="2",ctx.strokeRect(this.x,this.y,this.w,this.h),ctx.font="18px Arial, sans-serif",ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStlye="white",ctx.fillText("Restart",W/2,H/2-25)}},startScreen();
|
srcset="/images/errors/small/404.png 576w,
|
||||||
|
/images/errors/medium/404.png 768w,
|
||||||
|
/images/errors/original/404.png 1200w">
|
||||||
|
<img src="/images/errors/small/404.png"/>
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<h1>
|
||||||
|
<span class="text-primary font-weight-bold">422</span>
|
||||||
|
<small class="text-muted">Unprocessable Entity</small>
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Whatever your browser tried to send us, it was not right!
|
||||||
|
</p>
|
||||||
|
<p class="mb-0">
|
||||||
|
<i>Please retry what you initially tried, and if the problem persists, don't hesitate to contact us!</i>
|
||||||
|
</p>
|
||||||
|
<ul class="links mt-0">
|
||||||
|
<li>
|
||||||
|
<a href="https://twitter.com/retrospring">Twitter</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/retrospring/retrospring">GitHub</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="links">
|
||||||
|
<li class="d-none js-back-link">
|
||||||
|
<a href="javascript:history.back()">Back</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
if (window.history.length > 0) {
|
||||||
|
document.querySelector('.js-back-link').classList.toggle('d-none');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
162
public/500.html
162
public/500.html
|
|
@ -1,60 +1,150 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>what is going on (500)</title>
|
<meta charset="utf-8">
|
||||||
|
<title>Internal Server Error</title>
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<style>
|
<style>
|
||||||
body {
|
:root {
|
||||||
padding: 0;
|
--primary: #5e35b1;
|
||||||
margin: 0;
|
--muted: 108, 117, 125;
|
||||||
overflow: hidden;
|
--background: #f0edf4;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
*, *:before, *:after {
|
||||||
font-family: sans-serif;
|
box-sizing: border-box;
|
||||||
font-size: 1.5em;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 > small {
|
a {
|
||||||
font-size: 0.7em;
|
color: var(--primary);
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
span#links {
|
|
||||||
font-family: sans-serif;
|
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-top: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span#links > a {
|
|
||||||
color: #5E35B1;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-device-width: 480px) {
|
body {
|
||||||
canvas {
|
padding: 2rem 1rem 1rem 1rem;
|
||||||
display: none;
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||||
|
background-color: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-primary {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-muted {
|
||||||
|
color: rgb(var(--muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-weight-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-none {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links li:not(:last-child):after {
|
||||||
|
content: ' • ';
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-0 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-0 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container {
|
||||||
|
display:flex;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container picture {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-artwork-container picture img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
body {
|
||||||
|
padding: 3rem 1rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1::after {
|
.error-artwork-container picture {
|
||||||
content: ' ...there is nothing here if you are on a mobile device';
|
width: 576px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding: 5rem 1rem 3rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 > small {
|
.error-artwork-container picture {
|
||||||
display: none;
|
width: 768px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="canvas"></canvas>
|
<div class="error-artwork-container">
|
||||||
<h1>500. Something went wrong :( <small>But play some Pong while you're at it.</small></h1><span id="links"><a href="https://github.com/Retrospring/retrospring/issues">Is it a bug?</a> · <a href="https://retrospring.net">Back to Retrospring</a></span>
|
<picture>
|
||||||
<script type="text/javascript">
|
<source
|
||||||
function paintCanvas(){ctx.fillStyle="#5E35B1",ctx.fillRect(0,0,W,H)}function Paddle(a){this.h=5,this.w=150,this.x=W/2-this.w/2,this.y="top"==a?0:H-this.h}function createParticles(a,b,c){this.x=a||0,this.y=b||0,this.radius=1.2,this.vx=-1.5+3*Math.random(),this.vy=c*Math.random()*1.5}function draw(){paintCanvas();for(var a=0;a<paddles.length;a++)p=paddles[a],ctx.fillStyle="white",ctx.fillRect(p.x,p.y,p.w,p.h);ball.draw(),update()}function increaseSpd(){points%4==0&&Math.abs(ball.vx)<15&&(ball.vx+=ball.vx<0?-1:1,ball.vy+=ball.vy<0?-2:2)}function trackPosition(a){mouse.x=a.pageX,mouse.y=a.pageY}function update(){if(updateScore(),mouse.x&&mouse.y)for(var a=1;a<paddles.length;a++)p=paddles[a],p.x=mouse.x-p.w/2;if(ball.x+=ball.vx,ball.y+=ball.vy,p1=paddles[1],p2=paddles[2],collides(ball,p1)?collideAction(ball,p1):collides(ball,p2)?collideAction(ball,p2):(ball.y+ball.r>H?(ball.y=H-ball.r,gameOver()):ball.y<0&&(ball.y=ball.r,gameOver()),ball.x+ball.r>W?(ball.vx=-ball.vx,ball.x=W-ball.r):ball.x-ball.r<0&&(ball.vx=-ball.vx,ball.x=ball.r)),1==flag)for(var b=0;b<particlesCount;b++)particles.push(new createParticles(particlePos.x,particlePos.y,multiplier));emitParticles(),flag=0}function collides(a,b){return a.x+ball.r>=b.x&&a.x-ball.r<=b.x+b.w?a.y>=b.y-b.h&&b.y>0?(paddleHit=1,!0):a.y<=b.h&&0==b.y?(paddleHit=2,!0):!1:void 0}function collideAction(a,b){a.vy=-a.vy,1==paddleHit?(a.y=b.y-b.h,particlePos.y=a.y+a.r,multiplier=-1):2==paddleHit&&(a.y=b.h+a.r,particlePos.y=a.y-a.r,multiplier=1),points++,increaseSpd(),collision&&(points>0&&collision.pause(),collision.currentTime=0,collision.play()),particlePos.x=a.x,flag=1}function emitParticles(){for(var a=0;a<particles.length;a++)par=particles[a],ctx.beginPath(),ctx.fillStyle="white",par.radius>0&&ctx.arc(par.x,par.y,par.radius,0,2*Math.PI,!1),ctx.fill(),par.x+=par.vx,par.y+=par.vy,par.radius=Math.max(par.radius-.05,0)}function updateScore(){ctx.fillStlye="white",ctx.font="16px Arial, sans-serif",ctx.textAlign="left",ctx.textBaseline="top",ctx.fillText("Score: "+points,20,20)}function gameOver(){ctx.fillStlye="white",ctx.font="20px Arial, sans-serif",ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillText("Game Over - You scored "+points+" points!",W/2,H/2+25),cancelRequestAnimFrame(init),over=1,restartBtn.draw()}function animloop(){init=requestAnimFrame(animloop),draw()}function startScreen(){draw(),startBtn.draw()}function btnClick(a){{var b=a.pageX;a.pageY}b>=startBtn.x&&b<=startBtn.x+startBtn.w&&(animloop(),startBtn={}),1==over&&b>=restartBtn.x&&b<=restartBtn.x+restartBtn.w&&(ball.x=20,ball.y=20,points=0,ball.vx=4,ball.vy=8,animloop(),over=0)}window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){return window.setTimeout(a,1e3/60)}}(),window.cancelRequestAnimFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout}();var canvas=document.getElementById("canvas"),ctx=canvas.getContext("2d"),W=window.innerWidth,H=window.innerHeight/1.09,particles=[],ball={},paddles=[2],mouse={},points=0,fps=60,particlesCount=20,flag=0,particlePos={},multipler=1,startBtn={},restartBtn={},over=0,init,paddleHit;canvas.addEventListener("mousemove",trackPosition,!0),canvas.addEventListener("mousedown",btnClick,!0),collision=document.getElementById("collide"),canvas.width=W,canvas.height=H,paddles.push(new Paddle("bottom")),paddles.push(new Paddle("top")),ball={x:50,y:50,r:5,c:"white",vx:4,vy:8,draw:function(){ctx.beginPath(),ctx.fillStyle=this.c,ctx.arc(this.x,this.y,this.r,0,2*Math.PI,!1),ctx.fill()}},startBtn={w:100,h:50,x:W/2-50,y:H/2-25,draw:function(){ctx.strokeStyle="white",ctx.lineWidth="2",ctx.strokeRect(this.x,this.y,this.w,this.h),ctx.font="18px Arial, sans-serif",ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStlye="white",ctx.fillText("Start",W/2,H/2)}},restartBtn={w:100,h:50,x:W/2-50,y:H/2-50,draw:function(){ctx.strokeStyle="white",ctx.lineWidth="2",ctx.strokeRect(this.x,this.y,this.w,this.h),ctx.font="18px Arial, sans-serif",ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStlye="white",ctx.fillText("Restart",W/2,H/2-25)}},startScreen();
|
srcset="/images/errors/small/500.png 576w,
|
||||||
|
/images/errors/medium/500.png 768w,
|
||||||
|
/images/errors/original/500.png 1200w">
|
||||||
|
<img src="/images/errors/small/500.png"/>
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<h1>
|
||||||
|
<span class="text-primary font-weight-bold">500</span>
|
||||||
|
<small class="text-muted">Internal Server Error</small>
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
If this page shows up, something went wrong and we already sent out our army of raccoons to fix it!
|
||||||
|
</p>
|
||||||
|
<p class="mb-0">
|
||||||
|
<i>We get notified about issues, but feel free to contact us:</i>
|
||||||
|
</p>
|
||||||
|
<ul class="links mt-0">
|
||||||
|
<li>
|
||||||
|
<a href="https://twitter.com/retrospring">Twitter</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/retrospring/retrospring">GitHub</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="links">
|
||||||
|
<li class="d-none js-back-link">
|
||||||
|
<a href="javascript:history.back()">Back</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
if (window.history.length > 0) {
|
||||||
|
document.querySelector('.js-back-link').classList.toggle('d-none');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue