35 lines
4.0 KiB
HTML
35 lines
4.0 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="da">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|||
|
|
<title>Label · BMC-{{ '%05d'|format(hardware.id) }}</title>
|
|||
|
|
<style>
|
|||
|
|
*{box-sizing:border-box}body{margin:0;background:#e8eef4;color:#243449;font-family:Arial,Helvetica,sans-serif}
|
|||
|
|
.controls{max-width:760px;margin:32px auto 22px;padding:22px;background:#fff;border:1px solid #bdcbd5;border-radius:12px}
|
|||
|
|
h1{font-size:21px;margin:0 0 7px}p{font-size:13px;color:#65758a;line-height:1.5}form{display:grid;grid-template-columns:150px 1fr;gap:12px}label{font-size:12px;font-weight:600;display:block;margin-bottom:5px}input,select{width:100%;padding:9px;border:1px solid #bdcbd5;border-radius:7px;background:#fff;color:#243449}button,.back{display:inline-block;padding:10px 14px;border-radius:7px;border:1px solid #336699;font-size:13px;cursor:pointer;text-decoration:none}button{background:#336699;color:#fff}.back{background:#fff;color:#336699}.buttons{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}.target{overflow-wrap:anywhere}.preview{display:flex;justify-content:center;padding:10px 12px 40px}
|
|||
|
|
.asset-label{width:{{ width }}mm;height:{{ height }}mm;display:grid;grid-template-columns:minmax(0,1fr) {{ 21 if height == 29 else 27 }}mm;gap:1.5mm;padding:2.5mm;background:#fff;color:#111;box-shadow:0 8px 30px #23374d26;outline:1px solid #bdcbd5;overflow:hidden}
|
|||
|
|
.label-copy{display:flex;flex-direction:column;min-width:0;justify-content:space-between}.brand{font-size:7pt;font-weight:800;letter-spacing:.3pt;border-bottom:.35mm solid #111;padding-bottom:1mm}.name{font-size:{{ 8 if height == 29 else 10 }}pt;font-weight:700;line-height:1.15;overflow-wrap:anywhere;margin:1.2mm 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.asset-id{font-size:9pt;font-weight:800;letter-spacing:.4pt}.serial{font-size:6pt;line-height:1.2;overflow-wrap:anywhere;margin-top:.7mm}.qr{align-self:center;display:flex;flex-direction:column;align-items:center}.qr svg{display:block;width:100%;height:auto}.qr small{font-size:5.5pt;font-weight:600;margin-top:.3mm;text-align:center}
|
|||
|
|
@page{size:{{ width }}mm {{ height }}mm;margin:0}
|
|||
|
|
@media print{html,body{width:{{ width }}mm;height:{{ height }}mm;background:#fff;margin:0}.controls{display:none}.preview{display:block;padding:0}.asset-label{box-shadow:none;outline:0;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}}
|
|||
|
|
@media(max-width:600px){.controls{margin:12px;padding:16px}form{grid-template-columns:1fr}.buttons{grid-column:1}}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<section class="controls">
|
|||
|
|
<h1>Label til jeres hardware</h1><p>Print i 100 % størrelse uden sidehoved og sidefod. QR-koden åbner hardwarekortet i Hub.</p>
|
|||
|
|
<form method="get">
|
|||
|
|
<div><label for="size">Labelstørrelse</label><select id="size" name="size">{% for value, text in [('62x40','62 × 40 mm'),('62x29','62 × 29 mm'),('89x36','89 × 36 mm')] %}<option value="{{ value }}" {% if size == value %}selected{% endif %}>{{ text }}</option>{% endfor %}</select></div>
|
|||
|
|
<div><label for="base_url">Hub-adresse til QR-koden</label><input type="url" id="base_url" name="base_url" value="{{ base_url }}" required><small>Brug en adresse, telefonen kan åbne.</small></div>
|
|||
|
|
<div class="buttons"><button type="submit">Opdater label</button><button type="button" onclick="window.print()">Print label</button><a class="back" href="/hardware/{{ hardware.id }}">Tilbage til delen</a></div>
|
|||
|
|
</form>
|
|||
|
|
<p class="target">QR-link: <a href="{{ target_url }}">{{ target_url }}</a></p>
|
|||
|
|
</section>
|
|||
|
|
<div class="preview">
|
|||
|
|
<article class="asset-label" aria-label="Hardwarelabel">
|
|||
|
|
<div class="label-copy"><div class="brand">BMC NETWORKS · UDSTYR</div><div class="name">{{ hardware.brand or '' }} {{ hardware.model or 'Hardware' }}</div><div><div class="asset-id">BMC-{{ '%05d'|format(hardware.id) }}</div>{% if hardware.serial_number %}<div class="serial">S/N {{ hardware.serial_number }}</div>{% endif %}</div></div>
|
|||
|
|
<div class="qr">{{ qr_svg|safe }}<small>Scan for hardwarekort</small></div>
|
|||
|
|
</article>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|