Skip to content

Commit 29c1a6f

Browse files
FreedomBenFreedomBen
committed
Add 502 page based on 503 page
also fix permission issue that was preventing the previous 503 from loading properly
1 parent f86f455 commit 29c1a6f

File tree

3 files changed

+160
-1
lines changed

3 files changed

+160
-1
lines changed

‎502.html

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
7+
<title>Dory - wait for it...</title>
8+
<meta name="description" content="Wait for it...">
9+
10+
<style type="text/css">
11+
html, body {
12+
background-color: #192a56;
13+
width: 100vw;
14+
height: 100vh;
15+
color: white;
16+
font-family: 'Helvetica Neue';
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
}
21+
.wrapper {
22+
margin: 0 auto;
23+
width: 100vw;
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
position: absolute;
28+
pointer-events: none;
29+
z-index: 5;
30+
text-align: center;
31+
}
32+
.particles-js-canvas-el {
33+
width: 100vw;
34+
position: relative;
35+
z-index: 1;
36+
}
37+
.mono {
38+
font-family: 'Menlo';
39+
font-weight: bold;
40+
padding: 5px;
41+
font-size: 14px;
42+
background-color: #0652DD;
43+
margin: 0 2px;
44+
}
45+
img {
46+
animation: MoveUpDown 2s linear infinite;
47+
position: relative;
48+
left: 0;
49+
bottom: 0;
50+
-moz-transform: scaleX(-1);
51+
-o-transform: scaleX(-1);
52+
-webkit-transform: scaleX(-1);
53+
transform: scaleX(-1);
54+
filter: FlipH;
55+
-ms-filter: "FlipH";
56+
}
57+
58+
@keyframes MoveUpDown {
59+
0%, 100% {
60+
bottom: 0;
61+
left: 0;
62+
}
63+
25%, 30% {
64+
left: 7px;
65+
}
66+
50% {
67+
bottom: 10px;
68+
}
69+
}
70+
</style>
71+
</head>
72+
73+
<body id="particles-js">
74+
<div class="wrapper">
75+
<div class="dory">
76+
<img src="https://icons.veryicon.com/png/Movie%20%26%20TV/Finding%20Nemo/Dory.png" alt="Dory PNG image from veryicon.com" />
77+
<h1>HTTP 5 😵 2</h1>
78+
<h2>Probably waiting for the DB</h2>
79+
<p>Maybe you forgot the <span class="mono">VIRTUAL_HOST</span> env?</p>
80+
</div>
81+
</div>
82+
<script>
83+
setTimeout(function(){
84+
window.location.reload(1);
85+
}, 5000);
86+
</script>
87+
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
88+
<script>
89+
particlesJS("particles-js", {
90+
particles: {
91+
number: { value: 160, density: { enable: true, value_area: 800 } },
92+
color: { value: "#ffffff" },
93+
shape: {
94+
type: "circle",
95+
stroke: { width: 0, color: "#000000" },
96+
polygon: { nb_sides: 5 },
97+
},
98+
opacity: {
99+
value: 1,
100+
random: true,
101+
anim: { enable: true, speed: 1, opacity_min: 0, sync: false },
102+
},
103+
size: {
104+
value: 3,
105+
random: true,
106+
anim: { enable: false, speed: 4, size_min: 0.3, sync: false },
107+
},
108+
line_linked: {
109+
enable: false,
110+
distance: 150,
111+
color: "#ffffff",
112+
opacity: 0.4,
113+
width: 1,
114+
},
115+
move: {
116+
enable: true,
117+
speed: 1,
118+
direction: "none",
119+
random: true,
120+
straight: false,
121+
out_mode: "out",
122+
bounce: false,
123+
attract: { enable: false, rotateX: 600, rotateY: 600 },
124+
},
125+
},
126+
interactivity: {
127+
detect_on: "canvas",
128+
events: {
129+
onhover: { enable: true, mode: "bubble" },
130+
onclick: { enable: true, mode: "push" },
131+
resize: true,
132+
},
133+
modes: {
134+
grab: { distance: 400, line_linked: { opacity: 1 } },
135+
bubble: {
136+
distance: 158.35505639876231,
137+
size: 12.181158184520177,
138+
duration: 6.0905790922600875,
139+
opacity: 0.016241544246026904,
140+
speed: 3,
141+
},
142+
repulse: { distance: 414.159378273686, duration: 0.4 },
143+
push: { particles_nb: 4 },
144+
remove: { particles_nb: 2 },
145+
},
146+
},
147+
retina_detect: true,
148+
});
149+
</script>
150+
</body>
151+
</html>

‎Dockerfile

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ LABEL image.authors="Benjamin Porter <[email protected]>" \
44

55
# Copy our new template
66
COPY nginx.tmpl /app/
7-
# Copy our custom 503 error page
7+
8+
# Copy our custom 502 and 503 error pages
9+
COPY 502.html /var/www/nginx/
810
COPY 503.html /var/www/nginx/
11+
RUN chmod a+r -R /var/www/nginx/
912

1013
# Copy the SSL certificates
1114
RUN mkdir -p /etc/nginx/certs/

‎nginx.tmpl

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ server {
6565
include /etc/nginx/vhost.d/default;
6666
{{ end }}
6767

68+
error_page 502 /502.html;
6869
error_page 503 /503.html;
6970

7071
location / {
@@ -82,6 +83,10 @@ server {
8283
{{ end }}
8384
}
8485

86+
location /502.html {
87+
root /var/www/nginx;
88+
internal;
89+
}
8590
location /503.html {
8691
root /var/www/nginx;
8792
internal;

0 commit comments

Comments
 (0)