293 lines
8.4 KiB
HTML
293 lines
8.4 KiB
HTML
{% extends 'base.html' %}
|
||
{% load static %}
|
||
|
||
{% block title %}Страницата не е намерена - 404{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<style>
|
||
.error-404-container {
|
||
min-height: 70vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 3rem 1rem;
|
||
}
|
||
|
||
.error-404-content {
|
||
text-align: center;
|
||
max-width: 700px;
|
||
width: 100%;
|
||
animation: fadeInUp 0.6s ease-out;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.error-404-number {
|
||
font-family: 'Roboto Slab', serif;
|
||
font-size: 12rem;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg, var(--gov-primary) 0%, var(--gov-secondary) 50%, var(--gov-accent) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
line-height: 1;
|
||
margin-bottom: 1rem;
|
||
text-shadow: 0 4px 20px rgba(0, 51, 102, 0.2);
|
||
animation: pulse 2s ease-in-out infinite;
|
||
position: relative;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.02);
|
||
}
|
||
}
|
||
|
||
.error-404-number::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 200px;
|
||
height: 200px;
|
||
background: radial-gradient(circle, rgba(0, 102, 204, 0.1) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
z-index: -1;
|
||
animation: ripple 3s ease-out infinite;
|
||
}
|
||
|
||
@keyframes ripple {
|
||
0% {
|
||
transform: translate(-50%, -50%) scale(0.8);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translate(-50%, -50%) scale(1.5);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.error-404-title {
|
||
font-family: 'Roboto Slab', serif;
|
||
font-size: 2.5rem;
|
||
color: var(--gov-primary);
|
||
margin-bottom: 1rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.error-404-message {
|
||
font-size: 1.2rem;
|
||
color: var(--gov-gray);
|
||
margin-bottom: 2.5rem;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.error-404-illustration {
|
||
margin: 2rem 0;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.error-404-illustration svg {
|
||
max-width: 300px;
|
||
width: 100%;
|
||
height: auto;
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
.error-404-actions {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 2.5rem;
|
||
}
|
||
|
||
.error-404-actions .btn {
|
||
min-width: 180px;
|
||
}
|
||
|
||
.error-404-helpful-links {
|
||
margin-top: 3rem;
|
||
padding-top: 2rem;
|
||
border-top: 2px solid var(--gov-gray-light);
|
||
}
|
||
|
||
.error-404-helpful-links h3 {
|
||
font-family: 'Roboto Slab', serif;
|
||
color: var(--gov-primary);
|
||
font-size: 1.3rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.helpful-links-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.helpful-link {
|
||
display: block;
|
||
padding: 1rem;
|
||
background: linear-gradient(135deg, var(--gov-light) 0%, var(--gov-white) 100%);
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
color: var(--gov-primary);
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
border: 2px solid transparent;
|
||
box-shadow: 0 2px 8px var(--gov-shadow);
|
||
}
|
||
|
||
.helpful-link:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 4px 16px var(--gov-shadow-lg);
|
||
border-color: var(--gov-secondary);
|
||
color: var(--gov-secondary);
|
||
}
|
||
|
||
.helpful-link-icon {
|
||
font-size: 1.5rem;
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.error-404-number {
|
||
font-size: 8rem;
|
||
}
|
||
|
||
.error-404-title {
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
.error-404-message {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.error-404-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.error-404-actions .btn {
|
||
width: 100%;
|
||
}
|
||
|
||
.helpful-links-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.error-404-number {
|
||
font-size: 6rem;
|
||
}
|
||
|
||
.error-404-title {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.error-404-illustration svg {
|
||
max-width: 200px;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="error-404-container">
|
||
<div class="error-404-content">
|
||
<div class="error-404-number">404</div>
|
||
|
||
<div class="error-404-illustration">
|
||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#003366;stop-opacity:1" />
|
||
<stop offset="50%" style="stop-color:#0066cc;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#ffd700;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- Magnifying glass -->
|
||
<circle cx="80" cy="80" r="50" fill="none" stroke="url(#grad1)" stroke-width="4" opacity="0.6"/>
|
||
<line x1="120" y1="120" x2="160" y2="160" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round" opacity="0.6"/>
|
||
<!-- Question mark -->
|
||
<path d="M 100 50 Q 100 40 110 40 Q 120 40 120 50 Q 120 60 110 60 L 110 80 Q 110 90 100 90"
|
||
fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round" opacity="0.8"/>
|
||
<circle cx="100" cy="110" r="3" fill="url(#grad1)" opacity="0.8"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<h1 class="error-404-title">Страницата не е намерена</h1>
|
||
|
||
<p class="error-404-message">
|
||
Съжаляваме, но страницата, която търсите, не съществува или е преместена.
|
||
Моля, проверете адреса или използвайте навигацията по-долу, за да намерите това, което търсите.
|
||
</p>
|
||
|
||
<div class="error-404-actions">
|
||
<a href="{% url 'reports:home' %}" class="btn btn-primary">
|
||
<span style="margin-right: 0.5rem;">🏠</span>
|
||
Начална страница
|
||
</a>
|
||
<a href="javascript:history.back()" class="btn btn-secondary">
|
||
<span style="margin-right: 0.5rem;">←</span>
|
||
Назад
|
||
</a>
|
||
</div>
|
||
|
||
<div class="error-404-helpful-links">
|
||
<h3>Полезни връзки</h3>
|
||
<div class="helpful-links-grid">
|
||
<a href="{% url 'reports:list' %}" class="helpful-link">
|
||
<span class="helpful-link-icon">📋</span>
|
||
Всички доклади
|
||
</a>
|
||
<a href="{% url 'reports:create' %}" class="helpful-link">
|
||
<span class="helpful-link-icon">➕</span>
|
||
Докладване на измама
|
||
</a>
|
||
<a href="{% url 'reports:search' %}" class="helpful-link">
|
||
<span class="helpful-link-icon">🔍</span>
|
||
Търсене
|
||
</a>
|
||
{% if user.is_authenticated %}
|
||
<a href="{% url 'accounts:profile' %}" class="helpful-link">
|
||
<span class="helpful-link-icon">👤</span>
|
||
Моят профил
|
||
</a>
|
||
{% else %}
|
||
<a href="{% url 'accounts:login' %}" class="helpful-link">
|
||
<span class="helpful-link-icon">🔐</span>
|
||
Вход в системата
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|