#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""Luciferase A4 F版 · 技术信息完善版
数据源：产品部《荧光素酶宣传单页资料-张英子-20261029》
版式：E版 One Glow 结构 + 增加检测平台/样本适用/灵敏度/线性范围/保存信息
"""
import base64
import os
from pathlib import Path

ROOT = Path('/Users/liuxinyuan/Desktop/Hermes输出-工作类')
OUT_HTML = ROOT / '对外物料/Luciferase_A4_F版_技术信息_20261030_V01.html'
OUT_PDF = OUT_HTML.with_suffix('.pdf')
OUT_PNG = OUT_HTML.with_name(OUT_HTML.stem + '_预览.png')
LOGO = base64.b64encode(Path(os.path.expanduser('~/work/公司资料/logo_transparent.png')).read_bytes()).decode()
QR = base64.b64encode(Path(os.path.expanduser('~/work/公司资料/试用装申请.png')).read_bytes()).decode()

HTML = r'''<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Luciferase · E800系列</title>
<style>
@page{size:A4;margin:0}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:210mm;height:297mm;overflow:hidden;background:#F2F6F7;color:#0A2038;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.page{width:210mm;height:297mm;padding:6mm 12mm 5mm;display:flex;flex-direction:column;overflow:hidden}
.mast{height:10mm;display:flex;align-items:center;flex:0 0 10mm}
.mast img{width:29mm;height:auto;display:block}
.mast .sl{margin-left:auto;font-size:6.2pt;color:#4C6475;letter-spacing:.35pt}
.hero{height:66mm;margin:2mm -12mm 0;padding:6mm 12mm 5mm;background:#071D33;color:#fff;
  display:grid;grid-template-columns:1.12fr .88fr;column-gap:7mm;flex:0 0 66mm;position:relative;overflow:hidden}
.hero h1{font-size:42pt;line-height:.9;letter-spacing:-.035em;font-weight:600;margin:0;color:#fff}
.hero .cn{font-size:13.5pt;font-weight:500;color:#D9F5FA;margin:2mm 0 0}
.hero .lead{font-size:8.1pt;line-height:1.7;color:#C9DCE7;margin:3.5mm 0 0;max-width:94mm}
.hero .tags{display:flex;gap:5mm;margin-top:4mm;font-size:7.2pt;color:#9FC5D3}
.hero .tags b{display:block;font-size:8.2pt;color:#fff;font-weight:600;margin-bottom:.5mm}
.hero-code{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-bottom:1mm;position:relative;z-index:1}
.hero-code .big{font-size:34pt;line-height:.9;font-weight:600;letter-spacing:-.045em;color:#fff}
.hero-code .big .n{color:#00D2E8}
.hero-code .big em{font-style:normal;font-size:10.5pt;color:#8FDDEA;letter-spacing:.12em;margin-left:2mm}
.hero-code .conc{font-size:16.5pt;font-weight:500;color:#D9F5FA;margin-top:3mm}
.hero-code .forms{font-size:8.4pt;color:#C9DCE7;margin-top:1.5mm}
.hero-code .custom{font-size:6.6pt;line-height:1.6;color:#7FA9B8;margin-top:3.5mm;max-width:62mm}
.evidence{height:50mm;margin-top:3mm;display:grid;grid-template-columns:41mm 1fr;column-gap:8mm;flex:0 0 50mm}
.big3{display:flex;flex-direction:column;justify-content:center}
.big3 .n{font-size:49pt;line-height:.82;font-weight:600;letter-spacing:-.04em;color:#071D33}
.big3 .lb{font-size:7.8pt;line-height:1.5;color:#415A6B;margin-top:1.8mm}
.big3 .lb b{color:#071D33}
.bars{margin-top:3mm}
.bar-row{display:flex;align-items:center;gap:2.2mm;margin-top:1.8mm;font-size:6.1pt;color:#5A7080}
.bar-row .name{width:13mm;flex:0 0 13mm}
.bar-row .track{height:3mm;background:#D9E6EA;flex:1;position:relative}
.bar-row .fill{height:100%;background:#00A8C6}
.bar-row .val{width:8mm;text-align:right;color:#071D33;font-weight:600}
.chart{display:flex;flex-direction:column;justify-content:center;min-width:0}
.chart .ch{display:flex;align-items:baseline;gap:3mm}
.chart .ch h2{font-size:9.6pt;margin:0;font-weight:600;color:#071D33}
.chart .ch span{font-size:6.2pt;color:#6B7F8C}
.plot{height:30mm;margin-top:1.5mm;display:flex;align-items:flex-end;gap:7mm;padding:0 2mm}
.grp{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.grp .pair{display:flex;align-items:flex-end;gap:1.8mm;height:24mm}
.b{width:5.8mm;position:relative;background:#071D33}
.b.alt{background:#B9D3DA}
.b .v{position:absolute;left:50%;transform:translateX(-50%);top:-3.8mm;font-size:6.1pt;font-weight:600;color:#071D33;white-space:nowrap}
.b.alt .v{color:#607886}
.grp .gl{font-size:6.2pt;color:#415A6B;margin-top:1.4mm}
.legend{font-size:5.7pt;color:#6B7F8C;margin-top:1.2mm;text-align:right}
.note{font-size:5.7pt;line-height:1.5;color:#6B7F8C;margin-top:1.2mm}
.metrics{height:24mm;margin-top:2mm;display:grid;grid-template-columns:repeat(4,1fr);gap:5mm;flex:0 0 24mm}
.metric{border-top:1.4pt solid #00A8C6;padding-top:2.2mm}
.metric b{display:block;font-size:16pt;line-height:1;color:#071D33;font-weight:600;letter-spacing:-.02em}
.metric span{display:block;font-size:6.5pt;line-height:1.55;color:#5B7180;margin-top:1.6mm}
.tech{height:29mm;margin-top:2mm;display:grid;grid-template-columns:repeat(3,1fr);gap:6mm;flex:0 0 29mm}
.tech h3{font-size:9pt;color:#071D33;margin:0 0 1.8mm;font-weight:600}
.tech p{font-size:7.1pt;line-height:1.75;color:#415A6B;margin:0}
.tech b{color:#071D33;font-weight:600}
.reaction-apps{height:25mm;margin-top:2mm;display:grid;grid-template-columns:1.35fr .65fr;column-gap:8mm;flex:0 0 25mm}
.reaction-apps h3{font-size:9pt;margin:0 0 1.5mm;color:#071D33;font-weight:600}
.eq{font-size:7.5pt;line-height:1.7;color:#274357}
.eq b{color:#007F98;font-weight:600}
.apps p{font-size:7.2pt;line-height:1.75;color:#274357;margin:0}
.apps i{font-style:normal;color:#9EB3BE;padding:0 1mm}
.spec{height:40mm;margin-top:2mm;flex:0 0 40mm}
.spec h3{font-size:9pt;margin:0 0 1.7mm;color:#071D33;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:7.0pt;line-height:1.4}
td{padding:1.25mm 1mm;border-bottom:.4pt solid #C9DADF;vertical-align:top;color:#274357}
td.k{width:21mm;color:#6B7F8C;white-space:nowrap}
td.v{color:#071D33;font-weight:500}
td.v b{font-weight:600}
.footer{height:17mm;margin-top:auto;display:flex;align-items:center;gap:3.2mm;flex:0 0 17mm}
.footer .qr{width:16mm;flex:0 0 16mm;display:flex;flex-direction:column;align-items:center;gap:.4mm}
.footer .qr img{width:12mm;height:12mm;display:block}
.footer .vt{font-size:5.1pt;color:#415A6B;white-space:nowrap;line-height:1}
.footer .info{font-size:6pt;line-height:1.5;color:#415A6B}
.footer .info b{font-size:6.5pt;color:#071D33}
.footer .sg{margin-left:auto;text-align:right;font-size:5.8pt;line-height:1.55;color:#007F98;letter-spacing:.2pt}
</style></head><body><div class="page">
  <div class="mast"><img src="data:image/png;base64,__LOGO__"><span class="sl">守护生命健康，缔造美好生活</span></div>

  <section class="hero">
    <div>
      <h1>Luciferase</h1>
      <div class="cn">萤火虫荧光素酶 · 基因工程改造</div>
      <p class="lead">面向 ATP 高灵敏检测、细胞活力 / 代谢分析与 ATP 检测试剂盒开发的发光核心酶。</p>
    </div>
    <div class="hero-code">
      <div class="big"><span class="e">E</span><span class="n">800</span><em>系列</em></div>
      <div class="conc">1 mg/mL</div>
      <div class="forms">甘油液体 / 冻干粉（可定制）</div>
      <div class="custom">浓度、缓冲体系与包装规格可按项目调整；冻干粉按说明书复溶。</div>
    </div>
  </section>

  <section class="evidence">
    <div class="big3">
      <div class="n">3×</div>
      <div class="lb"><b>同酶量相对信号</b><br>Luciferase 与 Supplier N 对比</div>
      <div class="bars">
        <div class="bar-row"><span class="name">Luciferase</span><span class="track"><span class="fill" style="width:100%"></span></span><span class="val">100</span></div>
        <div class="bar-row"><span class="name">Supplier N</span><span class="track"><span class="fill" style="width:33%;background:#B9D3DA"></span></span><span class="val">33</span></div>
      </div>
    </div>
    <div class="chart">
      <div class="ch"><h2>7 天活力保留</h2><span>以 0 天活力为 100%</span></div>
      <div class="plot">
        <div class="grp"><div class="pair">
          <div class="b" style="height:74%"><span class="v">74</span></div><div class="b alt" style="height:40%"><span class="v">40</span></div>
        </div><div class="gl">37℃</div></div>
        <div class="grp"><div class="pair">
          <div class="b" style="height:77%"><span class="v">77</span></div><div class="b alt" style="height:55%"><span class="v">55</span></div>
        </div><div class="gl">25℃</div></div>
        <div class="grp"><div class="pair">
          <div class="b" style="height:90%"><span class="v">90</span></div><div class="b alt" style="height:88%"><span class="v">88</span></div>
        </div><div class="gl">4℃</div></div>
      </div>
      <div class="legend">深色 = Luciferase　浅色 = Supplier N</div>
      <div class="note">加速稳定性：4℃ / 25℃ / 37℃，0 / 2 / 4 / 7 天取样，图中为第 7 天；信号为化学发光 RLU。Supplier N 为匿名同类产品。</div>
    </div>
  </section>

  <section class="metrics">
    <div class="metric"><b>0.1 pmol</b><span>最低检测限 ATP/管（3σ 法）</span></div>
    <div class="metric"><b>0.1–200 pmol</b><span>ATP 线性范围</span></div>
    <div class="metric"><b>R² ≥ 0.999</b><span>线性相关系数</span></div>
    <div class="metric"><b>24 个月</b><span>液体版 −20℃ 效期</span></div>
  </section>

  <section class="tech">
    <div><h3>检测平台</h3><p>化学发光模块微孔板酶标仪（96 孔白板，无需滤光片）；手持式 ATP 荧光检测仪（单管检测）。室温 20–25℃ 读数，积分 15 秒/次。</p></div>
    <div><h3>样本适用</h3><p>细胞、细菌、组织等含 ATP 样本均可适用；不同样本的差异由裂解 / 前处理方案适配。</p></div>
    <div><h3>形式与保存</h3><p>甘油液体：−20℃ 保存，效期 24 个月；冻干粉：可按需定制，按说明书复溶。避免反复冻融。</p></div>
  </section>

  <section class="reaction-apps">
    <div><h3>反应原理</h3><div class="eq">D-Luciferin + ATP + O₂ <b>— Luciferase / Mg²⁺ →</b> Oxyluciferin + AMP + CO₂ + PPi + 光</div></div>
    <div class="apps"><h3>应用方向</h3><p>ATP 检测与定量<i>·</i>细胞活力 / 代谢分析<i>·</i>ATP 检测试剂盒开发<i>·</i>分子生物学研究</p></div>
  </section>

  <section class="spec"><h3>订购信息</h3>
    <table>
      <tr><td class="k">产品</td><td class="v"><b>Luciferase</b>　萤火虫荧光素酶</td><td class="k">货号</td><td class="v"><b>E800系列</b></td></tr>
      <tr><td class="k">浓度</td><td class="v">1 mg/mL</td><td class="k">形式</td><td class="v">甘油液体 / 冻干粉（可定制）</td></tr>
      <tr><td class="k">保存</td><td class="v">液体版 −20℃，24 个月</td><td class="k">复溶</td><td class="v">冻干粉按说明书复溶</td></tr>
      <tr><td class="k">检测体系</td><td class="v" colspan="3">D-Luciferin + ATP / Mg²⁺，化学发光 RLU；适配化学发光酶标仪与手持式 ATP 检测仪</td></tr>
    </table>
  </section>

  <div class="footer">
    <div class="qr"><img src="data:image/png;base64,__QR__"><span class="vt">扫码申请试用</span></div>
    <div class="info"><b>珠海宝锐生物科技有限公司</b><br>0756-8699969　|　marketing@biori.com　|　www.biori.com<br>广东省珠海市香洲区水岸一路 88 号</div>
    <div class="sg">BIORI BIOTECH<br>守护生命健康，缔造美好生活</div>
  </div>
</div></body></html>'''

HTML = HTML.replace('__LOGO__', LOGO).replace('__QR__', QR)
OUT_HTML.write_text(HTML, encoding='utf-8')
print('saved', OUT_HTML, OUT_HTML.stat().st_size)
