File: /var/www/indoadvisory_new/web2/webapp/views/error.ejs
<!DOCTYPE html>
<html lang="<%= currentLang || 'en' %>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %> - Indo Advisory</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
mckinsey: {
navy: '#003366',
blue: '#0066CC',
gray: {
50: '#F8F9FA',
100: '#E9ECEF',
600: '#495057',
700: '#343A40'
}
}
},
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif']
}
}
}
}
</script>
<style>
.error-gradient {
background: linear-gradient(135deg, #003366 0%, #0066CC 100%);
}
</style>
</head>
<body class="font-sans bg-gray-50 min-h-screen flex items-center justify-center">
<div class="max-w-md w-full mx-auto px-4">
<!-- Error Card -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
<!-- Header -->
<div class="error-gradient px-8 py-6 text-center">
<div class="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
<% if (error && error.status === 404) { %>
<i class="fas fa-search text-3xl text-white"></i>
<% } else if (error && error.status === 403) { %>
<i class="fas fa-lock text-3xl text-white"></i>
<% } else if (error && error.status >= 500) { %>
<i class="fas fa-exclamation-triangle text-3xl text-white"></i>
<% } else { %>
<i class="fas fa-exclamation-circle text-3xl text-white"></i>
<% } %>
</div>
<h1 class="text-2xl font-bold text-white mb-2">
<% if (error && error.status === 404) { %>
Page Not Found
<% } else if (error && error.status === 403) { %>
Access Denied
<% } else if (error && error.status >= 500) { %>
Server Error
<% } else { %>
<%= title %>
<% } %>
</h1>
<% if (error && error.status) { %>
<p class="text-blue-100 text-lg">
Error <%= error.status %>
</p>
<% } %>
</div>
<!-- Content -->
<div class="px-8 py-6">
<div class="text-center mb-6">
<p class="text-mckinsey-gray-600 text-lg leading-relaxed">
<%= message %>
</p>
</div>
<!-- Error Details (Development Only) -->
<% if (error && error.stack && process.env.NODE_ENV !== 'production') { %>
<details class="mb-6">
<summary class="cursor-pointer text-sm text-mckinsey-gray-500 hover:text-mckinsey-blue">
Show technical details
</summary>
<pre class="mt-3 p-4 bg-gray-100 rounded-lg text-xs text-gray-700 overflow-x-auto">
<%= error.stack %>
</pre>
</details>
<% } %>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-3">
<button onclick="window.history.back()"
class="flex-1 px-6 py-3 bg-mckinsey-gray-100 text-mckinsey-gray-700 rounded-lg font-medium hover:bg-mckinsey-gray-200 transition-colors">
<i class="fas fa-arrow-left mr-2"></i>
Go Back
</button>
<a href="/"
class="flex-1 px-6 py-3 bg-mckinsey-navy text-white rounded-lg font-medium hover:bg-mckinsey-blue transition-colors text-center">
<i class="fas fa-home mr-2"></i>
Home Page
</a>
</div>
<% if (error && error.status === 404) { %>
<div class="mt-6 text-center">
<p class="text-sm text-mckinsey-gray-500 mb-3">
Looking for something specific?
</p>
<div class="flex flex-wrap justify-center gap-2">
<a href="/about"
class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors">
About Us
</a>
<a href="/portfolio"
class="px-3 py-1 text-xs bg-green-100 text-green-700 rounded-full hover:bg-green-200 transition-colors">
Portfolio
</a>
<a href="/insights"
class="px-3 py-1 text-xs bg-purple-100 text-purple-700 rounded-full hover:bg-purple-200 transition-colors">
Insights
</a>
<a href="/contact"
class="px-3 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full hover:bg-yellow-200 transition-colors">
Contact
</a>
</div>
</div>
<% } %>
</div>
</div>
<!-- Support Info -->
<div class="mt-6 text-center">
<p class="text-sm text-mckinsey-gray-500">
Need help? Contact us at
<a href="mailto:support@indoadvisory.com"
class="text-mckinsey-blue hover:text-mckinsey-navy">
support@indoadvisory.com
</a>
</p>
</div>
</div>
<!-- Auto-redirect for certain errors -->
<% if (error && error.status === 401) { %>
<script>
// Redirect to login after 3 seconds for unauthorized access
setTimeout(function() {
window.location.href = '/auth/login';
}, 3000);
</script>
<% } %>
</body>
</html>