184 lines
5.4 KiB
HTML
184 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org" lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>403 - Access Denied - FitPub</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" th:href="@{/css/fitpub.css}">
|
|
<style>
|
|
.error-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #fc5c7d 0%, #6a82fb 100%);
|
|
padding: 2rem;
|
|
}
|
|
|
|
.error-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
padding: 3rem;
|
|
max-width: 600px;
|
|
text-align: center;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.error-icon {
|
|
font-size: 8rem;
|
|
color: #fc5c7d;
|
|
margin-bottom: 1rem;
|
|
animation: shake 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% {
|
|
transform: translateX(0);
|
|
}
|
|
25% {
|
|
transform: translateX(-10px);
|
|
}
|
|
75% {
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
.error-code {
|
|
font-size: 6rem;
|
|
font-weight: 700;
|
|
color: #fc5c7d;
|
|
margin: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.error-title {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
margin: 1rem 0;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.error-message {
|
|
font-size: 1.1rem;
|
|
color: #718096;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.error-suggestions {
|
|
text-align: left;
|
|
background: #f7fafc;
|
|
border-radius: 0.5rem;
|
|
padding: 1.5rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.error-suggestions h5 {
|
|
color: #2d3748;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.error-suggestions ul {
|
|
margin: 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.error-suggestions li {
|
|
color: #4a5568;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.btn-home {
|
|
background: linear-gradient(135deg, #fc5c7d 0%, #6a82fb 100%);
|
|
border: none;
|
|
padding: 0.75rem 2rem;
|
|
font-size: 1.1rem;
|
|
border-radius: 0.5rem;
|
|
color: white;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.btn-home:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(252, 92, 125, 0.4);
|
|
color: white;
|
|
}
|
|
|
|
.btn-login {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
padding: 0.75rem 2rem;
|
|
font-size: 1.1rem;
|
|
border-radius: 0.5rem;
|
|
color: white;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: transform 0.2s;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.btn-login:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="error-container">
|
|
<div class="error-card">
|
|
<div class="error-icon">
|
|
<i class="bi bi-shield-lock"></i>
|
|
</div>
|
|
|
|
<h1 class="error-code">403</h1>
|
|
<h2 class="error-title">Access Denied</h2>
|
|
<p class="error-message">
|
|
You don't have permission to access this resource. This area is restricted.
|
|
</p>
|
|
|
|
<div class="error-suggestions">
|
|
<h5><i class="bi bi-info-circle"></i> Why am I seeing this?</h5>
|
|
<ul>
|
|
<li>You may need to log in to access this page</li>
|
|
<li>Your account may not have the required permissions</li>
|
|
<li>This content may be private or restricted</li>
|
|
<li>The resource owner hasn't shared it with you</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<a th:href="@{/}" class="btn-home">
|
|
<i class="bi bi-house-door"></i> Back to Home
|
|
</a>
|
|
<a th:href="@{/login}" class="btn-login" id="loginBtn">
|
|
<i class="bi bi-box-arrow-in-right"></i> Login
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<small class="text-muted">
|
|
Error Code: 403 | Forbidden
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script th:src="@{/js/auth.js}"></script>
|
|
<script>
|
|
// Hide login button if already authenticated
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (FitPubAuth.isAuthenticated()) {
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
if (loginBtn) {
|
|
loginBtn.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|