<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
  Template: wechat-cover-split
  Ratio: 335:100 (left 2.35:1 + right 1:1)
  用途: 公众号文章封面长条图，左文案右 icon，可裁成两张
  Parameters:
    {{MAIN_TEXT_LINE1}}     — 第一行文字
    {{MAIN_TEXT_LINE2}}     — 第二行文字
    {{MAIN_TEXT_LINE3}}     — 预留，不显示
    {{LINE1_CLASS}}         — "highlight" 或 ""
    {{LINE2_CLASS}}         — "highlight" 或 ""
    {{LINE3_CLASS}}         — "highlight" 或 ""
    {{HIGHLIGHT_COLOR}}     — 高亮色
    {{BG_COLOR}}            — 背景色
    {{FOOTER_TEXT}}         — 底部文字
    {{ICON_PATH}}           — 右侧 icon 绝对路径
    {{FONT_PATH}}           — 字体绝对路径
-->
<style>
  @font-face {
    font-family: "AlimamaShuHeiTi";
    src: url("{{FONT_PATH}}") format("truetype");
  }
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: {{BG_COLOR}};
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    color: #111;
    font-family: "AlimamaShuHeiTi", "PingFang SC", sans-serif;
  }
  .canvas {
    position: fixed;
    inset: 0;
    display: flex;
    background: {{BG_COLOR}};
  }
  .left {
    width: 940px;
    height: 400px;
    padding: 34px 48px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background:
      radial-gradient(circle at top right, rgba(255,255,255,0.38), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)),
      {{BG_COLOR}};
  }
  .eyebrow {
    font-size: 18px;
    letter-spacing: 0.5px;
    color: rgba(0,0,0,0.38);
  }
  .text-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
  }
  .line {
    font-size: 72px;
    line-height: 1.02;
    letter-spacing: -1.5px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
  .line.highlight { color: {{HIGHLIGHT_COLOR}}; }
  .highlight { color: {{HIGHLIGHT_COLOR}}; }
  .line.empty {
    display: none;
  }
  .footer {
    position: absolute;
    left: 48px;
    bottom: 24px;
    font-size: 16px;
    color: rgba(0,0,0,0.42);
    letter-spacing: 1px;
  }
  .right {
    width: 400px;
    height: 400px;
    border-left: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06)),
      color-mix(in srgb, {{HIGHLIGHT_COLOR}} 7%, white);
    position: relative;
  }
  .icon-shell {
    width: 232px;
    height: 232px;
    border-radius: 56px;
    background: rgba(255,255,255,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 22px 50px rgba(0,0,0,0.08);
    padding: 24px;
  }
  .icon-shell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 28px;
  }
  .grid-mark {
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 28px;
    pointer-events: none;
  }
</style>
</head>
<body>
  <div class="canvas">
    <section class="left">
      <div class="eyebrow">{{FOOTER_TEXT}}</div>
      <div class="text-block">
        <div class="line {{LINE1_CLASS}}" id="l1">{{MAIN_TEXT_LINE1}}</div>
        <div class="line {{LINE2_CLASS}}" id="l2">{{MAIN_TEXT_LINE2}}</div>
      </div>
      <div class="footer"></div>
    </section>

    <aside class="right">
      <div class="grid-mark"></div>
      <div class="icon-shell">
        <img src="{{ICON_PATH}}" alt="icon">
      </div>
    </aside>
  </div>

  <script>
    ['l1', 'l2'].forEach(id => {
      const el = document.getElementById(id);
      if (!el.textContent.trim()) el.classList.add('empty');
    });
  </script>
</body>
</html>
