<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>高维学堂 HTML 课件</title>
  <style>
    :root {
      --gw-blue: #00A0EB;
      --gw-deep-blue: #0000FF;
      --paper: #ffffff;
      --bg: #f5f7fa;
      --ink: #111111;
      --muted: #555555;
      --line: #222222;
      --soft-line: #d9e1e8;
      --pale: #f2f5f7;
      --accent-bg: #eaf7fe;
      --shadow: 0 18px 50px rgba(15, 38, 59, 0.12);
      --font: "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
    }

    .deck-shell {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
      padding: 16px;
    }

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      max-width: 1280px;
      width: 100%;
      margin: 0 auto;
      color: var(--muted);
      font-size: 14px;
    }

    .toolbar strong { color: var(--ink); font-size: 16px; }
    .toolbar-actions { display: flex; align-items: center; gap: 8px; }
    button {
      border: 1px solid var(--soft-line);
      background: var(--paper);
      color: var(--ink);
      border-radius: 6px;
      padding: 8px 12px;
      font-family: inherit;
      font-size: 14px;
      cursor: pointer;
    }
    button:hover { border-color: var(--gw-blue); color: var(--gw-blue); }

    .stage-wrap {
      display: grid;
      place-items: center;
      min-height: 0;
    }

    .stage {
      width: min(1280px, calc(100vw - 32px));
      aspect-ratio: 16 / 9;
      position: relative;
      background: var(--paper);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .slide {
      position: absolute;
      inset: 0;
      display: none;
      grid-template-rows: auto 1fr auto;
      padding: 56px 64px 36px;
      background: var(--paper);
    }

    .slide.active { display: grid; }

    .topline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.35;
      border-bottom: 2px solid var(--soft-line);
      padding-bottom: 14px;
    }

    .kicker {
      color: var(--gw-blue);
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .content {
      display: grid;
      align-content: center;
      gap: 28px;
      min-height: 0;
    }

    h1, h2, h3, p { margin: 0; }
    h1 {
      font-size: clamp(42px, 5.4vw, 70px);
      line-height: 1.08;
      letter-spacing: 0;
      max-width: 980px;
    }

    h2 {
      font-size: clamp(40px, 4.1vw, 56px);
      line-height: 1.15;
      letter-spacing: 0;
    }

    h3 {
      font-size: 30px;
      line-height: 1.22;
      letter-spacing: 0;
    }

    .lead {
      font-size: 32px;
      line-height: 1.42;
      color: var(--muted);
      max-width: 900px;
    }

    .big-number {
      color: var(--gw-blue);
      font-size: 82px;
      line-height: 0.92;
      font-weight: 800;
    }

    .grid-3, .grid-2 {
      display: grid;
      gap: 22px;
    }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }

    .card {
      border: 2px solid var(--line);
      border-radius: 8px;
      padding: 24px;
      min-height: 160px;
      background: var(--paper);
    }

    .card h3 { margin-bottom: 14px; }
    .card p, li {
      font-size: 29px;
      line-height: 1.38;
      color: var(--ink);
    }

    ul.clean {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 16px;
    }
    ul.clean li {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 14px;
      align-items: start;
    }
    ul.clean li::before {
      content: "";
      width: 14px;
      height: 14px;
      margin-top: 12px;
      background: var(--gw-blue);
      display: block;
    }

    .matrix {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 28px;
      line-height: 1.35;
    }
    .matrix th, .matrix td {
      border: 2px solid var(--line);
      padding: 16px 18px;
      vertical-align: top;
    }
    .matrix th {
      background: var(--pale);
      font-weight: 800;
      color: var(--ink);
    }

    .flow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      align-items: stretch;
    }
    .step {
      border: 2px solid var(--line);
      padding: 22px;
      position: relative;
      min-height: 190px;
      background: var(--paper);
    }
    .step b {
      display: inline-block;
      color: var(--gw-blue);
      font-size: 24px;
      margin-bottom: 14px;
    }
    .step p { font-size: 28px; line-height: 1.38; }

    .figure-card {
      border: 2px solid var(--line);
      padding: 24px;
      display: grid;
      gap: 18px;
    }
    .figure-title {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 16px;
      align-items: baseline;
      font-size: 24px;
      color: var(--muted);
    }
    .figure-title strong {
      font-size: 31px;
      color: var(--ink);
    }
    .placeholder-chart {
      height: 300px;
      border: 2px solid var(--line);
      background:
        linear-gradient(to top, rgba(0, 160, 235, 0.12), rgba(0, 160, 235, 0.12)),
        repeating-linear-gradient(to right, transparent 0, transparent 19%, var(--soft-line) 19.2%, transparent 19.4%),
        repeating-linear-gradient(to top, transparent 0, transparent 24%, var(--soft-line) 24.2%, transparent 24.4%);
      display: grid;
      place-items: center;
      color: var(--muted);
      font-size: 24px;
    }

    .cue {
      border-left: 8px solid var(--gw-blue);
      background: var(--accent-bg);
      padding: 20px 24px;
      font-size: 30px;
      line-height: 1.38;
      color: var(--ink);
    }

    .footer {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
      border-top: 2px solid var(--soft-line);
      padding-top: 14px;
      color: var(--muted);
      font-size: 16px;
    }

    .confidential {
      position: absolute;
      right: 34px;
      bottom: 18px;
      color: #777;
      font-size: 14px;
    }

    .progress {
      max-width: 1280px;
      width: 100%;
      height: 5px;
      background: #dfe6ec;
      margin: 0 auto;
      border-radius: 99px;
      overflow: hidden;
    }
    .progress span {
      display: block;
      height: 100%;
      width: 0;
      background: var(--gw-blue);
      transition: width 0.2s ease;
    }

    @media (max-width: 860px) {
      .deck-shell { padding: 8px; }
      .toolbar { flex-direction: column; align-items: stretch; }
      .stage {
        width: calc(100vw - 16px);
        aspect-ratio: auto;
        min-height: calc(100vh - 150px);
      }
      .slide {
        position: relative;
        inset: auto;
        min-height: calc(100vh - 150px);
        padding: 28px 22px 24px;
      }
      .grid-3, .grid-2, .flow { grid-template-columns: 1fr; }
      h1 { font-size: 42px; }
      h2 { font-size: 36px; }
      .lead, .card p, li, .cue { font-size: 25px; }
      .matrix { font-size: 22px; }
    }

    @page {
      size: A4 landscape;
      margin: 0;
    }
    @media print {
      body { background: #fff; }
      .deck-shell { display: block; padding: 0; }
      .toolbar, .progress { display: none !important; }
      .stage {
        width: 297mm;
        height: auto;
        aspect-ratio: auto;
        box-shadow: none;
        overflow: visible;
      }
      .slide, .slide.active {
        display: grid !important;
        position: relative;
        width: 297mm;
        height: 210mm;
        page-break-after: always;
        break-after: page;
        overflow: hidden;
      }
      .slide:last-child { page-break-after: auto; break-after: auto; }
      button { display: none; }
      * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }
  </style>
</head>
<body>
  <main class="deck-shell">
    <header class="toolbar">
      <div><strong id="deckTitle">课程名称</strong> <span id="slideCounter">1 / 5</span></div>
      <div class="toolbar-actions">
        <button type="button" data-action="prev">上一页</button>
        <button type="button" data-action="next">下一页</button>
        <button type="button" data-action="fullscreen">全屏</button>
        <button type="button" data-action="print">打印</button>
      </div>
    </header>

    <section class="stage-wrap">
      <div class="stage" id="stage">
        <article class="slide active" data-title="封面">
          <div class="topline">
            <span class="kicker">高维学堂</span>
            <span>课程日期 / 讲师姓名</span>
          </div>
          <div class="content">
            <h1>用一句清晰承诺说明这门课能带走什么</h1>
            <p class="lead">副标题只保留一层解释：对象、场景、核心成果。</p>
          </div>
          <div class="footer">
            <span>课程名称_姓名_日期</span>
            <span>01</span>
          </div>
        </article>

        <article class="slide" data-title="学习地图">
          <div class="topline">
            <span class="kicker">学习地图</span>
            <span>先建立全景，再进入方法</span>
          </div>
          <div class="content">
            <h2>这门课帮助学员完成三个动作：看见问题、选择方法、带回工具</h2>
            <div class="grid-3">
              <div class="card"><h3>识别</h3><p>能判断当前业务卡点属于哪一类问题。</p></div>
              <div class="card"><h3>决策</h3><p>能选择合适的模型、工具或流程切入点。</p></div>
              <div class="card"><h3>应用</h3><p>能把课堂方法转成一张可执行清单。</p></div>
            </div>
          </div>
          <div class="footer"><span>学习全景图</span><span>02</span></div>
        </article>

        <article class="slide" data-title="核心观点">
          <div class="topline">
            <span class="kicker">核心观点</span>
            <span>标题直接给结论</span>
          </div>
          <div class="content">
            <h2>一页只证明一个结论，学员才会跟上老师的讲解</h2>
            <ul class="clean">
              <li>页面承担视觉提纲，不替代完整讲稿。</li>
              <li>复杂逻辑转成结构图，细节放到补充材料。</li>
              <li>每页保留一个讨论入口，方便现场互动。</li>
            </ul>
            <div class="cue">讲解提示：用一个业务现场例子说明为什么文字越多，课堂注意力越容易分散。</div>
          </div>
          <div class="footer"><span>字少图清，讲解为主</span><span>03</span></div>
        </article>

        <article class="slide" data-title="图表页">
          <div class="topline">
            <span class="kicker">图表页</span>
            <span>编码 + 洞察 + 来源</span>
          </div>
          <div class="content">
            <h2>复杂图表必须先告诉学员该看什么</h2>
            <div class="figure-card">
              <div class="figure-title">
                <span>图1</span>
                <strong>核心洞察写成一句判断</strong>
                <span>来源：XX研究院2024</span>
              </div>
              <div class="placeholder-chart">替换为高清图表或重绘图形，线条至少 2px，标签 22px+</div>
            </div>
          </div>
          <div class="footer"><span>数据年份：2021-2023</span><span>04</span></div>
        </article>

        <article class="slide" data-title="速查页">
          <div class="topline">
            <span class="kicker">工具速查</span>
            <span>手册中最常被翻阅的页面</span>
          </div>
          <div class="content">
            <h2>把核心模型压成一页可复用清单</h2>
            <table class="matrix">
              <thead>
                <tr>
                  <th>场景</th>
                  <th>判断问题</th>
                  <th>工具/模型</th>
                  <th>输出物</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>现状诊断</td>
                  <td>卡点在哪里</td>
                  <td>问题分层表</td>
                  <td>优先级清单</td>
                </tr>
                <tr>
                  <td>方案设计</td>
                  <td>先改什么</td>
                  <td>影响/难度矩阵</td>
                  <td>行动路径</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="footer"><span>表格不超过5列，黑色网格优先</span><span>05</span></div>
          <div class="confidential">内部资料，请勿外传</div>
        </article>
      </div>
    </section>

    <div class="progress" aria-hidden="true"><span id="progressBar"></span></div>
  </main>

  <script>
    const slides = Array.from(document.querySelectorAll(".slide"));
    const counter = document.getElementById("slideCounter");
    const progress = document.getElementById("progressBar");
    const title = document.getElementById("deckTitle");
    let index = 0;

    function showSlide(nextIndex) {
      index = Math.max(0, Math.min(slides.length - 1, nextIndex));
      slides.forEach((slide, i) => slide.classList.toggle("active", i === index));
      counter.textContent = `${index + 1} / ${slides.length}`;
      progress.style.width = `${((index + 1) / slides.length) * 100}%`;
      const slideTitle = slides[index].dataset.title || "";
      if (slideTitle) document.title = `${title.textContent} - ${slideTitle}`;
      history.replaceState(null, "", `#${index + 1}`);
    }

    function fromHash() {
      const value = Number(location.hash.replace("#", ""));
      if (Number.isFinite(value) && value >= 1) showSlide(value - 1);
    }

    document.addEventListener("click", (event) => {
      const action = event.target.closest("button")?.dataset.action;
      if (!action) return;
      if (action === "prev") showSlide(index - 1);
      if (action === "next") showSlide(index + 1);
      if (action === "print") window.print();
      if (action === "fullscreen") document.documentElement.requestFullscreen?.();
    });

    document.addEventListener("keydown", (event) => {
      if (["ArrowRight", "PageDown", " "].includes(event.key)) {
        event.preventDefault();
        showSlide(index + 1);
      }
      if (["ArrowLeft", "PageUp"].includes(event.key)) {
        event.preventDefault();
        showSlide(index - 1);
      }
      if (event.key === "Home") showSlide(0);
      if (event.key === "End") showSlide(slides.length - 1);
    });

    window.addEventListener("hashchange", fromHash);
    fromHash();
    showSlide(index);
  </script>
</body>
</html>
