mirror of
https://github.com/thecyberlearn/quantum-ai-v2.git
synced 2026-08-18 08:52:59 +00:00
🎨 Create themed error pages matching agent UI design
✨ New Features: - Complete redesign of 404, 500, 403, and 400 error pages - Agent-themed UI with header, navigation, and widget components - Component-based architecture using agent-base.css styling - Responsive design with proper error handling 🔧 Technical Improvements: - Custom error handlers for production (DEBUG=False) - Proper Django error view integration - Authentication-aware error pages (403 shows login options) - Interactive elements (refresh, go back, contact support) 🎯 UI/UX Enhancements: - Consistent branding with agent ecosystem - Quick links to popular agents on 404 page - System status indicators on 500 page - Troubleshooting steps on 400 page - Professional error messaging Error pages now feel integrated with the platform instead of generic Django errors. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
parent
1b0ec5f856
commit
8538b63246
38
core/error_views.py
Normal file
38
core/error_views.py
Normal file
@ -0,0 +1,38 @@
|
||||
from django.shortcuts import render
|
||||
from django.http import HttpResponseNotFound, HttpResponseServerError, HttpResponseForbidden, HttpResponseBadRequest
|
||||
|
||||
|
||||
def custom_404_view(request, exception):
|
||||
"""Custom 404 error page with agent theme"""
|
||||
return HttpResponseNotFound(
|
||||
render(request, '404.html', {
|
||||
'timestamp': '1.0' # Cache busting for CSS
|
||||
}).content
|
||||
)
|
||||
|
||||
|
||||
def custom_500_view(request):
|
||||
"""Custom 500 error page with agent theme"""
|
||||
return HttpResponseServerError(
|
||||
render(request, '500.html', {
|
||||
'timestamp': '1.0' # Cache busting for CSS
|
||||
}).content
|
||||
)
|
||||
|
||||
|
||||
def custom_403_view(request, exception):
|
||||
"""Custom 403 error page with agent theme"""
|
||||
return HttpResponseForbidden(
|
||||
render(request, '403.html', {
|
||||
'timestamp': '1.0' # Cache busting for CSS
|
||||
}).content
|
||||
)
|
||||
|
||||
|
||||
def custom_400_view(request, exception):
|
||||
"""Custom 400 error page with agent theme"""
|
||||
return HttpResponseBadRequest(
|
||||
render(request, '400.html', {
|
||||
'timestamp': '1.0' # Cache busting for CSS
|
||||
}).content
|
||||
)
|
||||
@ -47,3 +47,9 @@ if settings.DEBUG:
|
||||
] + urlpatterns
|
||||
except ImportError:
|
||||
pass
|
||||
|
||||
# Custom error handlers (work in production when DEBUG=False)
|
||||
handler404 = 'core.error_views.custom_404_view'
|
||||
handler500 = 'core.error_views.custom_500_view'
|
||||
handler403 = 'core.error_views.custom_403_view'
|
||||
handler400 = 'core.error_views.custom_400_view'
|
||||
|
||||
334
templates/400.html
Normal file
334
templates/400.html
Normal file
@ -0,0 +1,334 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Bad Request - Quantum Tasks AI{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Agent Header Component -->
|
||||
{% include "components/agent_header.html" with agent_title="Bad Request" agent_subtitle="Invalid request format detected" %}
|
||||
|
||||
<!-- Quick Agents Panel Component -->
|
||||
{% include "components/quick_agents_panel.html" %}
|
||||
|
||||
<!-- Error Content -->
|
||||
<div class="agent-container">
|
||||
<div class="agent-grid">
|
||||
<!-- Main Error Widget -->
|
||||
<div class="agent-widget widget-large">
|
||||
<div class="agent-widget-header">
|
||||
<h2 class="agent-widget-title">
|
||||
<span class="agent-icon">⚠️</span>
|
||||
400 - Bad Request
|
||||
</h2>
|
||||
<p class="agent-widget-subtitle">Request format is invalid or malformed</p>
|
||||
</div>
|
||||
|
||||
<div class="agent-widget-content">
|
||||
<div class="error-content">
|
||||
<div class="error-illustration">
|
||||
<div class="error-icon-large">📝</div>
|
||||
<p class="error-message">
|
||||
Your request couldn't be processed because it contains invalid data or is malformed.
|
||||
Please check your input and try again.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="error-suggestions">
|
||||
<h4 class="suggestions-title">Common Issues:</h4>
|
||||
<div class="suggestions-list">
|
||||
<div class="suggestion-item">
|
||||
<span class="suggestion-icon">📄</span>
|
||||
<span class="suggestion-text">Check file format and size limits</span>
|
||||
</div>
|
||||
<div class="suggestion-item">
|
||||
<span class="suggestion-icon">💬</span>
|
||||
<span class="suggestion-text">Ensure all required fields are filled</span>
|
||||
</div>
|
||||
<div class="suggestion-item">
|
||||
<span class="suggestion-icon">🔗</span>
|
||||
<span class="suggestion-text">Verify URL parameters are correct</span>
|
||||
</div>
|
||||
<div class="suggestion-item">
|
||||
<span class="suggestion-icon">🔒</span>
|
||||
<span class="suggestion-text">Check if you're properly authenticated</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="error-actions">
|
||||
<div class="button-group">
|
||||
<button onclick="history.back()" class="btn btn-primary">
|
||||
<span class="btn-icon">↩️</span>
|
||||
Go Back
|
||||
</button>
|
||||
<a href="{% url 'core:homepage' %}" class="btn btn-secondary">
|
||||
<span class="btn-icon">🏠</span>
|
||||
Go Home
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="try-again-section">
|
||||
<p class="try-again-text">Try using our AI agents with proper input:</p>
|
||||
<div class="agent-shortcuts">
|
||||
<a href="/agents/data-analyzer/" class="agent-shortcut">
|
||||
<span class="shortcut-icon">📊</span>
|
||||
Data Analyzer
|
||||
</a>
|
||||
<a href="/agents/weather-reporter/" class="agent-shortcut">
|
||||
<span class="shortcut-icon">🌤️</span>
|
||||
Weather Reporter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help Widget -->
|
||||
<div class="agent-widget widget-small">
|
||||
<div class="agent-widget-header">
|
||||
<h3 class="agent-widget-title">
|
||||
<span class="agent-icon">🛠️</span>
|
||||
Troubleshooting
|
||||
</h3>
|
||||
</div>
|
||||
<div class="agent-widget-content">
|
||||
<div class="troubleshoot-content">
|
||||
<div class="troubleshoot-steps">
|
||||
<div class="troubleshoot-step">
|
||||
<span class="step-number">1</span>
|
||||
<span class="step-text">Refresh the page</span>
|
||||
</div>
|
||||
<div class="troubleshoot-step">
|
||||
<span class="step-number">2</span>
|
||||
<span class="step-text">Check your input data</span>
|
||||
</div>
|
||||
<div class="troubleshoot-step">
|
||||
<span class="step-number">3</span>
|
||||
<span class="step-text">Clear browser cache</span>
|
||||
</div>
|
||||
<div class="troubleshoot-step">
|
||||
<span class="step-number">4</span>
|
||||
<span class="step-text">Try a different browser</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-actions">
|
||||
<button onclick="window.location.reload()" class="help-btn">
|
||||
🔄 Refresh Page
|
||||
</button>
|
||||
<a href="mailto:support@quantumtaskai.com" class="help-btn">
|
||||
📧 Contact Support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 400 Error specific styling that follows agent theme */
|
||||
.error-content {
|
||||
text-align: center;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.error-illustration {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.error-icon-large {
|
||||
font-size: 4rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--on-surface-variant);
|
||||
line-height: 1.6;
|
||||
max-width: 500px;
|
||||
margin: 0 auto var(--spacing-xl);
|
||||
}
|
||||
|
||||
.error-suggestions {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.suggestions-title {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--on-surface);
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.suggestions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--surface-variant);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.suggestion-icon {
|
||||
font-size: var(--text-base);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.suggestion-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.try-again-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.try-again-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--on-surface-variant);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.agent-shortcuts {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.agent-shortcut {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background: var(--surface-variant);
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
color: var(--on-surface);
|
||||
font-size: var(--text-sm);
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.agent-shortcut:hover {
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.shortcut-icon {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.troubleshoot-content {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.troubleshoot-steps {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.troubleshoot-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) 0;
|
||||
border-bottom: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.troubleshoot-step:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.help-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--surface-variant);
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
color: var(--on-surface);
|
||||
font-size: var(--text-sm);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.help-btn:hover {
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.agent-shortcuts {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
212
templates/403.html
Normal file
212
templates/403.html
Normal file
@ -0,0 +1,212 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Access Denied - Quantum Tasks AI{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Agent Header Component -->
|
||||
{% include "components/agent_header.html" with agent_title="Access Denied" agent_subtitle="You don't have permission to access this resource" %}
|
||||
|
||||
<!-- Quick Agents Panel Component -->
|
||||
{% include "components/quick_agents_panel.html" %}
|
||||
|
||||
<!-- Error Content -->
|
||||
<div class="agent-container">
|
||||
<div class="agent-grid">
|
||||
<!-- Main Error Widget -->
|
||||
<div class="agent-widget widget-large">
|
||||
<div class="agent-widget-header">
|
||||
<h2 class="agent-widget-title">
|
||||
<span class="agent-icon">🛡️</span>
|
||||
403 - Access Denied
|
||||
</h2>
|
||||
<p class="agent-widget-subtitle">Permission required to access this resource</p>
|
||||
</div>
|
||||
|
||||
<div class="agent-widget-content">
|
||||
<div class="error-content">
|
||||
<div class="error-illustration">
|
||||
<div class="error-icon-large">🔒</div>
|
||||
<p class="error-message">
|
||||
You don't have the necessary permissions to access this resource.
|
||||
Please log in with the appropriate account or contact support for assistance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="error-actions">
|
||||
<div class="button-group">
|
||||
{% if not user.is_authenticated %}
|
||||
<a href="{% url 'authentication:login' %}" class="btn btn-primary">
|
||||
<span class="btn-icon">🔑</span>
|
||||
Login
|
||||
</a>
|
||||
<a href="{% url 'authentication:register' %}" class="btn btn-secondary">
|
||||
<span class="btn-icon">📝</span>
|
||||
Register
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{% url 'core:homepage' %}" class="btn btn-primary">
|
||||
<span class="btn-icon">🏠</span>
|
||||
Go Home
|
||||
</a>
|
||||
<a href="{% url 'agent_base:marketplace' %}" class="btn btn-secondary">
|
||||
<span class="btn-icon">🤖</span>
|
||||
Browse AI Agents
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if user.is_authenticated %}
|
||||
<div class="user-info-section">
|
||||
<p class="user-info-text">
|
||||
Currently logged in as: <strong>{{ user.username }}</strong>
|
||||
</p>
|
||||
<p class="user-info-text">
|
||||
If you believe this is an error, please contact support.
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Support Widget -->
|
||||
<div class="agent-widget widget-small">
|
||||
<div class="agent-widget-header">
|
||||
<h3 class="agent-widget-title">
|
||||
<span class="agent-icon">🆘</span>
|
||||
Need Access?
|
||||
</h3>
|
||||
</div>
|
||||
<div class="agent-widget-content">
|
||||
<div class="support-content">
|
||||
<p class="support-text">If you need access to this resource:</p>
|
||||
<div class="support-actions">
|
||||
{% if not user.is_authenticated %}
|
||||
<a href="{% url 'authentication:login' %}" class="support-link">
|
||||
🔐 Login to your account
|
||||
</a>
|
||||
<a href="{% url 'authentication:register' %}" class="support-link">
|
||||
👤 Create new account
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="mailto:support@quantumtaskai.com" class="support-link">
|
||||
📧 Contact Support
|
||||
</a>
|
||||
<a href="{% url 'agent_base:marketplace' %}" class="support-link">
|
||||
🤖 View Available Agents
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 403 Error specific styling that follows agent theme */
|
||||
.error-content {
|
||||
text-align: center;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.error-illustration {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.error-icon-large {
|
||||
font-size: 4rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--on-surface-variant);
|
||||
line-height: 1.6;
|
||||
max-width: 500px;
|
||||
margin: 0 auto var(--spacing-xl);
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.user-info-section {
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
background: var(--surface-variant);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.user-info-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--on-surface-variant);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.user-info-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.support-content {
|
||||
padding: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.support-text {
|
||||
color: var(--on-surface-variant);
|
||||
margin-bottom: var(--spacing-md);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.support-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.support-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--surface-variant);
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
color: var(--on-surface);
|
||||
font-size: var(--text-sm);
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.support-link:hover {
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@ -4,90 +4,231 @@
|
||||
{% block title %}Page Not Found - Quantum Tasks AI{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Agent Header Component -->
|
||||
{% include "components/agent_header.html" with agent_title="Page Not Found" agent_subtitle="The page you're looking for doesn't exist" %}
|
||||
|
||||
<!-- Quick Agents Panel Component -->
|
||||
{% include "components/quick_agents_panel.html" %}
|
||||
|
||||
<!-- Error Content -->
|
||||
<div class="agent-container">
|
||||
<div class="agent-grid">
|
||||
<!-- Main Error Widget -->
|
||||
<div class="agent-widget widget-large">
|
||||
<div class="agent-widget-header">
|
||||
<h2 class="agent-widget-title">
|
||||
<span class="agent-icon">🔍</span>
|
||||
404 - Page Not Found
|
||||
</h2>
|
||||
<p class="agent-widget-subtitle">Let's get you back on track</p>
|
||||
</div>
|
||||
|
||||
<div class="agent-widget-content">
|
||||
<div class="error-content">
|
||||
<div class="error-illustration">
|
||||
<div class="error-icon-large">🕵️♂️</div>
|
||||
<p class="error-message">
|
||||
The page you're looking for doesn't exist or has been moved.
|
||||
Our AI agents are ready to help you find what you need!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="error-actions">
|
||||
<div class="button-group">
|
||||
<a href="{% url 'core:homepage' %}" class="btn btn-primary">
|
||||
<span class="btn-icon">🏠</span>
|
||||
Go Home
|
||||
</a>
|
||||
<a href="{% url 'agent_base:marketplace' %}" class="btn btn-secondary">
|
||||
<span class="btn-icon">🤖</span>
|
||||
Browse AI Agents
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="quick-links">
|
||||
<p class="quick-links-title">Popular AI Agents:</p>
|
||||
<div class="quick-links-grid">
|
||||
<a href="/agents/data-analyzer/" class="quick-link">
|
||||
<span class="quick-link-icon">📊</span>
|
||||
Data Analyzer
|
||||
</a>
|
||||
<a href="/agents/weather-reporter/" class="quick-link">
|
||||
<span class="quick-link-icon">🌤️</span>
|
||||
Weather Reporter
|
||||
</a>
|
||||
<a href="/agents/job-posting-generator/" class="quick-link">
|
||||
<span class="quick-link-icon">💼</span>
|
||||
Job Generator
|
||||
</a>
|
||||
<a href="/agents/social-ads-generator/" class="quick-link">
|
||||
<span class="quick-link-icon">📱</span>
|
||||
Social Ads
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help Widget -->
|
||||
<div class="agent-widget widget-small">
|
||||
<div class="agent-widget-header">
|
||||
<h3 class="agent-widget-title">
|
||||
<span class="agent-icon">💡</span>
|
||||
Need Help?
|
||||
</h3>
|
||||
</div>
|
||||
<div class="agent-widget-content">
|
||||
<div class="help-content">
|
||||
<p class="help-text">Can't find what you're looking for?</p>
|
||||
<div class="help-actions">
|
||||
<a href="{% url 'agent_base:marketplace' %}" class="help-link">
|
||||
🔍 Browse All Agents
|
||||
</a>
|
||||
<a href="{% url 'core:pricing' %}" class="help-link">
|
||||
💰 View Pricing
|
||||
</a>
|
||||
<a href="mailto:support@quantumtaskai.com" class="help-link">
|
||||
📧 Contact Support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.error-container {
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
/* Error-specific styling that follows agent theme */
|
||||
.error-content {
|
||||
text-align: center;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 6rem;
|
||||
color: var(--primary-blue);
|
||||
margin-bottom: 1rem;
|
||||
.error-illustration {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
.error-icon-large {
|
||||
font-size: 4rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
max-width: 600px;
|
||||
font-size: var(--text-lg);
|
||||
color: var(--on-surface-variant);
|
||||
line-height: 1.6;
|
||||
max-width: 500px;
|
||||
margin: 0 auto var(--spacing-xl);
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.error-button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
.quick-links {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.quick-links-title {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--on-surface-variant);
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quick-links-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.quick-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background: var(--surface-variant);
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
color: var(--on-surface);
|
||||
font-size: var(--text-sm);
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.error-button.primary {
|
||||
background: var(--primary-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.error-button.primary:hover {
|
||||
background: var(--primary-blue-dark);
|
||||
.quick-link:hover {
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.error-button.secondary {
|
||||
background: transparent;
|
||||
color: var(--primary-blue);
|
||||
border: 2px solid var(--primary-blue);
|
||||
.quick-link-icon {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.error-button.secondary:hover {
|
||||
background: var(--primary-blue);
|
||||
color: white;
|
||||
.help-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
color: var(--on-surface-variant);
|
||||
margin-bottom: var(--spacing-md);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.help-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.help-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--surface-variant);
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
color: var(--on-surface);
|
||||
font-size: var(--text-sm);
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.help-link:hover {
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.quick-links-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="error-container">
|
||||
<div class="error-icon">🔍</div>
|
||||
<h1 class="error-title">Page Not Found</h1>
|
||||
<p class="error-message">
|
||||
The page you're looking for doesn't exist or has been moved.
|
||||
Don't worry, let's get you back on track to explore our AI assistants.
|
||||
</p>
|
||||
<div class="error-actions">
|
||||
<a href="{% url 'core:homepage' %}" class="error-button primary">
|
||||
🏠 Go Home
|
||||
</a>
|
||||
<a href="{% url 'agent_base:marketplace' %}" class="error-button secondary">
|
||||
🤖 Browse AI Assistants
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -1,108 +1,305 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Server Error - Quantum Tasks AI</title>
|
||||
<link rel="stylesheet" href="{% static 'css/base.css' %}">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--gradient-hero);
|
||||
font-family: var(--font-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
max-width: 600px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
{% block title %}Server Error - Quantum Tasks AI{% endblock %}
|
||||
|
||||
.error-icon {
|
||||
font-size: 6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
|
||||
{% endblock %}
|
||||
|
||||
.error-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
{% block content %}
|
||||
<!-- Agent Header Component -->
|
||||
{% include "components/agent_header.html" with agent_title="Server Error" agent_subtitle="We're working to fix this issue" %}
|
||||
|
||||
.error-message {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
line-height: 1.6;
|
||||
}
|
||||
<!-- Quick Agents Panel Component -->
|
||||
{% include "components/quick_agents_panel.html" %}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
<!-- Error Content -->
|
||||
<div class="agent-container">
|
||||
<div class="agent-grid">
|
||||
<!-- Main Error Widget -->
|
||||
<div class="agent-widget widget-large">
|
||||
<div class="agent-widget-header">
|
||||
<h2 class="agent-widget-title">
|
||||
<span class="agent-icon">⚠️</span>
|
||||
500 - Server Error
|
||||
</h2>
|
||||
<p class="agent-widget-subtitle">Technical difficulties detected</p>
|
||||
</div>
|
||||
|
||||
.error-button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
<div class="agent-widget-content">
|
||||
<div class="error-content">
|
||||
<div class="error-illustration">
|
||||
<div class="error-icon-large">🔧</div>
|
||||
<p class="error-message">
|
||||
We're experiencing technical difficulties. Our AI systems are temporarily unavailable,
|
||||
but our team has been notified and is working to resolve the issue.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
.error-button:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
<div class="error-status">
|
||||
<div class="status-indicator">
|
||||
<div class="status-dot pulsing"></div>
|
||||
<span class="status-text">System monitoring active</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
.error-details {
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-container">
|
||||
<div class="error-icon">⚠️</div>
|
||||
<h1 class="error-title">Server Error</h1>
|
||||
<p class="error-message">
|
||||
We're experiencing technical difficulties. Our team has been notified
|
||||
and is working to resolve the issue. Please try again in a few minutes.
|
||||
</p>
|
||||
<div class="error-actions">
|
||||
<a href="/" class="error-button">
|
||||
🏠 Go Home
|
||||
</a>
|
||||
<a href="/marketplace/" class="error-button">
|
||||
🤖 Browse AI Assistants
|
||||
</a>
|
||||
<div class="error-actions">
|
||||
<div class="button-group">
|
||||
<a href="{% url 'core:homepage' %}" class="btn btn-primary">
|
||||
<span class="btn-icon">🏠</span>
|
||||
Go Home
|
||||
</a>
|
||||
<a href="{% url 'agent_base:marketplace' %}" class="btn btn-secondary">
|
||||
<span class="btn-icon">🤖</span>
|
||||
Browse AI Agents
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="retry-section">
|
||||
<p class="retry-text">You can try refreshing the page in a few minutes</p>
|
||||
<button onclick="window.location.reload()" class="btn btn-outline">
|
||||
<span class="btn-icon">🔄</span>
|
||||
Refresh Page
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error-details">
|
||||
<p><strong>Error ID:</strong> {{ request.META.HTTP_X_REQUEST_ID|default:"N/A" }}</p>
|
||||
<p><strong>Time:</strong> <span id="error-time"></span></p>
|
||||
|
||||
<!-- Status Widget -->
|
||||
<div class="agent-widget widget-small">
|
||||
<div class="agent-widget-header">
|
||||
<h3 class="agent-widget-title">
|
||||
<span class="agent-icon">📊</span>
|
||||
System Status
|
||||
</h3>
|
||||
</div>
|
||||
<div class="agent-widget-content">
|
||||
<div class="status-content">
|
||||
<div class="status-item">
|
||||
<span class="status-icon">🟡</span>
|
||||
<div class="status-info">
|
||||
<span class="status-name">AI Services</span>
|
||||
<span class="status-value">Investigating</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-icon">🟢</span>
|
||||
<div class="status-info">
|
||||
<span class="status-name">Website</span>
|
||||
<span class="status-value">Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-icon">🟢</span>
|
||||
<div class="status-info">
|
||||
<span class="status-name">Database</span>
|
||||
<span class="status-value">Operational</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="error-details">
|
||||
<p class="detail-item">
|
||||
<strong>Error ID:</strong>
|
||||
<span class="detail-value">{{ request.META.HTTP_X_REQUEST_ID|default:"N/A" }}</span>
|
||||
</p>
|
||||
<p class="detail-item">
|
||||
<strong>Time:</strong>
|
||||
<span class="detail-value" id="error-time"></span>
|
||||
</p>
|
||||
<p class="detail-item">
|
||||
<strong>Support:</strong>
|
||||
<a href="mailto:support@quantumtaskai.com" class="support-link">
|
||||
support@quantumtaskai.com
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Display current time
|
||||
document.getElementById('error-time').textContent = new Date().toLocaleString();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<style>
|
||||
/* 500 Error specific styling that follows agent theme */
|
||||
.error-content {
|
||||
text-align: center;
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.error-illustration {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.error-icon-large {
|
||||
font-size: 4rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--on-surface-variant);
|
||||
line-height: 1.6;
|
||||
max-width: 500px;
|
||||
margin: 0 auto var(--spacing-xl);
|
||||
}
|
||||
|
||||
.error-status {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background: var(--surface-variant);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.status-dot.pulsing {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.retry-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.retry-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--on-surface-variant);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--outline);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--surface-variant);
|
||||
border-color: var(--outline-variant);
|
||||
}
|
||||
|
||||
.status-content {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) 0;
|
||||
border-bottom: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.status-item:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.status-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-name {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--on-surface);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
.error-details {
|
||||
margin-top: var(--spacing-md);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--on-surface-variant);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--on-surface);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.support-link {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.support-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.button-group {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Display current time
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const timeElement = document.getElementById('error-time');
|
||||
if (timeElement) {
|
||||
timeElement.textContent = new Date().toLocaleString();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue
Block a user