Back to Details

timeline-creator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Timeline Creator

时间线生成器

Create interactive HTML timelines and project roadmaps with Gantt charts and milestones.
创建包含甘特图和里程碑的交互式HTML时间线与项目路线图。

When to Use

使用场景

  • "Create timeline for [project]"
  • "Generate roadmap for Q1-Q4"
  • "Make Gantt chart for schedule"
  • "Show project milestones"
  • "为[项目]创建时间线"
  • "生成Q1-Q4的路线图"
  • "制作进度甘特图"
  • "展示项目里程碑"

Components

组件

  1. Timeline Header: project name, date range, completion %
  2. Phase Groups: Q1, Q2, Q3, Q4 or custom phases
  3. Timeline Items: tasks with start/end dates, progress, status
  4. Milestones: key deliverables with dates
  5. Gantt Visualization: horizontal bars showing duration
  1. 时间线头部：项目名称、日期范围、完成百分比
  2. 阶段分组：Q1、Q2、Q3、Q4或自定义阶段
  3. 时间线条目：包含开始/结束日期、进度、状态的任务
  4. 里程碑：带日期的关键交付成果
  5. 甘特图可视化：显示持续时间的横向进度条

HTML Structure

HTML结构

html
<!DOCTYPE html>
<html>
<head>
  <title>[Project] Timeline</title>
  <style>
    body { font-family: system-ui; max-width: 1400px; margin: 0 auto; }
    .timeline-bar { background: linear-gradient(90deg, #4299e1, #48bb78); height: 20px; border-radius: 4px; }
    .milestone { border-left: 3px solid #e53e3e; padding-left: 10px; }
    /* Status colors: #48bb78 (done), #4299e1 (in-progress), #718096 (planned) */
  </style>
</head>
<body>
  <h1>[Project] Timeline</h1>
  <!-- Phase sections with timeline bars -->
  <!-- Milestones list -->
</body>
</html>
html
<!DOCTYPE html>
<html>
<head>
  <title>[Project] Timeline</title>
  <style>
    body { font-family: system-ui; max-width: 1400px; margin: 0 auto; }
    .timeline-bar { background: linear-gradient(90deg, #4299e1, #48bb78); height: 20px; border-radius: 4px; }
    .milestone { border-left: 3px solid #e53e3e; padding-left: 10px; }
    /* Status colors: #48bb78 (done), #4299e1 (in-progress), #718096 (planned) */
  </style>
</head>
<body>
  <h1>[Project] Timeline</h1>
  <!-- Phase sections with timeline bars -->
  <!-- Milestones list -->
</body>
</html>

Timeline Bar Pattern

时间线进度条模板

html
<div class="timeline-item">
  <span>Task Name</span>
  <div class="timeline-bar" style="width: [percentage]%; background: [status-color];"></div>
  <span>[start] - [end]</span>
</div>
html
<div class="timeline-item">
  <span>Task Name</span>
  <div class="timeline-bar" style="width: [percentage]%; background: [status-color];"></div>
  <span>[start] - [end]</span>
</div>

Workflow

工作流程

  1. Extract tasks, dates, phases from project
  2. Calculate duration percentages
  3. Group by phases (quarters or custom)
  4. Create HTML with Gantt-style bars
  5. Add milestones section
  6. Write to 
    [project]-timeline.html
Use semantic colors for status, keep layout responsive.
  1. 从项目中提取任务、日期和阶段
  2. 计算持续时间百分比
  3. 按阶段（季度或自定义）分组
  4. 创建带有甘特图样式进度条的HTML
  5. 添加里程碑板块
  6. 保存为
    [project]-timeline.html
使用语义化颜色标识状态，保持布局响应式。