Skip to content

Commit 8a387e1

Browse files
andrewstechandrewstech
authored
Create 500s.html
1 parent 4eb8062 commit 8a387e1

File tree

1 file changed

+149
-0
lines changed

1 file changed

+149
-0
lines changed

‎static/html/errors/500s.html

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>500 Error | Open-Domains</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
font-family: 'Arial', sans-serif;
11+
background: linear-gradient(to bottom right, #730000, #a30000);
12+
color: white;
13+
text-align: center;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
height: 100vh;
19+
overflow: hidden;
20+
}
21+
h1 {
22+
font-size: 3rem;
23+
margin: 0.5em;
24+
}
25+
p {
26+
font-size: 1.2rem;
27+
max-width: 600px;
28+
margin: 0.5em auto;
29+
line-height: 1.5;
30+
}
31+
.btn {
32+
display: inline-block;
33+
margin-top: 1em;
34+
padding: 0.8em 1.5em;
35+
color: #a30000;
36+
background-color: white;
37+
border: none;
38+
border-radius: 5px;
39+
font-size: 1.1rem;
40+
cursor: pointer;
41+
transition: background-color 0.3s ease, transform 0.3s ease;
42+
}
43+
.btn:hover {
44+
background-color: #ff4d4d;
45+
transform: scale(1.1);
46+
}
47+
canvas {
48+
position: absolute;
49+
top: 0;
50+
left: 0;
51+
width: 100%;
52+
height: 100%;
53+
z-index: -1;
54+
}
55+
.header {
56+
position: absolute;
57+
top: 10px;
58+
left: 10px;
59+
display: flex;
60+
align-items: center;
61+
}
62+
.header img {
63+
height: 40px;
64+
margin-right: 10px;
65+
}
66+
.header span {
67+
font-size: 1.5rem;
68+
font-weight: bold;
69+
color: #ffcccc;
70+
}
71+
.error-box {
72+
margin-top: 1.5em;
73+
font-size: 1rem;
74+
background: rgba(255, 255, 255, 0.2);
75+
padding: 1em;
76+
border-radius: 10px;
77+
display: inline-block;
78+
}
79+
</style>
80+
</head>
81+
<body>
82+
<canvas id="background"></canvas>
83+
<div class="header">
84+
<img src="https://raw.githubusercontent.com/open-domains/website/refs/heads/main/static/img/logo.png" alt="Open-Domains Logo">
85+
<span>Open-Domains</span>
86+
</div>
87+
<h1>Error</h1>
88+
<p>
89+
Something went wrong, please check the error below.
90+
</p>
91+
<div class="error-box">
92+
::CLOUDFLARE_ERROR_500S_BOX::
93+
</div>
94+
<button class="btn" onclick="window.location.href='mailto:[email protected]'">Contact Support</button>
95+
96+
<script>
97+
// Create animated background
98+
const canvas = document.getElementById('background');
99+
const ctx = canvas.getContext('2d');
100+
101+
const particles = [];
102+
const particleCount = 100;
103+
const colors = ['#ff4d4d', '#a30000', '#ffffff'];
104+
105+
function resizeCanvas() {
106+
canvas.width = window.innerWidth;
107+
canvas.height = window.innerHeight;
108+
}
109+
110+
function createParticles() {
111+
for (let i = 0; i < particleCount; i++) {
112+
particles.push({
113+
x: Math.random() * canvas.width,
114+
y: Math.random() * canvas.height,
115+
radius: Math.random() * 3 + 1,
116+
color: colors[Math.floor(Math.random() * colors.length)],
117+
speedX: (Math.random() - 0.5) * 2,
118+
speedY: (Math.random() - 0.5) * 2
119+
});
120+
}
121+
}
122+
123+
function drawParticles() {
124+
ctx.clearRect(0, 0, canvas.width, canvas.height);
125+
126+
particles.forEach((particle) => {
127+
ctx.beginPath();
128+
ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
129+
ctx.fillStyle = particle.color;
130+
ctx.fill();
131+
132+
particle.x += particle.speedX;
133+
particle.y += particle.speedY;
134+
135+
if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
136+
if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
137+
});
138+
139+
requestAnimationFrame(drawParticles);
140+
}
141+
142+
window.addEventListener('resize', resizeCanvas);
143+
144+
resizeCanvas();
145+
createParticles();
146+
drawParticles();
147+
</script>
148+
</body>
149+
</html>

0 commit comments

Comments
 (0)