update
This commit is contained in:
Iliyan Angelov
292
templates/404.html
Normal file
292
templates/404.html
Normal file
@@ -0,0 +1,292 @@
|
||||
{% 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 %}
|
||||
|
||||
Reference in New Issue
Block a user