Create 500s.html

open-domains · Jan 5, 2025 · 8a387e1 · 8a387e1
1 parent 4eb8062
commit 8a387e1
Showing 1 changed file with 149 additions and 0 deletions.
diff --git a/static/html/errors/500s.html b/static/html/errors/500s.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>500 Error | Open-Domains</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(to bottom right, #730000, #a30000);
+            color: white;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            overflow: hidden;
+        }
+        h1 {
+            font-size: 3rem;
+            margin: 0.5em;
+        }
+        p {
+            font-size: 1.2rem;
+            max-width: 600px;
+            margin: 0.5em auto;
+            line-height: 1.5;
+        }
+        .btn {
+            display: inline-block;
+            margin-top: 1em;
+            padding: 0.8em 1.5em;
+            color: #a30000;
+            background-color: white;
+            border: none;
+            border-radius: 5px;
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+        .btn:hover {
+            background-color: #ff4d4d;
+            transform: scale(1.1);
+        }
+        canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .header {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            display: flex;
+            align-items: center;
+        }
+        .header img {
+            height: 40px;
+            margin-right: 10px;
+        }
+        .header span {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #ffcccc;
+        }
+        .error-box {
+            margin-top: 1.5em;
+            font-size: 1rem;
+            background: rgba(255, 255, 255, 0.2);
+            padding: 1em;
+            border-radius: 10px;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="background"></canvas>
+    <div class="header">
+        <img src="https://raw.githubusercontent.com/open-domains/website/refs/heads/main/static/img/logo.png" alt="Open-Domains Logo">
+        <span>Open-Domains</span>
+    </div>
+    <h1>Error</h1>
+    <p>
+        Something went wrong, please check the error below.
+    </p>
+    <div class="error-box">
+        ::CLOUDFLARE_ERROR_500S_BOX::
+    </div>
+    <button class="btn" onclick="window.location.href='mailto:[email protected]'">Contact Support</button>
+
+    <script>
+        // Create animated background
+        const canvas = document.getElementById('background');
+        const ctx = canvas.getContext('2d');
+
+        const particles = [];
+        const particleCount = 100;
+        const colors = ['#ff4d4d', '#a30000', '#ffffff'];
+
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+
+        function createParticles() {
+            for (let i = 0; i < particleCount; i++) {
+                particles.push({
+                    x: Math.random() * canvas.width,
+                    y: Math.random() * canvas.height,
+                    radius: Math.random() * 3 + 1,
+                    color: colors[Math.floor(Math.random() * colors.length)],
+                    speedX: (Math.random() - 0.5) * 2,
+                    speedY: (Math.random() - 0.5) * 2
+                });
+            }
+        }
+
+        function drawParticles() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            particles.forEach((particle) => {
+                ctx.beginPath();
+                ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
+                ctx.fillStyle = particle.color;
+                ctx.fill();
+
+                particle.x += particle.speedX;
+                particle.y += particle.speedY;
+
+                if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
+                if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
+            });
+
+            requestAnimationFrame(drawParticles);
+        }
+
+        window.addEventListener('resize', resizeCanvas);
+
+        resizeCanvas();
+        createParticles();
+        drawParticles();
+    </script>
+</body>
+</html>