mirror of
https://github.com/thecyberlearn/quantum-ai-v3.git
synced 2026-08-18 10:12:58 +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
|
] + urlpatterns
|
||||||
except ImportError:
|
except ImportError:
|
||||||
pass
|
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 title %}Page Not Found - Quantum Tasks AI{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% 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>
|
<style>
|
||||||
.error-container {
|
/* Error-specific styling that follows agent theme */
|
||||||
min-height: 60vh;
|
.error-content {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
padding: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-icon {
|
.error-illustration {
|
||||||
font-size: 6rem;
|
margin-bottom: var(--spacing-xl);
|
||||||
color: var(--primary-blue);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-title {
|
.error-icon-large {
|
||||||
font-size: 2.5rem;
|
font-size: 4rem;
|
||||||
font-weight: bold;
|
margin-bottom: var(--spacing-md);
|
||||||
color: var(--text-primary);
|
line-height: 1;
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
font-size: 1.1rem;
|
font-size: var(--text-lg);
|
||||||
color: var(--text-secondary);
|
color: var(--on-surface-variant);
|
||||||
margin-bottom: 2rem;
|
line-height: 1.6;
|
||||||
max-width: 600px;
|
max-width: 500px;
|
||||||
|
margin: 0 auto var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-actions {
|
.error-actions {
|
||||||
display: flex;
|
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;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-button {
|
.quick-links {
|
||||||
padding: 0.75rem 1.5rem;
|
width: 100%;
|
||||||
border-radius: 8px;
|
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;
|
text-decoration: none;
|
||||||
font-weight: 600;
|
color: var(--on-surface);
|
||||||
transition: all 0.2s;
|
font-size: var(--text-sm);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
border: 1px solid var(--outline-variant);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-button.primary {
|
.quick-link:hover {
|
||||||
background: var(--primary-blue);
|
background: var(--surface);
|
||||||
color: white;
|
box-shadow: var(--shadow-sm);
|
||||||
}
|
|
||||||
|
|
||||||
.error-button.primary:hover {
|
|
||||||
background: var(--primary-blue-dark);
|
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-button.secondary {
|
.quick-link-icon {
|
||||||
background: transparent;
|
font-size: var(--text-base);
|
||||||
color: var(--primary-blue);
|
|
||||||
border: 2px solid var(--primary-blue);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-button.secondary:hover {
|
.help-content {
|
||||||
background: var(--primary-blue);
|
text-align: center;
|
||||||
color: white;
|
}
|
||||||
|
|
||||||
|
.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>
|
</style>
|
||||||
{% endblock %}
|
{% 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 %}
|
{% 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 {
|
{% block title %}Server Error - Quantum Tasks AI{% endblock %}
|
||||||
max-width: 600px;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-icon {
|
{% block extra_css %}
|
||||||
font-size: 6rem;
|
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
|
||||||
margin-bottom: 1rem;
|
{% endblock %}
|
||||||
}
|
|
||||||
|
|
||||||
.error-title {
|
{% block content %}
|
||||||
font-size: 2.5rem;
|
<!-- Agent Header Component -->
|
||||||
font-weight: bold;
|
{% include "components/agent_header.html" with agent_title="Server Error" agent_subtitle="We're working to fix this issue" %}
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
<!-- Quick Agents Panel Component -->
|
||||||
font-size: 1.1rem;
|
{% include "components/quick_agents_panel.html" %}
|
||||||
margin-bottom: 2rem;
|
|
||||||
opacity: 0.9;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-actions {
|
<!-- Error Content -->
|
||||||
display: flex;
|
<div class="agent-container">
|
||||||
gap: 1rem;
|
<div class="agent-grid">
|
||||||
flex-wrap: wrap;
|
<!-- Main Error Widget -->
|
||||||
justify-content: center;
|
<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 {
|
<div class="agent-widget-content">
|
||||||
padding: 0.75rem 1.5rem;
|
<div class="error-content">
|
||||||
border-radius: 8px;
|
<div class="error-illustration">
|
||||||
text-decoration: none;
|
<div class="error-icon-large">🔧</div>
|
||||||
font-weight: 600;
|
<p class="error-message">
|
||||||
transition: all 0.2s;
|
We're experiencing technical difficulties. Our AI systems are temporarily unavailable,
|
||||||
background: rgba(255, 255, 255, 0.1);
|
but our team has been notified and is working to resolve the issue.
|
||||||
color: white;
|
</p>
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
</div>
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-button:hover {
|
<div class="error-status">
|
||||||
background: rgba(255, 255, 255, 0.2);
|
<div class="status-indicator">
|
||||||
transform: translateY(-1px);
|
<div class="status-dot pulsing"></div>
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
<span class="status-text">System monitoring active</span>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
.error-details {
|
<div class="error-actions">
|
||||||
margin-top: 2rem;
|
<div class="button-group">
|
||||||
padding: 1rem;
|
<a href="{% url 'core:homepage' %}" class="btn btn-primary">
|
||||||
background: rgba(255, 255, 255, 0.1);
|
<span class="btn-icon">🏠</span>
|
||||||
border-radius: 8px;
|
Go Home
|
||||||
font-size: 0.9rem;
|
</a>
|
||||||
opacity: 0.8;
|
<a href="{% url 'agent_base:marketplace' %}" class="btn btn-secondary">
|
||||||
}
|
<span class="btn-icon">🤖</span>
|
||||||
</style>
|
Browse AI Agents
|
||||||
</head>
|
</a>
|
||||||
<body>
|
</div>
|
||||||
<div class="error-container">
|
|
||||||
<div class="error-icon">⚠️</div>
|
<div class="retry-section">
|
||||||
<h1 class="error-title">Server Error</h1>
|
<p class="retry-text">You can try refreshing the page in a few minutes</p>
|
||||||
<p class="error-message">
|
<button onclick="window.location.reload()" class="btn btn-outline">
|
||||||
We're experiencing technical difficulties. Our team has been notified
|
<span class="btn-icon">🔄</span>
|
||||||
and is working to resolve the issue. Please try again in a few minutes.
|
Refresh Page
|
||||||
</p>
|
</button>
|
||||||
<div class="error-actions">
|
</div>
|
||||||
<a href="/" class="error-button">
|
</div>
|
||||||
🏠 Go Home
|
</div>
|
||||||
</a>
|
</div>
|
||||||
<a href="/marketplace/" class="error-button">
|
|
||||||
🤖 Browse AI Assistants
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="error-details">
|
|
||||||
<p><strong>Error ID:</strong> {{ request.META.HTTP_X_REQUEST_ID|default:"N/A" }}</p>
|
<!-- Status Widget -->
|
||||||
<p><strong>Time:</strong> <span id="error-time"></span></p>
|
<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>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<style>
|
||||||
// Display current time
|
/* 500 Error specific styling that follows agent theme */
|
||||||
document.getElementById('error-time').textContent = new Date().toLocaleString();
|
.error-content {
|
||||||
</script>
|
text-align: center;
|
||||||
</body>
|
padding: var(--spacing-lg);
|
||||||
</html>
|
}
|
||||||
|
|
||||||
|
.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