<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error Page</title>
<style>
:root {
--bg-color: #121212;
--card-bg-color: #1E1E1E;
--text-color: #E0E0E0;
--error-color: #FF6B6B;
--accent-color: #4ECDC4;
--text-muted: #B0B0B0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
line-height: 1.6;
text-align: center;
}
.error-container {
background-color: var(--card-bg-color);
border-radius: 12px;
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
padding: 40px;
max-width: 500px;
width: 90%;
border: 1px solid rgba(255,255,255,0.1);
animation: fadeIn 0.5s ease-out;
}
.error-icon {
font-size: 80px;
color: var(--error-color);
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255,107,107,0.3);
}
.error-message {
color: var(--text-color);
font-size: 24px;
margin-bottom: 15px;
}
.error-details {
color: var(--text-muted);
font-size: 16px;
margin-bottom: 25px;
word-break: break-all;
}
.refresh-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--accent-color);
color: var(--bg-color);
text-decoration: none;
padding: 10px 20px;
border-radius: 6px;
transition: all 0.3s ease;
gap: 10px;
font-weight: bold;
}
.refresh-button:hover {
background-color: #45b7aa;
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(78,205,196,0.3);
}
.refresh-icon {
width: 20px;
height: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (max-width: 600px) {
.error-container {
padding: 20px;
}
.error-icon {
font-size: 60px;
}
.error-message {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="error-container">
<div class="error-icon">⚠️</div>
<h1 class="error-message">Oops! Something Went Wrong</h1>
<p class="error-details">{MSG}</p>
<button onclick="window.location.reload();" class="refresh-button">
<svg xmlns="http://www.w3.org/2000/svg" class="refresh-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Refresh Page
</button>
</div>
<script>
document.querySelector('.refresh-button').addEventListener('click', function() {
this.querySelector('svg').style.animation = 'spin 0.5s linear';
});
</script>
</body>
</html>