mirror of
https://github.com/thecyberlearn/quantum-ai-v2.git
synced 2026-08-18 20:32:58 +00:00
8538b63246
✨ 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>
334 lines
9.9 KiB
HTML
334 lines
9.9 KiB
HTML
{% 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 %} |