#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""按 E800-020714 彩页的设计语言，重做 Luciferase A4 两页彩页。

设计语言：浅蓝科研底、白色纸张卡、蓝色区块标题、六边形线性图标、
蓝/青/绿数据色、页脚蓝色信息带、二维码。
"""
import base64
import os
from pathlib import Path

BASE = Path('/Users/liuxinyuan/Desktop/Hermes输出-工作类')
OUT_HTML = BASE / '对外物料' / '荧光素酶_A4彩页_设计语言版_20261102_V02.html'
LOGO = Path('/Users/liuxinyuan/work/公司资料/logo_transparent.png')
QR = Path('/Users/liuxinyuan/work/公司资料/试用装申请.png')


def data_uri(p: Path) -> str:
    return 'data:image/png;base64,' + base64.b64encode(p.read_bytes()).decode('ascii')


LOGO_URI = data_uri(LOGO)
QR_URI = data_uri(QR)

# 图标：线性描边，放进六边形底
ICONS = {
    'signal': '<path d="M4 20V10M9 20V4M14 20v-7M19 20V7"/><path d="M3 20h18"/>',
    'temp': '<path d="M10 4a2 2 0 0 1 4 0v10a4 4 0 1 1-4 0V4Z"/><path d="M12 8v8"/>',
    'cube': '<path d="m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z"/><path d="m4 7.5 8 4.5 8-4.5M12 12v9"/>',
    'plate': '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 9h.01M11 9h.01M15 9h.01M7 13h.01M11 13h.01M15 13h.01M7 17h.01M11 17h.01M15 17h.01"/>',
    'sample': '<path d="M9 3h6M10 3v6l-5 8a3 3 0 0 0 2.6 4h8.8a3 3 0 0 0 2.6-4l-5-8V3"/><path d="M8 15h8"/>',
    'chart': '<path d="M4 20V4h16v16H4Z"/><path d="m7 15 3-4 3 2 4-6"/>',
}


def icon(name, cls=''):
    return f'<svg class="ico {cls}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">{ICONS[name]}</svg>'


# 图表数据：源资料 / 0/2/4/7 天
SERIES = [
    ('Supplier N · 4℃', [1202, 905, 940, 1060], '#C7DCEB'),
    ('Supplier N · 25℃', [1202, 929, 857, 655], '#9FC4DC'),
    ('Supplier N · 37℃', [1202, 821, 714, 488], '#79A9C8'),
    ('Luciferase · 4℃', [3250, 3155, 2988, 2917], '#0B5FA5'),
    ('Luciferase · 25℃', [3250, 2917, 2595, 2488], '#00A8C6'),
    ('Luciferase · 37℃', [3250, 3071, 2893, 2393], '#78B94A'),
]
RET = [
    ('Supplier N · 4℃', [100, 75, 78, 88], '#C7DCEB'),
    ('Supplier N · 25℃', [100, 77, 71, 55], '#9FC4DC'),
    ('Supplier N · 37℃', [100, 68, 60, 40], '#79A9C8'),
    ('Luciferase · 4℃', [100, 97, 92, 90], '#0B5FA5'),
    ('Luciferase · 25℃', [100, 90, 80, 77], '#00A8C6'),
    ('Luciferase · 37℃', [100, 94, 89, 74], '#78B94A'),
]


def bar_chart(series, maxv, suffix='', yticks=None):
    W, H = 390, 232
    left, right, top, bottom = 35, 8, 12, 30
    plot_w, plot_h = W - left - right, H - top - bottom
    groups = 4
    gw = plot_w / groups
    bar_w = gw / (len(series) + 0.8)
    parts = [f'<svg class="barsvg" viewBox="0 0 {W} {H}" preserveAspectRatio="none">']
    # grid + y labels
    if yticks is None:
        yticks = [0, maxv * 0.25, maxv * 0.5, maxv * 0.75, maxv]
    for v in yticks:
        y = top + plot_h - (v / maxv) * plot_h
        parts.append(f'<line x1="{left}" y1="{y:.1f}" x2="{W-right}" y2="{y:.1f}" stroke="#DCE8EF" stroke-width="1"/>')
        lab = f'{v:g}'
        parts.append(f'<text x="{left-5}" y="{y+3:.1f}" text-anchor="end" class="axis">{lab}</text>')
    # bars
    for gi, day in enumerate(['0d', '2d', '4d', '7d']):
        gx = left + gi * gw
        for si, (name, vals, color) in enumerate(series):
            v = vals[gi]
            bh = (v / maxv) * plot_h
            x = gx + (gw - bar_w * len(series)) / 2 + si * bar_w
            y = top + plot_h - bh
            parts.append(f'<rect x="{x:.1f}" y="{y:.1f}" width="{bar_w*0.82:.1f}" height="{bh:.1f}" fill="{color}" rx="0.6"/>')
        parts.append(f'<text x="{gx+gw/2:.1f}" y="{H-10}" text-anchor="middle" class="axis axis-x">{day}</text>')
    parts.append(f'<line x1="{left}" y1="{top+plot_h}" x2="{W-right}" y2="{top+plot_h}" stroke="#9FB9C9" stroke-width="1"/>')
    parts.append('</svg>')
    return ''.join(parts)


HTML = f"""<!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; background: #DCEBF5; color: #0B2A43; font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }}
.sheet {{ width: 210mm; height: 297mm; position: relative; overflow: hidden; background: #EAF6FC; }}
.sheet + .sheet {{ break-before: page; page-break-before: always; }}
.paper {{ position: absolute; left: 7mm; top: 7mm; width: 196mm; height: 283mm; background: #fff; border-radius: 2.2mm; box-shadow: 0 2mm 6mm rgba(20,73,112,.16); padding: 6mm 8mm 5mm; display: flex; flex-direction: column; overflow: hidden; z-index: 2; }}
.bg {{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }}
.bg svg {{ width: 100%; height: 100%; display: block; }}
.mast {{ height: 12mm; display: flex; align-items: center; flex: 0 0 12mm; gap: 6mm; position: relative; z-index: 2; }}
.mast .logo {{ height: 10.5mm; width: auto; display: block; }}
.mast .tagline {{ font-size: 5.4pt; color: #5B8AA6; letter-spacing: .02em; margin-left: 1.5mm; }}
.mast .mastline {{ margin-left: auto; display: flex; align-items: center; gap: 4mm; }}
.code {{ display: inline-flex; align-items: center; gap: 2mm; background: #0B5FA5; color: #fff; font-size: 7.2pt; font-weight: 700; letter-spacing: .04em; padding: 1.7mm 3mm; border-radius: 1mm; }}
.code b {{ color: #BDEBFF; font-weight: 500; }}
.qr-top {{ display: flex; align-items: center; gap: 2mm; }}
.qr-top img {{ width: 13mm; height: 13mm; object-fit: contain; border: .4mm solid #CFE4F0; border-radius: .8mm; padding: .4mm; background: #fff; }}
.qr-top span {{ font-size: 5.6pt; color: #477087; line-height: 1.35; width: 10mm; }}
.hero {{ height: 48mm; flex: 0 0 48mm; padding-top: 3mm; position: relative; z-index: 2; }}
.kicker {{ font-size: 6.6pt; letter-spacing: .22em; color: #5B8AA6; font-weight: 600; }}
h1 {{ font-size: 33pt; line-height: .95; letter-spacing: -.035em; color: #083E68; font-weight: 700; margin-top: 2.5mm; }}
h1 span {{ font-size: 17pt; letter-spacing: .02em; font-weight: 500; color: #0B5FA5; margin-left: 3mm; }}
.lede {{ font-size: 8pt; line-height: 1.68; color: #335D75; max-width: 126mm; margin-top: 3.4mm; }}
.lede b {{ color: #0B5FA5; }}
.hero-badge {{ position: absolute; right: 0; top: 9mm; width: 44mm; background: #F2FAFD; border: .5mm solid #B9DCEB; border-radius: 2mm; padding: 4mm 4mm 3.5mm; text-align: center; }}
.hero-badge .big {{ font-family: Georgia,serif; font-size: 28pt; line-height: .9; color: #0B5FA5; font-weight: 700; letter-spacing: -.04em; }}
.hero-badge .lab {{ font-size: 6.2pt; line-height: 1.45; color: #4A7288; margin-top: 2mm; }}
.hero-badge .line {{ height: .5mm; width: 14mm; background: #78B94A; margin: 2.4mm auto; }}
.hero-badge .sub {{ font-size: 5.8pt; color: #5D8499; line-height: 1.45; }}
.bar {{ height: 8.6mm; flex: 0 0 8.6mm; background: #0B5FA5; color: #fff; border-radius: 1.2mm; display: flex; align-items: center; gap: 2.5mm; padding: 0 3.6mm; font-size: 9.2pt; font-weight: 700; letter-spacing: .03em; position: relative; z-index: 2; box-shadow: 0 1mm 2mm rgba(11,95,165,.15); }}
.bar:before {{ content: ""; width: 4.3mm; height: 4.3mm; background: #8ED3EA; clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); }}
.bar .en {{ font-size: 5.8pt; font-weight: 500; letter-spacing: .12em; color: #BDEBFF; margin-left: auto; }}
.product {{ margin-top: 2.2mm; height: 34mm; flex: 0 0 34mm; border: .45mm solid #C9E2EE; border-radius: 1.6mm; overflow: hidden; position: relative; z-index: 2; }}
.product table {{ width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 7.2pt; }}
.product th {{ background: #E5F4FA; color: #0D527E; font-weight: 700; padding: 2.1mm 2.6mm; text-align: left; border-bottom: .5mm solid #0B5FA5; }}
.product td {{ padding: 2.4mm 2.6mm; border-bottom: .3mm solid #D9E8EF; vertical-align: top; color: #173F57; }}
.product td b {{ color: #0B5FA5; font-weight: 700; }}
.product .forms {{ padding: 2.4mm 3mm; font-size: 6.8pt; color: #4E7286; line-height: 1.5; background: #FAFDFE; }}
.product .forms b {{ color: #0B5FA5; }}
.adv-wrap {{ margin-top: 2.6mm; flex: 0 0 116mm; min-height: 0; position: relative; z-index: 2; }}
.adv-grid {{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: repeat(2, minmax(0,1fr)); gap: 2.2mm; margin-top: 1.8mm; height: 105mm; }}
.adv {{ border: .4mm solid #D4E7EF; border-top: 1.1mm solid #00A8C6; border-radius: 1.5mm; padding: 2.5mm 3mm 2.2mm; background: #FCFEFF; min-width: 0; overflow: hidden; }}
.adv:nth-child(2), .adv:nth-child(5) {{ border-top-color: #78B94A; }}
.adv:nth-child(3), .adv:nth-child(6) {{ border-top-color: #F5A623; }}
.hex {{ width: 8.8mm; height: 8.8mm; margin-bottom: 1.5mm; background: #E1F3FA; clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); display: flex; align-items: center; justify-content: center; color: #0B5FA5; }}
.hex svg {{ width: 5mm; height: 5mm; }}
.adv h3 {{ font-size: 8.2pt; line-height: 1.3; color: #0B3D62; margin-bottom: 1mm; }}
.adv p {{ font-size: 6.1pt; line-height: 1.45; color: #4A6B7D; }}
.adv p b {{ color: #0B5FA5; }}
.apps {{ margin-top: 2.4mm; flex: 0 0 28mm; border: .4mm solid #D4E7EF; border-radius: 1.5mm; background: #F4FBFD; padding: 2.5mm 3.5mm; position: relative; z-index: 2; }}
.apps .at {{ font-size: 6.4pt; color: #0B5FA5; font-weight: 700; letter-spacing: .04em; margin-bottom: 1.4mm; }}
.apps-grid {{ display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5mm; }}
.apps-grid div {{ font-size: 6.1pt; line-height: 1.45; color: #3D6175; border-left: .8mm solid #8CCB9B; padding-left: 2mm; }}
.apps-grid b {{ display: block; font-size: 6.5pt; color: #0B3D62; margin-bottom: .5mm; }}
.bottomline {{ margin-top: 2.5mm; height: 7mm; flex: 0 0 7mm; border-top: .45mm solid #CFE4EE; display: flex; align-items: center; justify-content: space-between; font-size: 5.8pt; color: #5D7E90; letter-spacing: .04em; }}
.bottomline b {{ color: #0B5FA5; }}
.page-no {{ font-family: Georgia,serif; color: #0B5FA5; font-size: 8pt; }}

/* PAGE 2 */
.paper2 {{ padding: 6mm 8mm 4mm; }}
.top2 {{ height: 10mm; flex: 0 0 10mm; display: flex; align-items: center; gap: 3mm; border-bottom: .45mm solid #D6E8F0; }}
.top2 img {{ height: 8.2mm; width: auto; }}
.top2 .t {{ font-size: 6.5pt; color: #4F778D; letter-spacing: .1em; }}
.top2 .t b {{ color: #0B5FA5; }}
.top2 .pg {{ margin-left: auto; font-family: Georgia,serif; color: #0B5FA5; font-size: 8pt; }}
.section2 {{ margin-top: 3mm; }}
.reaction {{ height: 36mm; border: .45mm solid #C9E3EF; border-radius: 1.6mm; background: #FBFEFF; display: flex; align-items: center; gap: 3mm; padding: 3mm 4mm; position: relative; overflow: hidden; }}
.reaction .node {{ flex: 1 1 0; min-width: 0; text-align: center; }}
.reaction .node .lbl {{ font-size: 6.2pt; color: #5B7F92; line-height: 1.4; margin-bottom: 1.3mm; }}
.reaction .node .box {{ border: .45mm solid #BBDCE9; border-radius: 1.4mm; background: #F1FAFD; padding: 2.3mm 2mm; font-size: 6.9pt; line-height: 1.55; color: #16445D; }}
.reaction .node .box b {{ color: #0B5FA5; }}
.reaction .arrow {{ width: 13mm; flex: 0 0 13mm; text-align: center; color: #0B5FA5; font-size: 6.1pt; line-height: 1.3; }}
.reaction .arrow .a {{ font-size: 15pt; line-height: .8; }}
.reaction .light {{ position: absolute; right: 4mm; bottom: 3mm; font-size: 5.8pt; color: #78A34A; }}
.charts {{ display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; margin-top: 2.4mm; height: 122mm; flex: 0 0 122mm; }}
.chart-card {{ border: .45mm solid #CBE2EE; border-radius: 1.6mm; background: #FCFEFF; padding: 3mm 3mm 2mm; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }}
.chart-card h3 {{ font-size: 7.8pt; color: #0B3D62; font-weight: 700; margin-bottom: .8mm; }}
.chart-card .sub {{ font-size: 5.6pt; color: #64869A; margin-bottom: 1.4mm; }}
.barsvg {{ width: 100%; height: 77mm; display: block; overflow: visible; }}
.axis {{ font-size: 5.1px; fill: #6D8A99; font-family: Arial,sans-serif; }}
.axis-x {{ font-size: 6px; fill: #496B7E; font-weight: 600; }}
.legend {{ margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .8mm 2.5mm; font-size: 5.1pt; color: #557486; line-height: 1.35; }}
.legend i {{ display: inline-block; width: 2.3mm; height: 2.3mm; margin-right: 1.2mm; vertical-align: -0.3mm; border-radius: .3mm; }}
.note {{ margin-top: 1.6mm; font-size: 5.3pt; line-height: 1.5; color: #6B8796; }}
.metrics2 {{ display: grid; grid-template-columns: repeat(4,1fr); gap: 2.2mm; margin-top: 2.2mm; flex: 0 0 16mm; }}
.metrics2 div {{ border-top: .9mm solid #00A8C6; background: #F5FBFD; padding: 2mm 2.5mm; }}
.metrics2 b {{ display: block; font-size: 10.5pt; color: #0B3D62; line-height: 1; margin-bottom: 1mm; }}
.metrics2 span {{ font-size: 5.4pt; color: #64869A; line-height: 1.35; }}
.conclusion {{ margin-top: 2.6mm; border-left: 2.2mm solid #78B94A; background: #F3FAF2; padding: 3mm 4mm 3mm 4mm; border-radius: 0 1.4mm 1.4mm 0; }}
.conclusion .ct {{ font-size: 8pt; font-weight: 700; color: #3D7A2D; margin-bottom: 1.2mm; }}
.conclusion p {{ font-size: 6.9pt; line-height: 1.6; color: #3D5B49; }}
.conclusion b {{ color: #0B5FA5; }}
.footer2 {{ margin-top: auto; height: 34mm; flex: 0 0 34mm; background: #0B5FA5; border-radius: 1.8mm 1.8mm 0 0; color: #fff; display: flex; align-items: center; gap: 4mm; padding: 3.5mm 5mm; position: relative; overflow: hidden; }}
.footer2 .info {{ font-size: 6.3pt; line-height: 1.7; color: #D9F1FB; }}
.footer2 .info b {{ font-size: 7pt; color: #fff; }}
.footer2 .qrbox {{ margin-left: auto; text-align: center; flex: 0 0 18mm; }}
.footer2 .qrbox img {{ width: 15mm; height: 15mm; background: #fff; padding: 1mm; border-radius: .8mm; display: block; margin: 0 auto 1mm; }}
.footer2 .qrbox span {{ font-size: 5.3pt; color: #D9F1FB; }}
.footer2 .slogan {{ position: absolute; left: 5mm; bottom: 2.3mm; font-size: 5.1pt; color: #BDEBFF; letter-spacing: .08em; }}
.deco2 {{ position: absolute; right: 3mm; top: 16mm; width: 38mm; opacity: .22; color: #0B5FA5; }}
</style>
</head>
<body>

<!-- ================= PAGE 1 ================= -->
<section class="sheet">
  <div class="bg">
    <svg viewBox="0 0 210 297" preserveAspectRatio="none">
      <defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#D8F0FA"/><stop offset="1" stop-color="#EAF6FC"/></linearGradient></defs>
      <rect width="210" height="297" fill="url(#g1)"/>
      <path d="M-20 65 C35 30 68 55 96 92 C125 130 160 102 235 78 L235 0 L-20 0Z" fill="#C8EAF7" opacity=".9"/>
      <path d="M-20 235 C35 212 65 232 93 262 C122 292 160 274 235 250 L235 297 L-20 297Z" fill="#BEE4F3" opacity=".8"/>
      <circle cx="18" cy="34" r="16" fill="none" stroke="#7FCBE0" stroke-width=".8" opacity=".7"/>
      <circle cx="18" cy="34" r="22" fill="none" stroke="#7FCBE0" stroke-width=".5" opacity=".5"/>
      <circle cx="190" cy="268" r="16" fill="none" stroke="#9BD3A2" stroke-width=".8" opacity=".7"/>
      <circle cx="197" cy="252" r="4" fill="#F5A623" opacity=".65"/>
      <circle cx="32" cy="279" r="5" fill="#78B94A" opacity=".55"/>
    </svg>
  </div>
  <div class="paper">
    <div class="mast bior-header">
      <img class="logo" src="{LOGO_URI}" alt="宝锐生物 BIORI BIOTECH"><span class="tagline">守护生命健康，缔造美好生活</span>
      <div class="mastline">
        <span class="code">货号 <b>E800 系列</b></span>
        <div class="qr-top"><img src="{QR_URI}" alt="申请试用二维码"><span>扫码申请<br>试用装</span></div>
      </div>
    </div>

    <div class="hero">
      <div class="kicker">RECOMBINANT FIREFLY LUCIFERASE</div>
      <h1>Luciferase <span>荧光素酶</span></h1>
      <p class="lede">萤火虫荧光素酶，经<b>基因工程改造</b>的重组蛋白。需要 ATP、分子氧和萤火虫荧光素，在两步反应中产生光信号；适用于 <b>ATP 高灵敏检测、细胞活力/代谢分析和 ATP 检测试剂盒开发</b>。</p>
      <div class="hero-badge">
        <div class="big">2.7×</div>
        <div class="lab">同酶量荧光信号<br>0 天对照实测</div>
        <div class="line"></div>
        <div class="sub">37℃×7d 保留 74%<br>25℃×7d 保留 77%</div>
      </div>
    </div>

    <div class="bar">产品信息 <span class="en">PRODUCT INFORMATION</span></div>
    <div class="product">
      <table>
        <tr><th style="width:27%">产品名称</th><th style="width:23%">货号</th><th style="width:18%">规格</th><th>保存条件</th></tr>
        <tr><td><b>Luciferase</b> 荧光素酶</td><td><b>E800 系列</b></td><td>1 mg/mL</td><td>液体版（含甘油）：−20℃ 保存，效期 24 个月</td></tr>
      </table>
      <div class="forms"><b>形式：</b>甘油液体 / 冻干粉（可定制）；冻干粉按说明书复溶，避免反复冻融。<b>检测体系：</b>D-Luciferin + ATP / Mg²⁺，化学发光 RLU。</div>
    </div>

    <div class="adv-wrap">
      <div class="bar">产品特点 <span class="en">PRODUCT HIGHLIGHTS</span></div>
      <div class="adv-grid">
        <div class="adv"><div class="hex">{icon('signal')}</div><h3>信号更强 · 用量更省</h3><p>同酶量 0 天信号 <b>3,250 vs 1,202（2.7×）</b>；达到同等读数时，所需酶量约为对照的 37%，降低单次实验成本。</p></div>
        <div class="adv"><div class="hex">{icon('temp')}</div><h3>耐温更稳 · 运输更宽容</h3><p><b>37℃×7d 74% vs 40%；25℃×7d 77% vs 55%</b>；为运输与常温操作提供更宽窗口。</p></div>
        <div class="adv"><div class="hex">{icon('cube')}</div><h3>形式灵活 · 按需定制</h3><p>甘油液体：−20℃ / 24 个月；冻干粉按说明书复溶。浓度、缓冲体系与包装规格可按项目调整。</p></div>
        <div class="adv"><div class="hex">{icon('plate')}</div><h3>兼容多种检测平台</h3><p>化学发光模块微孔板酶标仪（96 孔白板、无需滤光片）；手持式 ATP 荧光检测仪；室温 20–25℃、15 s/次。</p></div>
        <div class="adv"><div class="hex">{icon('sample')}</div><h3>样本适用范围广</h3><p>以 ATP 为底物，不依赖样本类型；细胞、细菌、组织等含 ATP 样本均适用，差异由裂解 / 前处理方案适配。</p></div>
        <div class="adv"><div class="hex">{icon('chart')}</div><h3>高灵敏 · 线性范围宽</h3><p>LOD <b>0.1 pmol</b> ATP/管（3σ）；线性 <b>0.1–200 pmol</b>；R² ≥ 0.999，覆盖痕量到宽范围定量。</p></div>
      </div>
    </div>

    <div class="apps">
      <div class="at">应用方向 / APPLICATIONS</div>
      <div class="apps-grid">
        <div><b>ATP 检测与定量</b>0.1–200 pmol 宽范围；R² ≥ 0.999。</div>
        <div><b>细胞活力 / 代谢</b>以 ATP 水平反映细胞状态；信号强、窗口宽。</div>
        <div><b>试剂盒 / 冻干体系</b>甘油液体与冻干粉；支持规格与体系定制。</div>
      </div>
    </div>

    <div class="bottomline"><span><b>E800 系列</b> · 1 mg/mL · 甘油液体 / 冻干粉 · 液体版 −20℃ / 24 个月</span><span class="page-no">01 / 02</span></div>
  </div>
</section>

<!-- ================= PAGE 2 ================= -->
<section class="sheet">
  <div class="bg">
    <svg viewBox="0 0 210 297" preserveAspectRatio="none">
      <rect width="210" height="297" fill="#EAF6FC"/>
      <path d="M-20 40 C50 10 85 50 120 72 C160 96 185 70 235 48 L235 0 L-20 0Z" fill="#CFEDF8" opacity=".9"/>
      <path d="M-20 286 C45 250 70 276 105 292 C145 312 180 280 235 268 L235 297 L-20 297Z" fill="#C4E6F3" opacity=".9"/>
      <circle cx="188" cy="54" r="18" fill="none" stroke="#7FCBE0" stroke-width=".8" opacity=".6"/>
      <circle cx="188" cy="54" r="25" fill="none" stroke="#7FCBE0" stroke-width=".5" opacity=".45"/>
    </svg>
  </div>
  <div class="paper paper2">
    <div class="top2">
      <img src="{LOGO_URI}" alt="宝锐生物 BIORI BIOTECH">
      <div class="t">LUCIFERASE · <b>E800 系列</b> ｜ 技术数据</div>
      <div class="pg">02 / 02</div>
    </div>

    <div class="section2">
      <div class="bar">反应原理示意图 <span class="en">REACTION PRINCIPLE</span></div>
      <div class="reaction">
        <div class="node"><div class="lbl">底物 / SUBSTRATE</div><div class="box"><b>D-荧光素</b><br>+ ATP + O₂</div></div>
        <div class="arrow"><div class="a">→</div>Firefly Luciferase<br>Mg²⁺</div>
        <div class="node"><div class="lbl">产物 / PRODUCT</div><div class="box"><b>氧化荧光素</b><br>+ AMP + CO₂ + PPi</div></div>
        <div class="arrow"><div class="a">→</div>光信号<br>约 560 nm</div>
        <div class="node"><div class="lbl">读出 / READOUT</div><div class="box"><b>化学发光 RLU</b><br>与 ATP 浓度成正比</div></div>
        <div class="light">Light</div>
      </div>
    </div>

    <div class="section2" style="margin-top:2.5mm">
      <div class="bar">同类产品对比数据分析 <span class="en">HEAD-TO-HEAD COMPARISON</span></div>
      <div class="charts">
        <div class="chart-card">
          <h3>加速稳定性对比 · 荧光信号</h3>
          <div class="sub">荧光信号（RLU）· 0d 为对照</div>
          {bar_chart(SERIES, 3500, yticks=[0,1000,2000,3000,3500])}
          <div class="legend">{''.join(f'<span><i style="background:{c}"></i>{n}</span>' for n,c,_ in [(n,c,x) for n,x,c in [(a,b,c) for a,b,c in SERIES]])}</div>
        </div>
        <div class="chart-card">
          <h3>加速稳定性对比 · 活力保留率</h3>
          <div class="sub">活力保留率（%）· 0d 为 100%</div>
          {bar_chart(RET, 100, yticks=[0,20,40,60,80,100])}
          <div class="legend">{''.join(f'<span><i style="background:{c}"></i>{n}</span>' for n,c,_ in [(n,c,x) for n,x,c in [(a,b,c) for a,b,c in RET]])}</div>
        </div>
      </div>
      <div class="note">数据源：宝锐加速稳定性实验（4℃ / 25℃ / 37℃，0 / 2 / 4 / 7 天）；Supplier N 为匿名同类对照样品；0 天同酶量 RLU 3,250 vs 1,202。单次实验、2T/点，未做统计显著性检验。</div>
    </div>

    <div class="metrics2">
      <div><b>0.1 pmol</b><span>最低检测限 ATP/管（3σ）</span></div>
      <div><b>0.1–200 pmol</b><span>ATP 线性范围</span></div>
      <div><b>R² ≥ 0.999</b><span>线性拟合度</span></div>
      <div><b>15 s/次</b><span>室温 20–25℃ 即测即读</span></div>
    </div>

    <div class="conclusion">
      <div class="ct">结论 / CONCLUSION</div>
      <p>在 37℃×7 天加速条件下，Luciferase 活力保留 <b>74%</b>，Supplier N 为 40%；25℃×7 天为 <b>77%</b> 对 55%。0 天同酶量荧光信号 <b>3,250 vs 1,202（2.7×）</b>。数据支持其在常温运输与 ATP 高灵敏检测场景中的适用性；具体体系仍需按客户模板与仪器验证。</p>
    </div>

    <div class="footer2 bior-footer">
      <div class="info"><b>珠海宝锐生物科技有限公司</b><br>Zhuhai Biori Biotechnology Co., Ltd<br>销售咨询：0756-8699969　｜　marketing@biori.com　｜　www.biori.com<br>地址：珠海市香洲区水岸一路 88 号</div>
      <div class="qrbox"><img src="{QR_URI}" alt="扫码申请试用"><span>扫码申请试用</span></div>
      <div class="slogan">守护生命健康，缔造美好生活　｜　BIORI BIOTECH</div>
    </div>
  </div>
</section>
</body>
</html>
"""

OUT_HTML.write_text(HTML, encoding='utf-8')
print('written', OUT_HTML, OUT_HTML.stat().st_size)
