mirror of
https://github.com/thecyberlearn/quantum-ai-v2.git
synced 2026-08-18 16: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>
234 lines
7.0 KiB
HTML
234 lines
7.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% 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-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;
|
|
}
|
|
|
|
.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;
|
|
color: var(--on-surface);
|
|
font-size: var(--text-sm);
|
|
transition: all 0.2s ease;
|
|
border: 1px solid var(--outline-variant);
|
|
}
|
|
|
|
.quick-link:hover {
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow-sm);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.quick-link-icon {
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
.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 %} |