#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""Luciferase A4 / E 版「One Glow」编辑式重排。
设计目标：一个焦点（产品名+3×）、一个验证图、无卡片网格、无渐变、无细线框。
事实口径沿用 B 版，不改数字、货号、竞品匿名写法。
"""
import base64, os
from pathlib import Path

ROOT = Path('/Users/liuxinyuan/Desktop/Hermes输出-工作类')
OUT = ROOT / '对外物料/Luciferase_A4_E版_编辑式_20261029.html'
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}
html,body{margin:0;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:7mm 12mm 5mm;display:flex;flex-direction:column;overflow:hidden}
.mast{height:12mm;display:flex;align-items:center;flex:0 0 12mm}
.mast img{width:30mm;height:auto;display:block}
.mast .sl{margin-left:auto;font-size:6.4pt;color:#4C6475;letter-spacing:.3pt}
.hero{height:78mm;margin:3mm -12mm 0;padding:7mm 12mm 6mm;background:#071D33;color:#fff;
  display:grid;grid-template-columns:1.05fr .95fr;column-gap:8mm;flex:0 0 78mm;position:relative;overflow:hidden}
.hero .kicker{font-size:8.2pt;color:#8FDDEA;letter-spacing:.4pt;margin:0 0 3mm}
.hero h1{font-size:47pt;line-height:.88;letter-spacing:-.035em;font-weight:600;margin:0;color:#fff}
.hero .cn{font-size:15pt;font-weight:500;color:#D9F5FA;margin:2.5mm 0 0}
.hero .lead{font-size:8.4pt;line-height:1.65;color:#C9DCE7;margin:4mm 0 0;max-width:92mm}
.hero .forms{margin-top:5mm;display:flex;gap:6mm;font-size:7pt;color:#9FC5D3}
.hero .forms b{display:block;font-size:8.4pt;color:#fff;font-weight:600;margin-bottom:.6mm}
.hero-code{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-bottom:2mm}
.hero-code .big{font-size:40pt;line-height:.88;font-weight:600;letter-spacing:-.045em;color:#fff}
.hero-code .big .n{color:#00D2E8}
.hero-code .big em{font-style:normal;font-size:12pt;color:#8FDDEA;letter-spacing:.12em;margin-left:2.5mm}
.hero-code .conc{font-size:18pt;font-weight:500;color:#D9F5FA;margin-top:4mm;letter-spacing:.01em}
.hero-code .forms{font-size:9pt;color:#C9DCE7;margin-top:2mm}
.hero-code .custom{font-size:6.8pt;line-height:1.6;color:#7FA9B8;margin-top:5mm;max-width:58mm}
.evidence{height:58mm;margin-top:3mm;display:grid;grid-template-columns:42mm 1fr;column-gap:10mm;flex:0 0 58mm}
.big3{display:flex;flex-direction:column;justify-content:center}
.big3 .n{font-size:56pt;line-height:.82;font-weight:600;letter-spacing:-.04em;color:#071D33}
.big3 .lb{font-size:8.6pt;line-height:1.55;color:#415A6B;margin-top:2mm}
.big3 .lb b{color:#071D33}
.bars{margin-top:4mm}
.bar-row{display:flex;align-items:center;gap:2.5mm;margin-top:2mm;font-size:6.3pt;color:#5A7080}
.bar-row .name{width:12mm;flex:0 0 12mm}
.bar-row .track{height:3.2mm;background:#D9E6EA;flex:1;position:relative}
.bar-row .fill{height:100%;background:#00A8C6}
.bar-row .val{width:9mm;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:4mm}
.chart .ch h2{font-size:10pt;margin:0;font-weight:600;color:#071D33}
.chart .ch span{font-size:6.4pt;color:#6B7F8C}
.plot{height:35mm;margin-top:2mm;display:flex;align-items:flex-end;gap:8mm;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:2mm;height:27mm}
.b{width:6.2mm;position:relative;background:#071D33}
.b.alt{background:#B9D3DA}
.b .v{position:absolute;left:50%;transform:translateX(-50%);top:-4.2mm;font-size:6.4pt;font-weight:600;color:#071D33;white-space:nowrap}
.b.alt .v{color:#607886}
.grp .gl{font-size:6.4pt;color:#415A6B;margin-top:1.6mm}
.legend{font-size:5.9pt;color:#6B7F8C;margin-top:1.4mm;text-align:right}
.note{font-size:5.8pt;line-height:1.5;color:#6B7F8C;margin-top:1.8mm}
.why{height:30mm;margin-top:4mm;display:grid;grid-template-columns:repeat(3,1fr);column-gap:8mm;flex:0 0 30mm}
.why h3{font-size:10pt;margin:0 0 2mm;color:#071D33;font-weight:600}
.why h3 em{font-style:normal;color:#00A8C6}
.why p{font-size:8.2pt;line-height:1.8;color:#415A6B;margin:0}
.reaction{height:20mm;margin-top:3mm;display:grid;grid-template-columns:1.35fr .65fr;column-gap:10mm;flex:0 0 20mm;align-items:start}
.reaction h3,.apps h3,.spec h3{font-size:9.4pt;margin:0 0 1.6mm;color:#071D33;font-weight:600}
.eq{font-size:8.2pt;line-height:1.7;color:#274357}
.eq b{color:#007F98;font-weight:600}
.small{font-size:7.0pt;line-height:1.65;color:#5B7180}
.apps{height:14mm;margin-top:2mm;flex:0 0 14mm}
.apps p{font-size:8.0pt;line-height:1.8;color:#274357;margin:0}
.apps i{font-style:normal;color:#9EB3BE;padding:0 1.2mm}
.spec{height:35mm;margin-top:3mm;flex:0 0 35mm}
table{width:100%;border-collapse:collapse;font-size:7.1pt;line-height:1.45}
td{padding:1.35mm 1mm;border-bottom:.4pt solid #C9DADF;vertical-align:top;color:#274357}
td.k{width:22mm;color:#6B7F8C;white-space:nowrap}
td.v{color:#071D33;font-weight:500}
td.v b{font-weight:600}
.footer{height:18mm;margin-top:auto;display:flex;align-items:center;gap:3.5mm;flex:0 0 18mm}
.footer .qr{width:16mm;flex:0 0 16mm;display:flex;flex-direction:column;align-items:center;gap:.5mm}
.footer .qr img{width:12.5mm;height:12.5mm;display:block}
.footer .vt{font-size:5.2pt;color:#415A6B;white-space:nowrap;line-height:1}
.footer .info{font-size:6.1pt;line-height:1.5;color:#415A6B}
.footer .info b{font-size:6.7pt;color:#071D33}
.footer .sg{margin-left:auto;text-align:right;font-size:6pt;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 检测、报告基因与体外诊断发光体系提供稳定的核心酶原料。</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">本品</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">深色 = 本品　浅色 = Supplier N</div>
      <div class="note">加速稳定性：4℃ / 25℃ / 37℃，0 / 2 / 4 / 7 天；信号为化学发光 RLU。竞品为 Supplier N。</div>
    </div>
  </section>

  <section class="why">
    <div><h3>信号更强 <em>/</em> 用量更省</h3><p>同酶量下 RLU 约为 Supplier N 的 3 倍；达到同等信号要求时可减少酶用量。</p></div>
    <div><h3>耐温更稳 <em>/</em> 运输更宽容</h3><p>37℃ 7 天保留 74%，25℃ 7 天保留 77%；冻干后性能稳定，为运输与现场检测提供更宽的温度窗口。</p></div>
    <div><h3>形式灵活 <em>/</em> 按需定制</h3><p>提供甘油液体与冻干粉两种形式；浓度、缓冲体系与包装规格可按项目调整。</p></div>
  </section>

  <section class="reaction">
    <div><h3>反应原理</h3><div class="eq">D-Luciferin + ATP + O₂ → Oxyluciferin + AMP + CO₂ + PPi + 光（<b>Mg²⁺</b> 参与）</div></div>
    <div><h3>检测体系</h3><div class="small">底物 D-Luciferin · 辅因子 ATP / Mg²⁺<br>读出：化学发光 RLU</div></div>
  </section>

  <section class="apps"><h3>应用方向</h3><p>ATP 检测与定量<i>·</i>报告基因<i>·</i>细胞活力 / 代谢<i>·</i>试剂盒开发<i>·</i>IVD 发光体系<i>·</i>分子生物学</p></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℃ 长期保存，避免反复冻融</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</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.write_text(HTML, encoding='utf-8')
print('saved', OUT, OUT.stat().st_size)
