haikal/templates/message-illustration.html
2025-08-27 13:04:41 +03:00

54 lines
1.9 KiB
HTML

{% load static %}
{% load i18n %}
<style>
.empty-state-container {
background-color: #ffffff;
padding: 50px;
border-radius: 5px; /* Rounded corners */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Subtle shadow */
text-align: center;
max-width: 70rem; /* Max width for content - made wider */
width: 90%; /* Fluid width */
margin: 0px auto; /* Added margin-top and auto for horizontal centering */
max-height: 80vh; /* Added min-height to control the height */
display: flex; /* Use flexbox for vertical centering of content */
flex-direction: column; /* Stack children vertically */
justify-content: center; /* Center content vertically */
align-items: center; /* Center content horizontally */
}
.empty-state-image {
max-width: 50%; /* Responsive image size */
height: auto%;
border-radius: 10px; /* Rounded corners for image */
}
.empty-state-title {
color: #343a40; /* Dark text for title */
font-weight: 600;
margin-bottom: 15px;
}
.empty-state-text {
color: #6c757d; /* Muted text for description */
margin-bottom: 30px;
line-height: 1.6;
}
/* No specific styles for .btn-add-new or .message-box are needed here as per previous updates */
</style>
<div class="empty-state-container alert mb-2" role="alert">
<div class="sm">
<img src="{% static 'images/no_content/no_item.jpg' %}"
alt="message-image"
class="empty-state-image mb-2">
</div>
<!-- Title -->
<h3 class="empty-state-title mb-2">{% blocktrans %}{{ value1}}{% endblocktrans %}</h3>
<div class="d-flex justify-content-between mt-4">
<a class="btn btn-primary mx-2" href="{{ url }}">
<i class="fa fa-plus me-2"></i>
{% blocktrans %}{{value2}}{% endblocktrans %}
</a>
</div>
</div>