fmode
/
skill-video-lapian


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ meta.title }} · 拉片报告</title>
<style>
  :root {
    --bg:#0a0e17; --surface:#111827; --card:#1a2332; --border:#2a3a52;
    --text:#e2e8f0; --muted:#94a3b8; --brand:#3b82f6; --brand-light:#60a5fa;
    --green:#10b981; --yellow:#f59e0b; --red:#ef4444; --purple:#8b5cf6;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
         background:var(--bg); color:var(--text); line-height:1.7; padding-bottom:80px; }

  /* === 顶部视频播放器(点击分段跳转对应时间) === */
  .video-bar { position:sticky; top:0; z-index:100; background:#000;
               border-bottom:1px solid var(--border); }
  .video-bar video { width:100%; max-height:56vw; display:block;
                     object-fit:contain; background:#000; }
  @media (min-width:600px){ .video-bar video { max-height:340px; } }
  .time-indicator { position:absolute; bottom:8px; right:12px;
                    background:rgba(0,0,0,.7); color:#fff; padding:2px 8px;
                    border-radius:4px; font-size:.8rem; }
  .main { max-width:960px; margin:0 auto; padding:0 16px; }

  .head { text-align:center; margin:24px 0 8px; }
  .head h1 { font-size:1.5rem; color:var(--brand-light); }
  .head p { color:var(--muted); font-size:.9rem; margin-top:4px; }

  .section { margin:32px 0; }
  .section > h2 { font-size:1.25rem; font-weight:700; color:var(--brand-light);
                  padding-bottom:10px; border-bottom:2px solid var(--brand);
                  margin-bottom:16px; }

  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
  .grid6 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0; }
  @media (min-width:600px){ .grid6 { grid-template-columns:repeat(6,1fr); } }
  .stat { background:var(--card); border:1px solid var(--border); border-radius:10px;
          padding:12px 8px; text-align:center; }
  .stat .num { display:block; font-size:1.25rem; font-weight:700; color:var(--brand-light); }
  .stat .label { font-size:.75rem; color:var(--muted); }

  table { width:100%; border-collapse:collapse; margin:12px 0; font-size:.9rem; }
  th, td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--border); }
  th { background:var(--surface); color:var(--brand-light); font-weight:600; }

  /* === 可折叠分析分段 === */
  .seg { background:var(--card); border:1px solid var(--border); border-radius:10px;
         margin:12px 0; overflow:hidden; }
  .seg-h { display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer;
           user-select:none; }
  .seg-h:active { background:var(--surface); }
  .seg-h .t { color:var(--brand-light); font-weight:600; white-space:nowrap; font-size:.85rem; }
  .seg-h .p { flex:1; color:var(--muted); font-size:.85rem; overflow:hidden;
              text-overflow:ellipsis; white-space:nowrap; }
  .seg-h .a { color:var(--muted); transition:transform .2s; }
  .seg.open .seg-h .a { transform:rotate(180deg); }
  .seg-b { display:none; padding:4px 14px 14px; }
  .seg.open .seg-b { display:block; }
  .quote { background:var(--surface); padding:12px; border-radius:8px; margin:8px 0;
           border-left:3px solid var(--brand); font-style:italic; font-size:.98rem; }
  .frame { width:100%; border-radius:8px; margin:8px 0; border:1px solid var(--border); }
  .cap { color:var(--muted); font-size:.8rem; margin:-4px 0 8px; }
  .play-btn { background:var(--brand); color:#fff; border:none; padding:6px 14px;
              border-radius:6px; cursor:pointer; font-size:.85rem; margin:4px 0 10px; }
  .analysis p { margin:8px 0; font-size:.93rem; color:var(--text); }
  .analysis .muted { color:var(--muted); }
  .tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.75rem; margin:2px; }
  .tag-blue { background:rgba(59,130,246,.15); color:var(--brand-light); }
  .tag-green { background:rgba(16,185,129,.15); color:var(--green); }
  .tag-yellow { background:rgba(245,158,11,.15); color:var(--yellow); }
  .tag-purple { background:rgba(139,92,246,.15); color:var(--purple); }
  .tag-red { background:rgba(239,68,68,.15); color:var(--red); }
  code.reuse { display:block; color:var(--brand-light); background:var(--surface);
               padding:8px 10px; border-radius:6px; font-size:.85rem; margin-top:6px;
               overflow-x:auto; }

  .callout { border-left:4px solid var(--brand); background:var(--surface);
             padding:12px 14px; border-radius:0 8px 8px 0; margin:12px 0; font-size:.92rem; }
  .callout.green { border-color:var(--green); }

  /* === 纯CSS条形图 === */
  .bar-row { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:.85rem; }
  .bar-row .w { width:6.5em; color:var(--muted); text-align:right; flex-shrink:0;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bar-row .track { flex:1; background:var(--surface); border-radius:4px; height:18px; }
  .bar-row .fill { height:100%; border-radius:4px; background:var(--brand);
                   min-width:2px; }
  .bar-row .v { width:3.2em; color:var(--muted); font-size:.78rem; flex-shrink:0; }

  .comment { background:var(--surface); border-radius:8px; padding:10px 12px; margin:8px 0; }
  .comment .u { font-weight:600; font-size:.85rem; color:var(--brand-light); }
  .comment .u .lk { color:var(--muted); font-weight:400; margin-left:8px; }
  .comment .tx { font-size:.9rem; margin:4px 0; }
  .comment .in { font-size:.8rem; color:var(--green); }

  .foot { text-align:center; color:var(--muted); font-size:.75rem; margin-top:40px; }
  .foot a { color:var(--brand-light); }
</style>
</head>
<body>

<div class="video-bar" id="playerBar">
  <video id="mainVideo" controls playsinline preload="metadata">
    <source src="video.mp4" type="video/mp4">
  </video>
  <div class="time-indicator" id="timeDisplay">0:00</div>
</div>

<div class="main">

<div class="head">
  <h1>🎬 {{ meta.title }}</h1>
  <p>{{ meta.subtitle }}</p>
</div>

<div class="section">
  <div class="grid6">
    {% for s in stats_cards %}<div class="stat"><span class="num">{{ s.num }}</span><span class="label">{{ s.label }}</span></div>{% endfor %}
  </div>
  <table>
    {% if meta.author %}<tr><td style="width:6em">作者</td><td><strong>{{ meta.author }}</strong>{% if meta.author_signature %} — {{ meta.author_signature }}{% endif %}</td></tr>{% endif %}
    {% if meta.tags %}<tr><td>标签</td><td>{% for t in meta.tags %}<span class="tag tag-blue">#{{ t }}</span> {% endfor %}</td></tr>{% endif %}
    <tr><td>发布时间</td><td>{{ meta.publish_time or "—" }}</td></tr>
    <tr><td>报告信息</td><td>{{ meta.aweme_id or "local" }} · {{ meta.generated_at }} · 平台 {{ meta.platform }} · 分析引擎 {{ meta.llm_engine }}</td></tr>
  </table>
</div>

<div class="section">
  <h2>📝 逐段拉片({{ segments|length }}段 · 点击展开 · ⏵跳转播放)</h2>
  {% for seg in segments %}
  <div class="seg{% if loop.first %} open{% endif %}" id="seg{{ loop.index }}">
    <div class="seg-h" onclick="toggleSeg(this)">
      <span class="t">⏱ {{ seg.t_start }} — {{ seg.t_end }}</span>
      <span class="p">{{ seg.preview }}</span>
      <span class="a">▼</span>
    </div>
    <div class="seg-b">
      <div class="quote">"{{ seg.text }}"</div>
      <button class="play-btn" onclick="seekTo({{ seg.t_start_s }})">⏵ 播放这一段</button>
      {% if seg.frame %}
      <img class="frame" loading="lazy" src="frames/{{ seg.frame.file }}" alt="f{{ seg.frame.frame }}">
      <p class="cap">🖼 抽帧 f{{ seg.frame.frame }} @ {{ seg.frame.t_label }}{% if seg.frame.caption %} — {{ seg.frame.caption }}{% endif %}</p>
      {% endif %}
      <div class="analysis">
        {% if seg.techniques %}<p><strong>🎯 技法：</strong>{% for tc in seg.techniques %}<span class="tag {{ tc.cls }}">{{ tc.label }}</span> {% endfor %}</p>{% endif %}
        <p>{{ seg.comment_html }}</p>
        {% if seg.reuse %}<p class="muted"><strong>💡 可复用模板：</strong></p><code class="reuse">{{ seg.reuse }}</code>{% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<div class="section">
  <h2>📐 整体结构(起承转合)</h2>
  <table>
    <tr><th>段</th><th>时间</th><th>功能</th><th>技法</th></tr>
    {% for r in structure_rows %}<tr><td>{{ r.stage }}</td><td>{{ r.time }}</td><td>{{ r.func }}</td><td>{{ r.techniques }}</td></tr>{% endfor %}
  </table>
  {% if summary_html %}<div class="callout"><strong>🎯 核心发现：</strong>{{ summary_html }}</div>{% endif %}
</div>

{% if wordfreq %}
<div class="section">
  <h2>📊 词频TOP / 情绪分布</h2>
  <div class="grid3">
    <div class="stat"><span class="num">{{ meta.word_count }}</span><span class="label">总字数</span></div>
    <div class="stat"><span class="num">{{ meta.wpm }}</span><span class="label">语速(字/分)</span></div>
    <div class="stat"><span class="num">{{ meta.sentence_count }}</span><span class="label">句数</span></div>
  </div>
  <h3 style="margin:14px 0 8px;color:var(--text)">高频实词 TOP{{ wordfreq|length }}</h3>
  {% for w in wordfreq %}
  <div class="bar-row"><span class="w">{{ w.word }}</span><div class="track"><div class="fill" style="width:{{ w.pct }}%;background:var(--brand-light)"></div></div><span class="v">{{ w.count }}</span></div>
  {% endfor %}
  <h3 style="margin:14px 0 8px;color:var(--text)">情绪分布</h3>
  {% for s in sentiment %}
  <div class="bar-row"><span class="w">{{ s.label }}</span><div class="track"><div class="fill" style="width:{{ s.pct }}%;background:{{ s.color }}"></div></div><span class="v">{{ s.pct }}%</span></div>
  {% endfor %}
</div>
{% endif %}

{% if comments %}
<div class="section">
  <h2>💬 评论区VOC分析({{ comment_total }}条)</h2>
  <div class="grid3">
    {% for s in comment_stats %}<div class="stat"><span class="num" style="color:{{ s.color }}">{{ s.pct }}%</span><span class="label">{{ s.label }}</span></div>{% endfor %}
  </div>
  <h3 style="margin:14px 0 8px;color:var(--text)">高赞评论 TOP{{ top_comments|length }}</h3>
  {% for c in top_comments %}
  <div class="comment">
    <div class="u">{{ c.nickname }}<span class="lk">👍{{ c.likes }}</span></div>
    <div class="tx">{{ c.text }}</div>
    {% if c.insight %}<div class="in">💡 {{ c.insight }}</div>{% endif %}
  </div>
  {% endfor %}
  {% if comment_keywords %}
  <h3 style="margin:14px 0 8px;color:var(--text)">评论关键词</h3>
  {% for w in comment_keywords %}
  <div class="bar-row"><span class="w">{{ w.word }}</span><div class="track"><div class="fill" style="width:{{ w.pct }}%;background:var(--green)"></div></div><span class="v">{{ w.count }}</span></div>
  {% endfor %}
  {% endif %}
</div>
{% endif %}

{% if suggestions %}
<div class="section">
  <h2>🛠 可执行建议</h2>
  {% for sg in suggestions %}<div class="callout green"><strong>{{ loop.index }}. {{ sg.title }}</strong> — {{ sg.body }}</div>{% endfor %}
</div>
{% endif %}

<p class="foot">由 skill-video-lapian 生成 · 资源全部相对路径, 目录自包含 · 报告ID {{ meta.report_id }}</p>
</div>

<script>
function toggleSeg(h){
  var seg = h.parentElement;
  seg.classList.toggle('open');
  if (seg.classList.contains('open') && window.innerWidth < 600) {
    setTimeout(function(){ seg.scrollIntoView({behavior:'smooth', block:'start'}); }, 60);
  }
}
function seekTo(sec){
  var v = document.getElementById('mainVideo');
  if (!v) return;
  try { v.currentTime = sec; } catch(e) {}
  var p = v.play(); if (p && p.catch) p.catch(function(){});
}
(function(){
  var v = document.getElementById('mainVideo'), d = document.getElementById('timeDisplay');
  if (v && d) v.addEventListener('timeupdate', function(){
    var m = Math.floor(v.currentTime/60), s = Math.floor(v.currentTime%60);
    d.textContent = m + ':' + (s<10?'0':'') + s;
  });
})();
</script>
</body>
</html>