#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""Luciferase A4 — B 数据看板结构 × 生物荧光设计语言（规格强化）"""
import base64

def b64(p): return base64.b64encode(open(p,'rb').read()).decode()
LOGO=b64('/tmp/luc_logo.png'); QR=b64('/Users/liuxinyuan/work/公司资料/试用装申请.png')
OUT='/Users/liuxinyuan/Desktop/Hermes输出-工作类/对外物料/Luciferase_A4_B版_生物荧光规格强化_20261027.html'

VIALS='''<svg viewBox="0 0 200 230" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#eaffff" stop-opacity=".95"/><stop offset=".5" stop-color="#68e6ff" stop-opacity=".35"/><stop offset="1" stop-color="#0b7fa8" stop-opacity=".35"/></linearGradient>
<linearGradient id="g2" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7ef7ff" stop-opacity=".9"/><stop offset="1" stop-color="#0a8ec7" stop-opacity=".95"/></linearGradient>
<linearGradient id="g3" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#062b45"/><stop offset=".5" stop-color="#19b9d8"/><stop offset="1" stop-color="#062b45"/></linearGradient>
<filter id="gl"><feGaussianBlur stdDeviation="4" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
</defs>
<ellipse cx="100" cy="218" rx="72" ry="10" fill="#36e6ff" opacity=".18" filter="url(#gl)"/>
<g transform="translate(6 16) rotate(-7 52 100)" filter="url(#gl)">
<rect x="18" y="48" width="68" height="145" rx="15" fill="url(#g1)" stroke="#8cf3ff" stroke-width="1.2"/>
<rect x="23" y="104" width="58" height="84" rx="10" fill="url(#g2)" opacity=".78"/>
<rect x="12" y="27" width="80" height="30" rx="7" fill="url(#g3)"/>
<rect x="21" y="70" width="62" height="32" rx="4" fill="#fff" opacity=".92"/>
<text x="52" y="82" text-anchor="middle" font-size="6.6" fill="#062b45" font-weight="700">Luciferase</text>
<text x="52" y="93" text-anchor="middle" font-size="5.1" fill="#415a70">E800系列</text>
<text x="52" y="101" text-anchor="middle" font-size="4.8" fill="#415a70">1 mg/mL</text>
</g>
<g transform="translate(72 30) rotate(6 52 100)" filter="url(#gl)">
<rect x="18" y="48" width="68" height="145" rx="15" fill="url(#g1)" stroke="#8cf3ff" stroke-width="1.2"/>
<rect x="23" y="120" width="58" height="68" rx="10" fill="#eaffff" opacity=".92"/>
<rect x="12" y="27" width="80" height="30" rx="7" fill="url(#g3)"/>
<rect x="21" y="70" width="62" height="32" rx="4" fill="#fff" opacity=".92"/>
<text x="52" y="82" text-anchor="middle" font-size="6.6" fill="#062b45" font-weight="700">Luciferase</text>
<text x="52" y="93" text-anchor="middle" font-size="5.1" fill="#415a70">冻干粉 · 定制</text>
<text x="52" y="101" text-anchor="middle" font-size="4.8" fill="#415a70">lyophilized</text>
</g>
</svg>'''

SIG='''<svg viewBox="0 0 340 110" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="14" width="236" height="30" rx="5" fill="#5ee0ff"/><text x="246" y="37" font-size="16" fill="#7ef7ff" font-weight="700">100</text>
<rect x="0" y="62" width="78" height="30" rx="5" fill="#6b7f95"/><text x="88" y="85" font-size="16" fill="#8fb3c4" font-weight="700">33</text>
<text x="0" y="108" font-size="8" fill="#dff6ff">Luciferase</text><text x="178" y="108" font-size="8" fill="#8fb3c4">Supplier N</text>
</svg>'''

RET='''<svg viewBox="0 0 340 190" xmlns="http://www.w3.org/2000/svg">
<line x1="20" y1="158" x2="330" y2="158" stroke="#2c5a70"/>
<line x1="20" y1="52" x2="330" y2="52" stroke="#1d4557"/>
<rect x="38" y="58" width="34" height="100" rx="4" fill="#5ee0ff"/><text x="42" y="50" font-size="12" fill="#7ef7ff" font-weight="700">74</text>
<rect x="78" y="104" width="34" height="54" rx="4" fill="#6b7f95"/><text x="82" y="96" font-size="12" fill="#8fb3c4">40</text>
<rect x="143" y="53" width="34" height="105" rx="4" fill="#5ee0ff"/><text x="147" y="45" font-size="12" fill="#7ef7ff" font-weight="700">77</text>
<rect x="183" y="83" width="34" height="75" rx="4" fill="#6b7f95"/><text x="187" y="75" font-size="12" fill="#8fb3c4">55</text>
<rect x="248" y="40" width="34" height="118" rx="4" fill="#5ee0ff"/><text x="252" y="32" font-size="12" fill="#7ef7ff" font-weight="700">90</text>
<rect x="288" y="45" width="30" height="113" rx="4" fill="#6b7f95"/><text x="288" y="37" font-size="12" fill="#8fb3c4">88</text>
<text x="43" y="176" font-size="9" fill="#dff6ff">37℃</text><text x="148" y="176" font-size="9" fill="#dff6ff">25℃</text><text x="253" y="176" font-size="9" fill="#dff6ff">4℃</text>
<text x="112" y="176" font-size="8" fill="#8fb3c4">本品</text><text x="208" y="176" font-size="8" fill="#8fb3c4">竞品</text>
</svg>'''

html=f'''<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><style>
@page{{size:A4;margin:0}}
*{{box-sizing:border-box;margin:0;padding:0}}
html,body{{width:210mm;height:297mm;overflow:hidden}}
body{{font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif;color:#eafcff;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.page{{width:210mm;height:297mm;padding:8mm 10mm 7mm;position:relative;overflow:hidden;display:flex;flex-direction:column;
background:radial-gradient(circle at 74% 10%,rgba(0,220,255,.20),transparent 32%),radial-gradient(circle at 12% 86%,rgba(0,255,210,.12),transparent 28%),linear-gradient(160deg,#03101f 0%,#06253b 52%,#083b4a 100%)}}
.grid{{position:absolute;inset:0;background-image:linear-gradient(rgba(120,240,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,240,255,.055) 1px,transparent 1px);background-size:12mm 12mm;mask-image:radial-gradient(circle at 50% 42%,#000 0%,transparent 78%)}}
.glow{{position:absolute;border-radius:50%;filter:blur(18mm);pointer-events:none}}
.g1{{width:95mm;height:95mm;right:-18mm;top:-14mm;background:rgba(0,220,255,.22)}}
.g2{{width:75mm;height:75mm;left:-24mm;bottom:18mm;background:rgba(0,255,200,.14)}}
.top{{display:flex;align-items:center;position:relative;z-index:3;flex:0 0 auto}}
.logo-chip{{background:#fff;border-radius:2mm;padding:1.5mm 2.5mm;display:flex;align-items:center}}
.logo-chip img{{height:7.6mm;display:block}}
.pill{{margin-left:auto;border:1pt solid rgba(140,243,255,.55);color:#9ff4ff;border-radius:20mm;padding:1.3mm 3.4mm;font-size:6.2pt;letter-spacing:1.1pt;background:rgba(10,60,80,.35)}}
.hero{{position:relative;z-index:3;display:grid;grid-template-columns:1fr 52mm 40mm;gap:3mm;align-items:center;height:47mm;margin-top:2.5mm;flex:0 0 auto}}
.kicker{{font-size:6.4pt;color:#6ee9ff;letter-spacing:1.7pt}}
h1{{font-size:14pt;color:#eafcff;margin-top:1mm;letter-spacing:.4pt}}
h1 b{{display:block;font-size:31pt;line-height:.98;letter-spacing:-.7pt;color:#fff;margin-top:.6mm}}
h1 span{{display:block;font-size:10.5pt;font-weight:400;color:#9fdfea;margin-top:1mm}}
.sub{{font-size:6.9pt;color:#a8d8e4;line-height:1.55;margin-top:1.6mm}}
.spec{{background:rgba(255,255,255,.07);border:1pt solid rgba(126,247,255,.38);border-radius:2.4mm;padding:2.6mm 3mm;box-shadow:0 0 8mm rgba(0,220,255,.12);backdrop-filter:blur(8px)}}
.spec .lab{{font-size:6pt;color:#6ee9ff;letter-spacing:1.4pt;display:flex;justify-content:space-between}}
.spec .big{{font-size:27pt;font-weight:800;color:#fff;line-height:1;margin-top:1mm;letter-spacing:-.5pt}}
.spec .big small{{font-size:8pt;font-weight:500;color:#9fdfea;letter-spacing:0}}
.spec .code{{font-size:8.2pt;color:#7ef7ff;font-weight:600;margin-top:1.2mm;letter-spacing:.4pt}}
.spec .tags{{display:flex;gap:1mm;flex-wrap:wrap;margin-top:1.4mm}}
.spec .tags span{{font-size:5.6pt;color:#dff6ff;border:1px solid rgba(140,243,255,.3);border-radius:1mm;padding:.35mm 1mm}}
.vials{{align-self:end;margin-bottom:-3mm}}
.vials svg{{width:100%;height:auto;display:block;filter:drop-shadow(0 0 9px rgba(80,230,255,.42))}}
.main{{display:grid;grid-template-columns:1.03fr .97fr;gap:3mm;height:140mm;margin-top:1mm;flex:0 0 auto}}
.left{{display:flex;flex-direction:column;gap:2mm;height:100%}}
.box{{background:rgba(5,35,52,.5);border:1px solid rgba(140,243,255,.15);border-radius:2mm;padding:1.9mm 2.5mm;backdrop-filter:blur(8px)}}
h2{{font-size:8.6pt;color:#eafcff;margin:0 0 .8mm;display:flex;align-items:center;gap:1.8mm;letter-spacing:.3pt}}
h2:before{{content:"";width:1mm;height:3.2mm;background:#5ee0ff;border-radius:.5mm}}
.reaction img{{width:100%;display:block}}
.reaction .eq{{font-size:5.9pt;color:#a8d8e4;line-height:1.35;margin-top:.6mm}}
.apps{{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3mm}}
.app{{background:rgba(255,255,255,.055);border-radius:1.1mm;padding:1.7mm 1mm;text-align:center;font-size:5.9pt;color:#9fc4cf;line-height:1.25}}
.app b{{display:block;color:#7ef7ff;font-size:6.7pt;margin-bottom:.15mm}}
.app em{{display:block;font-style:normal;color:#dff6ff;font-size:6pt}}
.forms{{display:flex;gap:1.4mm}}
.forms div{{flex:1;background:rgba(255,255,255,.055);border-radius:1.1mm;padding:1.3mm;text-align:center;font-size:5.7pt;color:#9fc4cf}}
.forms b{{display:block;font-size:6.6pt;color:#dff6ff}}
table{{width:100%;border-collapse:collapse;font-size:6.2pt}}
th{{color:#9ff4ff;text-align:left;padding:.8mm 1.2mm;border-bottom:1px solid rgba(140,243,255,.2);font-weight:600}}
td{{color:#a8d8e4;padding:.8mm 1.2mm;border-bottom:1px solid rgba(140,243,255,.1)}}
td b{{color:#eafcff}}
.dash{{background:rgba(3,26,40,.62);border:1px solid rgba(140,243,255,.2);border-radius:2.4mm;padding:2.6mm 2.8mm;display:flex;flex-direction:column;gap:1.7mm;backdrop-filter:blur(10px)}}
.dash .ttl{{font-size:8.2pt;color:#eafcff;letter-spacing:.5pt;display:flex;justify-content:space-between}}
.dash .ttl span{{font-size:5.7pt;color:#6f9fad;letter-spacing:0}}
.row{{display:flex;gap:1.8mm}}
.metric{{flex:1;background:rgba(255,255,255,.065);border:1px solid rgba(140,243,255,.16);border-radius:1.5mm;padding:1.6mm 1.6mm}}
.metric b{{display:block;font-size:17pt;color:#7ef7ff;line-height:1;font-weight:800}}
.metric span{{display:block;font-size:5.7pt;color:#a8d8e4;margin-top:.6mm}}
.metric em{{display:block;font-style:normal;font-size:5.5pt;color:#6f9fad;margin-top:.4mm}}
.chart{{background:rgba(2,22,34,.6);border:1px solid rgba(140,243,255,.13);border-radius:1.4mm;padding:1.4mm 1.8mm}}
.chart .ct{{font-size:6.1pt;color:#9ff4ff;font-weight:600;margin-bottom:.3mm}}
.chart svg{{width:100%;height:auto;display:block}}
.note{{font-size:5.5pt;color:#6f9fad;line-height:1.35}}
.compare{{margin-top:2mm;flex:0 0 auto;background:rgba(5,35,52,.55);border:1px solid rgba(140,243,255,.16);border-radius:2mm;padding:2mm 2.4mm}}
.compare table{{font-size:6.2pt}}
.compare th{{padding:.9mm 1.4mm}}
.compare td{{padding:.9mm 1.4mm}}
.compare .note{{margin-top:.8mm}}
.summary{{display:flex;gap:2mm;margin-top:2mm;flex:0 0 auto}}
.summary div{{flex:1;background:rgba(255,255,255,.055);border:1px solid rgba(140,243,255,.14);border-radius:1.4mm;padding:1.5mm 2mm;text-align:center}}
.summary b{{display:block;color:#7ef7ff;font-size:11pt;line-height:1.05}}
.summary span{{font-size:5.7pt;color:#9fc4cf}}
.footer{{margin-top:auto;display:flex;align-items:center;gap:3.2mm;border-top:1px solid rgba(140,243,255,.16);padding-top:1.6mm;flex:0 0 auto}}
.qr{{display:flex;align-items:center;gap:1.5mm}}
.qr img{{width:14mm;height:14mm;object-fit:contain;background:#fff;border-radius:1mm;padding:.5mm}}
.qr .vt{{writing-mode:vertical-rl;font-size:5.8pt;color:#9ff4ff;letter-spacing:.7pt;background:rgba(0,200,230,.12);padding:1mm .6mm;border-radius:1mm}}
.contact{{font-size:5.8pt;color:#9fc4cf;line-height:1.5}}
.contact b{{font-size:6.6pt;color:#eafcff}}
.slogan{{margin-left:auto;text-align:right;font-size:5.8pt;color:#6ee9ff;letter-spacing:.5pt}}
</style></head><body><div class="page">
<div class="grid"></div><div class="glow g1"></div><div class="glow g2"></div>
<div class="top"><div class="logo-chip"><img src="data:image/png;base64,{LOGO}"></div><span class="pill">BIOLUMINESCENT DATA · SPEC / 2026</span></div>

<div class="hero">
<div><div class="kicker">RECOMBINANT FIREFLY LUCIFERASE</div>
<h1><span style="font-size:9pt;color:#9fdfea;display:block;margin-bottom:.4mm">同酶量，信号约 3×</span><b>Luciferase</b><span>萤火虫荧光素酶</span></h1>
<div class="sub">基因工程改造 · 37℃ 7 天 74% · 25℃ 7 天 77%<br>液体 / 冻干双形式 · 支持定制</div></div>

<div class="spec"><div class="lab"><span>SPEC / 规格</span><span>E800</span></div>
<div class="big">1 mg/mL</div>
<div class="code">E800系列</div>
<div class="tags"><span>甘油液体</span><span>冻干粉</span><span>可定制</span></div></div>

<div class="vials">{VIALS}</div>
</div>

<div class="main">
<div class="left">
  <div class="box"><h2>反应原理</h2><div class="reaction"><img src="data:image/jpeg;base64,{b64('/tmp/luc_reaction.jpg')}"><div class="eq">D-Luciferin + ATP + O₂ → Oxyluciferin + AMP + CO₂ + PPi + 光（Mg²⁺ 参与）</div></div></div>
  <div class="box"><h2>应用方向</h2><div class="apps">
    <div class="app"><b>ATP</b><em>检测与定量</em>细胞/微生物</div><div class="app"><b>REPORT</b><em>报告基因</em>启动子活性</div><div class="app"><b>CELL</b><em>活力/代谢</em>增殖与毒性</div>
    <div class="app"><b>KIT</b><em>试剂盒开发</em>核心酶原料</div><div class="app"><b>IVD</b><em>体外诊断原料</em>发光体系</div><div class="app"><b>RESEARCH</b><em>分子生物学</em>基因表达</div>
  </div></div>
  <div class="box"><h2>产品形式</h2><div class="forms"><div><b>甘油液体</b>1 mg/mL</div><div><b>冻干粉</b>稳定 / 定制</div><div><b>定制</b>浓度/缓冲/规格</div></div></div>
  <div class="box"><h2>货号与规格</h2><table>
    <tr><th>产品</th><th>货号</th><th>规格</th><th>形式</th></tr>
    <tr><td>Luciferase</td><td><b>E800系列</b></td><td><b>1 mg/mL</b></td><td>液体/冻干粉</td></tr>
  </table></div>
</div>

<div class="dash">
  <div class="ttl">核心性能 / CORE PERFORMANCE <span>同酶量对比</span></div>
  <div class="row">
    <div class="metric"><b>3×</b><span>荧光信号</span><em>Luciferase vs Supplier N</em></div>
    <div class="metric"><b>74%</b><span>37℃ 7 天</span><em>竞品 40%</em></div>
    <div class="metric"><b>77%</b><span>25℃ 7 天</span><em>竞品 55%</em></div>
  </div>
  <div class="chart"><div class="ct">相对信号（同酶量）</div>{SIG}</div>
  <div class="chart"><div class="ct">7 天活力保留（%）</div>{RET}</div>
  <div class="note">加速稳定性：4℃/25℃/37℃、0/2/4/7 天；信号为化学发光 RLU，0 天活力记为 100%；竞品为 Supplier N。</div>
</div>
</div>

<div class="compare"><table>
<tr><th style="width:23%">关键指标</th><th style="width:30%">Luciferase</th><th style="width:20%">Supplier N</th><th>说明</th></tr>
<tr><td><b>规格 / 货号</b></td><td><b>1 mg/mL｜E800系列</b></td><td>—</td><td>甘油液体 / 冻干粉，可定制</td></tr>
<tr><td>相对信号（同酶量）</td><td><b>100（≈3×）</b></td><td>33</td><td>同酶量、同检测体系，RLU</td></tr>
<tr><td>37℃ 7 天活力</td><td><b>74%</b></td><td>40%</td><td>加速稳定性</td></tr>
<tr><td>25℃ 7 天活力</td><td><b>77%</b></td><td>55%</td><td>加速稳定性</td></tr>
<tr><td>4℃ 7 天活力</td><td><b>90%</b></td><td>88%</td><td>加速稳定性</td></tr>
</table><div class="note">数据来源：Luciferase 与 Supplier N 加速稳定性对比；0 天活力记为 100%。</div></div>

<div class="summary"><div><b>1 mg/mL</b><span>规格</span></div><div><b>E800系列</b><span>货号</span></div><div><b>液体 / 冻干</b><span>形式可选 · 支持定制</span></div></div>

<div class="footer"><div class="qr"><img src="data:image/png;base64,{QR}"><span class="vt">扫码申请试用</span></div>
<div class="contact"><b>珠海宝锐生物科技有限公司</b><br>0756-8699969 ｜ marketing@biori.com ｜ www.biori.com<br>广东省珠海市香洲区水岸一路 88 号</div>
<div class="slogan">BIORI BIOTECH<br>守护生命健康，缔造美好生活</div></div>
</div></body></html>'''
open(OUT,'w',encoding='utf-8').write(html); print('saved',OUT,len(html))