101 lines
3.7 KiB
HTML
101 lines
3.7 KiB
HTML
{% load i18n %}
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>{% trans "Этикетки оборудования" %} — ACORE</title>
|
||
<style>
|
||
@page { margin: 8mm; size: A4; }
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||
color: #111;
|
||
background: #fff;
|
||
}
|
||
.toolbar {
|
||
position: sticky; top: 0; z-index: 10;
|
||
display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
|
||
padding: 0.75rem 1rem;
|
||
background: #f4f4f5;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
.toolbar button, .toolbar a {
|
||
font-size: 0.875rem; padding: 0.4rem 0.85rem;
|
||
border-radius: 0.375rem; border: 1px solid #ccc;
|
||
background: #fff; cursor: pointer; text-decoration: none; color: #111;
|
||
}
|
||
.toolbar .primary { background: #2563eb; color: #fff; border-color: #2563eb; }
|
||
.hint { font-size: 0.8125rem; color: #555; }
|
||
.sheet {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5mm;
|
||
padding: 8mm;
|
||
align-content: flex-start;
|
||
}
|
||
.label {
|
||
position: relative;
|
||
width: {{ template_width_mm }}mm;
|
||
height: {{ template_height_mm }}mm;
|
||
border: 1px solid #222;
|
||
border-radius: 1mm;
|
||
overflow: hidden;
|
||
break-inside: avoid;
|
||
page-break-inside: avoid;
|
||
background: #fff;
|
||
}
|
||
.block {
|
||
position: absolute;
|
||
overflow: hidden;
|
||
line-height: 1.15;
|
||
}
|
||
.block img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
.block.text {
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
}
|
||
@media print {
|
||
.toolbar { display: none !important; }
|
||
.sheet { padding: 0; gap: 4mm; }
|
||
.label { border-color: #000; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="toolbar">
|
||
<button type="button" class="primary" onclick="window.print()">{% trans "Печать" %}</button>
|
||
<span class="hint">
|
||
{% trans "Этикеток" %}: {{ labels|length }} ·
|
||
{% if codes == 'qr' %}QR{% elif codes == 'ean' %}EAN-13{% else %}QR + EAN-13{% endif %} ·
|
||
{{ template_width_mm }}×{{ template_height_mm }} {% trans "мм" %}
|
||
</span>
|
||
<a href="/it-manager/equipment/labels/template/">{% trans "Шаблон" %}</a>
|
||
<a href="/it-manager/?tab=equipment">{% trans "К оборудованию" %}</a>
|
||
</div>
|
||
<div class="sheet">
|
||
{% for label in labels %}
|
||
<div class="label">
|
||
{% for block in label.blocks %}
|
||
<div class="block{% if block.type != 'qr' and block.type != 'ean13' %} text{% endif %}"
|
||
style="left:{{ block.x_mm }}mm; top:{{ block.y_mm }}mm; width:{{ block.w_mm }}mm; height:{{ block.h_mm }}mm; font-size:{{ block.font_pt }}pt; font-weight:{% if block.bold %}600{% else %}400{% endif %}; text-align:{{ block.align }};">
|
||
{% if block.type == 'qr' or block.type == 'ean13' %}
|
||
{% if block.png %}<img src="data:image/png;base64,{{ block.png }}" alt="{{ block.text }}">{% endif %}
|
||
{% else %}
|
||
{{ block.text }}
|
||
{% endif %}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% empty %}
|
||
<p style="padding:2rem;">{% trans "Не выбрано оборудование." %}</p>
|
||
{% endfor %}
|
||
</div>
|
||
</body>
|
||
</html>
|