File size: 4,641 Bytes
540412a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
{% extends "base.html" %}
{% block title %}Error - Multi-Personality Chat Bot{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<div class="terminal-card p-5 text-center">
<div class="error-content">
<!-- Error Icon -->
<div class="mb-4">
<i class="fas fa-exclamation-triangle text-warning" style="font-size: 4rem;"></i>
</div>
<!-- Error Title -->
<h2 class="text-terminal-green mb-3">
Oops! Something went wrong 🤖
</h2>
<!-- Error Message -->
<div class="error-message mb-4">
{% if error_message %}
<p class="text-light fs-5">{{ error_message }}</p>
{% else %}
<p class="text-light fs-5">An unexpected error occurred. Please try again.</p>
{% endif %}
</div>
<!-- Error Details (if in debug mode) -->
{% if error_details %}
<div class="error-details bg-dark p-3 rounded border border-secondary mb-4 text-start">
<h6 class="text-terminal-accent mb-2">Error Details:</h6>
<pre class="text-muted small mb-0"><code>{{ error_details }}</code></pre>
</div>
{% endif %}
<!-- Action Buttons -->
<div class="action-buttons">
<a href="/" class="btn btn-terminal-primary me-3">
<i class="fas fa-home me-2"></i>Back to Home
</a>
<button onclick="history.back()" class="btn btn-outline-light">
<i class="fas fa-arrow-left me-2"></i>Go Back
</button>
</div>
<!-- Helpful Tips -->
<div class="mt-4 pt-4 border-top border-secondary">
<h6 class="text-terminal-accent mb-3">What you can do:</h6>
<div class="row g-3">
<div class="col-md-4">
<div class="tip-card p-3 bg-dark rounded border border-secondary h-100">
<i class="fas fa-refresh text-terminal-green mb-2"></i>
<p class="small mb-0">Refresh the page and try again</p>
</div>
</div>
<div class="col-md-4">
<div class="tip-card p-3 bg-dark rounded border border-secondary h-100">
<i class="fas fa-robot text-terminal-green mb-2"></i>
<p class="small mb-0">Choose a different personality</p>
</div>
</div>
<div class="col-md-4">
<div class="tip-card p-3 bg-dark rounded border border-secondary h-100">
<i class="fas fa-question-circle text-terminal-green mb-2"></i>
<p class="small mb-0">Check your internet connection</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
// Auto-refresh after 30 seconds if it's a temporary error
setTimeout(() => {
const errorMsg = '{{ error_message|lower }}';
if (errorMsg.includes('temporary') || errorMsg.includes('connection') || errorMsg.includes('network')) {
if (confirm('Would you like to refresh the page and try again?')) {
window.location.reload();
}
}
}, 30000);
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' || e.key === 'Backspace') {
history.back();
} else if (e.key === 'Enter' || e.key === ' ') {
window.location.href = '/';
}
});
</script>
{% endblock %} |