qoder-ppt-v2

Qoder PPT Generator v2

Convert the script into an HTML presentation in Qoder brand style.

Template file：template.html(in the same directory)

---

Core layout

Cover page: fully centered

.slide.cover {
  justify-content: center;
  align-items: center;
  padding: 60px 120px;
}

Content page: title at top + content centered

.slide { padding: 120px 120px 80px 120px; }
.content-center { flex: 1; }
.content-center > *:not(h2) { margin: auto 0; }

---

Page structure

Cover page

<section class="slide cover active">
  <div class="brand"><span class="logo">QODER</span></div>
  <div class="content">
    <h1><span class="highlight">关键词</span> 主标题</h1>
    <p class="subtitle">副标题</p>
  </div>
  <span class="page-number">01</span>
</section>

Content page (general structure)

<section class="slide {type}">
  <div class="brand"><span class="logo">QODER</span></div>
  <div class="content-center">
    <h2 class="section-title">标题</h2>
    <!-- 内容区域 -->
  </div>
  <span class="page-number">02</span>
</section>

---

Content area types

Points list (points)

<ul class="point-list">
  <li><span class="bullet"></span><span class="text">要点内容</span></li>
</ul>

Card grid (cards)

<div class="card-grid">
  <div class="card">
    <h3 class="card-title"><span class="highlight">标题</span></h3>
    <p class="card-content">内容</p>
  </div>
</div>

Comparison layout (compare)

<div class="compare-grid">
  <div class="compare-item">
    <h3><span class="highlight">左侧</span>标题</h3>
    <ul><li>对比点</li></ul>
  </div>
  <div class="compare-divider">VS</div>
  <div class="compare-item">
    <h3><span class="highlight">右侧</span>标题</h3>
    <ul><li>对比点</li></ul>
  </div>
</div>

Flowchart (flow)

<div class="flow-container">
  <div class="flow-step">
    <div class="step-number">1</div>
    <div class="step-content">步骤说明</div>
  </div>
  <div class="flow-arrow">→</div>
  <!-- 更多步骤 -->
</div>

Data display (data)

<div class="data-grid">
  <div class="data-item">
    <span class="data-value">99%</span>
    <span class="data-label">指标说明</span>
  </div>
</div>

Table (table)

<table class="data-table">
  <thead><tr><th>维度</th><th>A</th><th>B</th></tr></thead>
  <tbody><tr><td>特征</td><td>值A</td><td><span class="highlight">值B</span></td></tr></tbody>
</table>

Summary (summary)

<div class="summary-content">
  <p class="key-point"><span class="highlight">核心要点</span> 补充说明</p>
</div>

---

Design specifications

Color

Purpose	Value
Background	#000000
Highlight	#2ADB5C
Title	#FFFFFF
Body	#96989A
Secondary	#68696B
Border	#343434

Font

• Chinese: Alibaba PuHuiTi 2.0 / PingFang SC
• English/Numbers: Montserrat

Font size

Element	Size
Large title h1	66px
Section title h2	36px
Card title h3	28-30px
Body	24px

---

Presentation features

Action	Effect
→ / Space	Next page
← / Backspace	Previous page
Home / End	First page/Last page
Click right 2/3	Next page
Click left 1/3	Previous page

---

Checklist

• The first slide has active class
• All slides are in slides-container inside
• h2 titles are in content-center inside
• The cover page uses .slide.cover
• Keywords use <span class="highlight">
• Page numbers increment correctly

---

Prohibited items

• Do not place h2 outside content-center
• Do not omit the active class of the first slide
• Do not use non-specified colors
• Do not put too much content on a single page