266 lines
10 KiB
HTML
266 lines
10 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Материалы{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- Заголовок -->
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h2 class="page-title">Материалы</h2>
|
||
<span class="badge" style="background: linear-gradient(135deg, var(--steel-blue) 0%, #3a6d99 100%); color: white; padding: 8px 15px; border-radius: 20px; font-size: 1rem;">
|
||
<i class="fas fa-cube me-1"></i> Всего: {{ materials|length }}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Список материалов -->
|
||
{% if materials %}
|
||
<div class="row">
|
||
{% for material in materials %}
|
||
<div class="col-md-4 mb-3">
|
||
<div class="material-card">
|
||
<div class="material-card-header">
|
||
<h5 class="material-title">
|
||
<i class="fas fa-cube"></i> {{ material.material_name }}
|
||
</h5>
|
||
</div>
|
||
<div class="material-card-body">
|
||
{% if material.description %}
|
||
<p class="material-description">{{ material.description }}</p>
|
||
{% endif %}
|
||
|
||
<div class="material-properties">
|
||
{% if material.category %}
|
||
<div class="property-item">
|
||
<span class="property-label">Категория:</span>
|
||
<span class="property-value">{{ material.category }}</span>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if material.color %}
|
||
<div class="property-item">
|
||
<span class="property-label">Цвет:</span>
|
||
<span class="property-value">{{ material.color }}</span>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if material.density %}
|
||
<div class="property-item">
|
||
<span class="property-label">Плотность:</span>
|
||
<span class="property-value">{{ material.density }} кг/м³</span>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if material.thickness %}
|
||
<div class="property-item">
|
||
<span class="property-label">Толщина:</span>
|
||
<span class="property-value">{{ material.thickness }} мм</span>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if material.supplier %}
|
||
<div class="property-item">
|
||
<span class="property-label">Поставщик:</span>
|
||
<span class="property-value">{{ material.supplier }}</span>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if material.country %}
|
||
<div class="property-item">
|
||
<span class="property-label">Страна:</span>
|
||
<span class="property-value">{{ material.country }}</span>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if material.wear_class %}
|
||
<div class="property-item">
|
||
<span class="property-label">Класс износа:</span>
|
||
<span class="property-value">{{ material.wear_class }}</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="material-price-stock">
|
||
{% if material.price_per_unit %}
|
||
<div class="price-item">
|
||
<span class="price-label">Цена:</span>
|
||
<span class="price-value">{{ material.price_per_unit|int }} руб./{{ material.unit or 'шт' }}</span>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="stock-item">
|
||
<span class="stock-label">В наличии:</span>
|
||
<span class="stock-value {% if material.in_stock and material.in_stock > 0 %}text-success{% else %}text-danger{% endif %}">
|
||
{{ material.in_stock or 0 }} {{ material.unit or 'шт' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="material-footer">
|
||
<small class="text-muted">
|
||
<i class="far fa-calendar-alt"></i> Добавлено: {{ material.created_at[:10] if material.created_at else '-' }}
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="alert alert-info text-center py-5">
|
||
<i class="fas fa-cube fa-3x mb-3" style="color: var(--light-steel-blue);"></i>
|
||
<h4 class="mb-3">Нет материалов</h4>
|
||
<p class="mb-0">В базе данных пока нет материалов. Добавьте материалы через импорт данных.</p>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<style>
|
||
.page-title {
|
||
color: var(--steel-blue);
|
||
font-size: 1.8rem;
|
||
font-weight: 600;
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.material-card {
|
||
background: linear-gradient(135deg, var(--alice-blue) 0%, #E6F2FF 100%);
|
||
border: 1px solid var(--light-steel-blue);
|
||
border-radius: 12px;
|
||
padding: 15px;
|
||
height: 100%;
|
||
box-shadow: 0 4px 8px rgba(70, 130, 180, 0.1);
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.material-card:hover {
|
||
box-shadow: 0 8px 16px rgba(70, 130, 180, 0.2);
|
||
border-color: var(--steel-blue);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.material-card-header {
|
||
border-bottom: 1px solid var(--light-steel-blue);
|
||
padding-bottom: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.material-title {
|
||
color: var(--steel-blue);
|
||
font-size: 1.2rem;
|
||
font-weight: 600;
|
||
margin: 0;
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
.material-title i {
|
||
margin-right: 8px;
|
||
color: var(--light-steel-blue);
|
||
}
|
||
|
||
.material-description {
|
||
color: #2c3e50;
|
||
margin-bottom: 12px;
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px dashed var(--light-steel-blue);
|
||
}
|
||
|
||
.material-properties {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.property-item {
|
||
margin-bottom: 5px;
|
||
font-size: 0.9rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.property-label {
|
||
color: #6c757d;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.property-value {
|
||
color: #2c3e50;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.material-price-stock {
|
||
background-color: rgba(70, 130, 180, 0.1);
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.price-item, .stock-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.price-label, .stock-label {
|
||
color: #6c757d;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.price-value {
|
||
color: var(--steel-blue);
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.stock-value {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.text-success {
|
||
color: #28a745 !important;
|
||
}
|
||
|
||
.text-danger {
|
||
color: #dc3545 !important;
|
||
}
|
||
|
||
.material-footer {
|
||
margin-top: auto;
|
||
padding-top: 8px;
|
||
border-top: 1px solid var(--light-steel-blue);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.alert-info {
|
||
border-radius: 12px;
|
||
border: 2px dashed var(--light-steel-blue);
|
||
background: linear-gradient(135deg, var(--alice-blue) 0%, #E6F2FF 100%);
|
||
color: #2c3e50;
|
||
}
|
||
|
||
.alert-info i {
|
||
color: var(--steel-blue);
|
||
}
|
||
|
||
.alert-info h4 {
|
||
color: var(--steel-blue);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.badge {
|
||
font-family: 'Franklin Gothic', 'Arial Narrow', Arial, sans-serif;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.col-md-4 {
|
||
width: 100%;
|
||
}
|
||
|
||
.property-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %} |