File size: 9,672 Bytes
e4b2c8f 37d5305 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kelabanakmudapekankundasang.com | 522: Connection timed out</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.glow {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-white">
<div id="vanta-bg" class="absolute inset-0 z-0"></div>
<div class="relative z-10 min-h-screen flex flex-col items-center justify-center px-4 py-8">
<!-- Header -->
<div class="text-center mb-8">
<div class="flex items-center justify-center mb-4">
<div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center glow pulse-animation">
<i data-feather="alert-triangle" class="w-8 h-8"></i>
</div>
</div>
<h1 class="text-4xl md:text-5xl font-bold mb-2">kelabanakmudapekankundasang.com</h1>
<div class="text-xl md:text-2xl text-red-400 font-semibold mb-2">522: Connection timed out</div>
<div class="text-gray-400 text-sm">2025-10-15 10:51:29 UTC</div>
</div>
<!-- Status Cards -->
<div class="grid md:grid-cols-2 gap-6 mb-8 w-full max-w-4xl">
<div class="bg-green-900/30 backdrop-blur-sm rounded-2xl p-6 border border-green-500/30 glow">
<div class="flex items-center mb-3">
<i data-feather="check-circle" class="w-6 h-6 text-green-400 mr-3"></i>
<h3 class="text-lg font-semibold text-green-400">Browser</h3>
</div>
<div class="text-2xl font-bold text-green-300">Working</div>
<div class="text-green-200 mt-2">Your connection to Cloudflare</div>
</div>
<div class="bg-red-900/30 backdrop-blur-sm rounded-2xl p-6 border border-red-500/30 glow">
<div class="flex items-center mb-3">
<i data-feather="x-circle" class="w-6 h-6 text-red-400 mr-3"></i>
<h3 class="text-lg font-semibold text-red-400">Host</h3>
</div>
<div class="text-2xl font-bold text-red-300">Error</div>
<div class="text-red-200 mt-2">Origin web server timeout</div>
</div>
</div>
<!-- Main Content -->
<div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 w-full max-w-4xl border border-gray-600/30 mb-8">
<!-- What Happened Section -->
<div class="mb-8">
<h2 class="text-2xl font-bold mb-4 flex items-center">
<i data-feather="help-circle" class="w-6 h-6 mr-3 text-blue-400"></i>
What happened?
</h2>
<div class="bg-gray-700/50 rounded-xl p-6 border-l-4 border-blue-500">
<p class="text-lg leading-relaxed">
The initial connection between Cloudflare's network and the origin web server timed out.
As a result, the web page can not be displayed.
</p>
</div>
</div>
<!-- Solutions Section -->
<div class="grid md:grid-cols-2 gap-8">
<!-- Visitor Section -->
<div class="bg-purple-900/20 rounded-xl p-6 border border-purple-500/30">
<h3 class="text-xl font-semibold mb-4 flex items-center text-purple-300">
<i data-feather="users" class="w-5 h-5 mr-3"></i>
If you're a visitor of this website:
</h3>
<div class="space-y-3">
<div class="flex items-start">
<i data-feather="refresh-cw" class="w-4 h-4 mt-1 mr-3 text-purple-400 flex-shrink-0"></i>
<span class="text-gray-200">Please try again in a few minutes.</span>
</div>
<div class="flex items-start">
<i data-feather="clock" class="w-4 h-4 mt-1 mr-3 text-purple-400 flex-shrink-0"></i>
<span class="text-gray-200">Wait for the server to complete its requests.</span>
</div>
</div>
</div>
<!-- Owner Section -->
<div class="bg-amber-900/20 rounded-xl p-6 border border-amber-500/30">
<h3 class="text-xl font-semibold mb-4 flex items-center text-amber-300">
<i data-feather="user" class="w-5 h-5 mr-3"></i>
If you're the owner of this website:
</h3>
<div class="space-y-3">
<div class="flex items-start">
<i data-feather="mail" class="w-4 h-4 mt-1 mr-3 text-amber-400 flex-shrink-0"></i>
<span class="text-gray-200">Contact your hosting provider</span>
</div>
<div class="flex items-start">
<i data-feather="server" class="w-4 h-4 mt-1 mr-3 text-amber-400 flex-shrink-0"></i>
<span class="text-gray-200">Check for resource-hogging processes</span>
</div>
<a href="https://developers.cloudflare.com/support/troubleshooting/http-status-codes/cloudflare-5xx-errors/error-522/"
class="inline-flex items-center text-amber-400 hover:text-amber-300 transition-colors mt-2">
<i data-feather="external-link" class="w-4 h-4 mr-2"></i>
Additional troubleshooting information
</a>
</div>
</div>
</div>
</div>
<!-- Footer Info -->
<div class="bg-gray-800/30 backdrop-blur-sm rounded-xl p-6 w-full max-w-4xl border border-gray-600/20">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="text-center md:text-left">
<div class="text-sm text-gray-400">Cloudflare Ray ID:</div>
<div class="font-mono text-blue-300">98eec279ca430621</div>
</div>
<div class="text-center md:text-left">
<div class="text-sm text-gray-400">Your IP:</div>
<div class="font-mono text-green-300">2600:1900:0:2102::1201</div>
</div>
<div class="flex items-center space-x-2">
<span class="text-gray-400 text-sm">Performance & security by</span>
<a href="https://www.cloudflare.com/5xx-error-landing?utm_source=errorcode_522&utm_campaign=kelabanakmudapekankundasang.com"
class="text-blue-400 hover:text-blue-300 transition-colors font-semibold">
Cloudflare
</a>
</div>
</div>
</div>
<!-- Retry Button -->
<button onclick="window.location.reload()"
class="mt-8 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 flex items-center glow">
<i data-feather="refresh-cw" class="w-5 h-5 mr-3"></i>
Try Again
</button>
</div>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0x111827,
points: 12.00,
maxDistance: 25.00,
spacing: 18.00
});
// Initialize Feather Icons
feather.replace();
// Add some interactive animations
document.addEventListener('DOMContentLoaded', function() {
const cards = document.querySelectorAll('.bg-gray-800\\/50, .bg-green-900\\/30, .bg-red-900\\/30, .bg-purple-900\\/20, .bg-amber-900\\/20');
cards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
this.style.transition = 'transform 0.3s ease';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
});
</script>
</body>
</html>
|