diff --git a/website/index.html b/website/index.html index 2fc9f9f..bf48a08 100644 --- a/website/index.html +++ b/website/index.html @@ -21,8 +21,18 @@ +

TermCanvas

@@ -64,6 +74,198 @@

Usage Tracking

+ +
+

Screenshots

+
+
+
+ □ + Infinite canvas with terminals arranged freely +
+
+
+
+ ◎ + AI agents running side by side with live status +
+
+
+
+ ▶ + Composer sending prompts with image paste +
+
+
+
+ ▤ + Usage dashboard with per-model cost breakdown +
+
+
+
+ ✎ + Freehand drawing and annotations on canvas +
+
+
+
+ ★ + Hydra orchestrating parallel agent tasks +
+
+
+
+ + +
+

Demo

+

See TermCanvas in action — from canvas navigation to multi-agent workflows.

+
+
+
▶
+

Demo video coming soon

+
+
+
+ + +
+

Documentation

+ +
+ Getting Started + Key Concepts + Shortcuts + Configuration +
+ + +
+

Getting Started

+ +
+

Installation

+

Download the latest release for your platform from GitHub Releases. TermCanvas supports macOS, Linux, and Windows.

+
+ +# Or build from source
+git clone https://github.com/blueberrycongee/termcanvas.git
+cd termcanvas
+npm install
+npm run dev + +
+
+ +
+

CLI Setup

+

After launching the app, go to Settings → General → Command line interface and click Register. This adds termcanvas and hydra to your PATH, enabling terminal and agent management from any shell.

+
+ +
+

First Steps

+
    +
  1. Open TermCanvas and add a project with ⌘ O (or File → Add Project)
    2. +
  2. TermCanvas auto-detects git worktrees in your project
    3. +
  3. Press ⌘ T to create a new terminal — choose shell, lazygit, or an AI agent
    4. +
  4. Drag terminals around the canvas, zoom in/out with scroll, and double-click title bars to zoom-to-fit
    5. +
+
+
+ + +
+

Key Concepts

+ +
+

Canvas

+

The infinite 2D workspace where all terminals live. Pan by dragging the background, zoom with scroll or pinch. Box-select multiple terminals by dragging from empty space. Annotate with pen, text, rectangles, and arrows using the drawing tools.

+
+ +
+

Project → Worktree → Terminal

+

TermCanvas organizes everything in a three-level hierarchy that mirrors how you use git. Add a project, and its worktrees appear automatically. Each worktree can contain multiple terminals — shells, lazygit, or AI agents.

+
+ +
+

AI Agents

+

First-class support for Claude Code, Codex, Gemini, Kimi, and OpenCode. Each agent runs in its own terminal with live status indicators (working, waiting, done) and a completion glow effect. Sessions persist across restarts.

+
+ +
+

Composer

+

The unified input bar at the bottom of the screen. It sends prompts to whichever agent terminal is currently focused. Supports pasting images directly into the prompt. Think of it as a shared command line for all your AI agents.

+
+ +
+

Hydra

+

A task orchestration tool that breaks large tasks into subtasks, each running in its own git worktree with a dedicated AI agent. Run hydra init in your project, then ask your agent to use Hydra — it handles the rest.

+
+
+ + +
+

Keyboard Shortcuts

+

All shortcuts are customizable in Settings → Shortcuts. On Windows/Linux, replace ⌘ with Ctrl.

+ + + + + + + + + + + + + + + + + + + + + + + + +
ShortcutAction
⌘ OAdd project
⌘ BToggle sidebar
⌘ /Toggle right panel (usage)
⌘ TNew terminal
⌘ DClose focused terminal
⌘ ;Rename terminal title
⌘ ]Next terminal
⌘ [Previous terminal
⌘ EUnfocus / refocus last terminal
⌘ FStar / unstar terminal
⌘ JNext starred terminal
⌘ KPrevious starred terminal
⌘ SSave workspace
⌘ ⇧ SSave workspace as
⌘ 1–4Terminal size presets
+
+ + +
+

Configuration

+ +
+

Fonts

+

6 downloadable monospace fonts are available in Settings. Each font is optimized for terminal rendering with proper ligature support.

+
+ +
+

Theme

+

Dark and light themes with a minimum contrast ratio setting for accessibility. The theme applies to the canvas, terminals, and all UI elements.

+
+ +
+

Language

+

English and Chinese are supported. The app auto-detects your system language on first launch. You can change it anytime in Settings.

+
+ +
+

Updates

+

Auto-update is enabled by default. New versions are downloaded in the background and applied on restart. An in-app changelog shows what changed in each release.

+
+ +
+

Agent CLI Override

+

Each AI agent type can have a custom CLI path configured in Settings. This lets you use specific versions or custom wrappers for Claude Code, Codex, and other agents.

+
+
+
+
Download diff --git a/website/src/main.js b/website/src/main.js index a19c2c2..7bad79f 100644 --- a/website/src/main.js +++ b/website/src/main.js @@ -5,8 +5,17 @@ if (container) init(container); // ── i18n ──────────────────────────────────────────────────────── const zh = { + // Nav + "nav-features": "功能", + "nav-screenshots": "截图", + "nav-demo": "演示", + "nav-docs": "文档", + + // Hero tagline: "你的终端，铺在无限画布上。", download: "下载", + + // Features features: "功能特性", "f1-title": "无限画布", "f1-desc": "自由平移、缩放、排列终端。告别标签页和分屏。", @@ -16,6 +25,88 @@ const zh = { "f3-desc": "统一输入栏，向聚焦的 agent 发送提示，支持粘贴图片。", "f4-title": "用量追踪", "f4-desc": "Token 成本看板，按项目和模型细分。清楚你的开销。", + + // Screenshots + "screenshots-title": "截图", + "ss-canvas": "终端在无限画布上自由排列", + "ss-agents": "AI Agent 并行运行，实时状态显示", + "ss-composer": "Composer 发送提示，支持粘贴图片", + "ss-usage": "用量看板，按模型细分成本", + "ss-drawing": "画布上自由绘制和标注", + "ss-hydra": "Hydra 编排并行 Agent 任务", + + // Demo + "demo-title": "演示", + "demo-subtitle": "观看 TermCanvas 的实际操作 — 从画布导航到多 Agent 工作流。", + "demo-placeholder": "演示视频即将推出", + + // Docs + "docs-title": "文档", + "docs-nav-gs": "快速开始", + "docs-nav-concepts": "核心概念", + "docs-nav-shortcuts": "快捷键", + "docs-nav-config": "配置", + + // Docs — Getting Started + "docs-gs-title": "快速开始", + "docs-gs-install-title": "安装", + "docs-gs-install-desc": "从 GitHub Releases 下载适合你平台的最新版本。TermCanvas 支持 macOS、Linux 和 Windows。", + "docs-gs-cli-title": "CLI 设置", + "docs-gs-cli-desc": "启动应用后，进入 设置 → 通用 → 命令行工具，点击注册。这会将 termcanvas 和 hydra 添加到你的 PATH。", + "docs-gs-first-title": "第一步", + "docs-gs-step1": "打开 TermCanvas，按 ⌘ O 添加项目（或 文件 → 添加项目）", + "docs-gs-step2": "TermCanvas 自动检测项目中的 git worktree", + "docs-gs-step3": "按 ⌘ T 创建新终端 — 选择 shell、lazygit 或 AI Agent", + "docs-gs-step4": "在画布上拖动终端，滚轮缩放，双击标题栏自动适配大小", + + // Docs — Key Concepts + "docs-concepts-title": "核心概念", + "docs-concept-canvas-title": "画布", + "docs-concept-canvas-desc": "无限 2D 工作区，所有终端都在这里。拖动背景平移，滚轮或捏合缩放。从空白处拖动可框选多个终端。使用绘图工具进行标注。", + "docs-concept-hierarchy-title": "项目 → Worktree → 终端", + "docs-concept-hierarchy-desc": "TermCanvas 采用三层层级结构，与 git 使用方式一致。添加项目后，worktree 自动出现。每个 worktree 可包含多个终端。", + "docs-concept-agents-title": "AI Agent", + "docs-concept-agents-desc": "原生支持 Claude Code、Codex、Gemini、Kimi 和 OpenCode。每个 Agent 有独立终端，实时状态指示（工作中、等待中、完成），会话跨重启保持。", + "docs-concept-composer-title": "Composer", + "docs-concept-composer-desc": "屏幕底部的统一输入栏，向当前聚焦的 Agent 终端发送提示。支持直接粘贴图片。", + "docs-concept-hydra-title": "Hydra", + "docs-concept-hydra-desc": "任务编排工具，将大任务拆分为子任务，每个子任务在独立的 git worktree 中运行专属 AI Agent。在项目中运行 hydra init，然后让 Agent 使用 Hydra。", + + // Docs — Shortcuts + "docs-shortcuts-title": "快捷键", + "docs-shortcuts-note": "所有快捷键可在 设置 → 快捷键 中自定义。Windows/Linux 上将 ⌘ 替换为 Ctrl。", + "docs-shortcuts-col-key": "快捷键", + "docs-shortcuts-col-action": "操作", + "sc-add-project": "添加项目", + "sc-sidebar": "切换侧边栏", + "sc-panel": "切换右侧面板（用量）", + "sc-new-term": "新建终端", + "sc-close-term": "关闭当前终端", + "sc-rename": "重命名终端标题", + "sc-next": "下一个终端", + "sc-prev": "上一个终端", + "sc-unfocus": "取消聚焦 / 重新聚焦", + "sc-star": "收藏 / 取消收藏终端", + "sc-star-next": "下一个收藏终端", + "sc-star-prev": "上一个收藏终端", + "sc-save": "保存工作区", + "sc-save-as": "另存为工作区", + "sc-sizes": "终端尺寸预设", + + // Docs — Configuration + "docs-config-title": "配置", + "docs-config-fonts-title": "字体", + "docs-config-fonts-desc": "设置中提供 6 种可下载等宽字体，每种字体都针对终端渲染优化。", + "docs-config-theme-title": "主题", + "docs-config-theme-desc": "深色和浅色主题，支持最低对比度设置以增强可访问性。主题应用于画布、终端和所有 UI 元素。", + "docs-config-lang-title": "语言", + "docs-config-lang-desc": "支持英文和中文。应用首次启动时自动检测系统语言，可随时在设置中更改。", + "docs-config-updates-title": "更新", + "docs-config-updates-desc": "默认启用自动更新。新版本在后台下载，重启时应用。应用内变更日志显示每个版本的更新内容。", + "docs-config-agent-title": "Agent CLI 覆盖", + "docs-config-agent-desc": "每种 AI Agent 类型可在设置中配置自定义 CLI 路径，支持使用特定版本或自定义封装。", + + // CTA "cta-sub": "MIT 许可 \u00b7 开源", }; diff --git a/website/src/style.css b/website/src/style.css index 7d414ee..fbf5801 100644 --- a/website/src/style.css +++ b/website/src/style.css @@ -13,9 +13,46 @@ body { #topnav { position: fixed; top: 0; + left: 0; right: 0; - padding: 1rem 1.5rem; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 1.5rem; z-index: 100; + background: rgba(10, 10, 10, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid #1a1a1a; +} +.nav-links { + display: flex; + gap: 1.5rem; +} +.nav-links a { + color: #71717a; + text-decoration: none; + font-size: 0.85rem; + font-weight: 500; + transition: color 0.2s; +} +.nav-links a:hover { + color: #fafafa; +} +.nav-actions { + display: flex; + align-items: center; + gap: 0.75rem; +} +.nav-github { + color: #71717a; + text-decoration: none; + font-size: 0.85rem; + font-weight: 500; + transition: color 0.2s; +} +.nav-github:hover { + color: #fafafa; } #lang-toggle { background: transparent; @@ -166,6 +203,274 @@ body { line-height: 1.5; } +/* ── Screenshots Gallery ────────────────────────────────────── */ +#screenshots { + max-width: 1100px; + margin: 0 auto; + padding: 4rem 2rem; +} +#screenshots h2 { + text-align: center; + font-family: 'Geist Mono', monospace; + font-size: 1.5rem; + letter-spacing: 0.1em; + margin-bottom: 3rem; + color: #fafafa; +} +.screenshots-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} +.screenshot-card { + border-radius: 12px; + overflow: hidden; + border: 1px solid #1a1a1a; + transition: border-color 0.2s; +} +.screenshot-card:hover { + border-color: #333; +} +.screenshot-placeholder { + aspect-ratio: 16 / 10; + background: #111; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.75rem; + padding: 1.5rem; +} +.placeholder-icon { + font-size: 2rem; + color: #333; +} +.placeholder-text { + color: #52525b; + font-size: 0.8rem; + text-align: center; + line-height: 1.4; +} + +/* ── Demo Video ─────────────────────────────────────────────── */ +#demo { + max-width: 960px; + margin: 0 auto; + padding: 4rem 2rem; +} +#demo h2 { + text-align: center; + font-family: 'Geist Mono', monospace; + font-size: 1.5rem; + letter-spacing: 0.1em; + margin-bottom: 0.75rem; + color: #fafafa; +} +.demo-subtitle { + text-align: center; + color: #71717a; + font-size: 0.95rem; + margin-bottom: 2.5rem; +} +.demo-video-container { + width: 100%; +} +.demo-video-placeholder { + aspect-ratio: 16 / 9; + background: #111; + border: 1px solid #1a1a1a; + border-radius: 12px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + transition: border-color 0.2s; +} +.demo-video-placeholder:hover { + border-color: #333; +} +.play-icon { + font-size: 3rem; + color: #333; + width: 80px; + height: 80px; + border-radius: 50%; + border: 2px solid #333; + display: flex; + align-items: center; + justify-content: center; + padding-left: 6px; +} +.demo-video-placeholder p { + color: #52525b; + font-size: 0.9rem; +} + +/* ── Documentation ──────────────────────────────────────────── */ +#docs { + max-width: 800px; + margin: 0 auto; + padding: 4rem 2rem; +} +#docs h2 { + text-align: center; + font-family: 'Geist Mono', monospace; + font-size: 1.5rem; + letter-spacing: 0.1em; + margin-bottom: 2rem; + color: #fafafa; +} +.docs-nav { + display: flex; + justify-content: center; + gap: 1rem; + margin-bottom: 3rem; + flex-wrap: wrap; +} +.docs-nav-link { + color: #71717a; + text-decoration: none; + font-size: 0.85rem; + font-weight: 500; + padding: 0.5rem 1rem; + border-radius: 6px; + border: 1px solid #1a1a1a; + transition: color 0.2s, border-color 0.2s, background 0.2s; +} +.docs-nav-link:hover { + color: #fafafa; + border-color: #333; + background: rgba(255,255,255,0.03); +} +.docs-section { + margin-bottom: 3rem; + padding-top: 1rem; +} +.docs-section h3 { + font-family: 'Geist Mono', monospace; + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid #1a1a1a; + color: #e8b840; +} +.docs-block { + margin-bottom: 1.5rem; +} +.docs-block h4 { + font-size: 0.95rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: #fafafa; +} +.docs-block p { + color: #a1a1aa; + font-size: 0.9rem; + line-height: 1.6; +} +.docs-block p code { + font-family: 'Geist Mono', monospace; + font-size: 0.85em; + background: #1a1a1a; + padding: 0.15em 0.4em; + border-radius: 4px; + color: #e8b840; +} +.docs-code { + background: #111; + border: 1px solid #1a1a1a; + border-radius: 8px; + padding: 1rem 1.25rem; + margin-top: 0.75rem; + overflow-x: auto; +} +.docs-code code { + font-family: 'Geist Mono', monospace; + font-size: 0.85rem; + color: #a1a1aa; + line-height: 1.7; +} +.docs-steps { + list-style: none; + counter-reset: step; + margin-top: 0.5rem; +} +.docs-steps li { + counter-increment: step; + color: #a1a1aa; + font-size: 0.9rem; + line-height: 1.6; + padding: 0.4rem 0; + padding-left: 2rem; + position: relative; +} +.docs-steps li::before { + content: counter(step); + position: absolute; + left: 0; + width: 1.4rem; + height: 1.4rem; + border-radius: 50%; + background: #1a1a1a; + color: #71717a; + font-size: 0.75rem; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + top: 0.5rem; +} +.docs-steps li kbd { + font-family: 'Geist Mono', monospace; + font-size: 0.8em; + background: #1a1a1a; + padding: 0.1em 0.35em; + border-radius: 4px; + border: 1px solid #333; + color: #fafafa; +} +.docs-shortcuts-note { + color: #71717a; + font-size: 0.85rem; + margin-bottom: 1.5rem; +} + +/* ── Shortcuts Table ────────────────────────────────────────── */ +.shortcuts-table { + width: 100%; + border-collapse: collapse; + font-size: 0.9rem; +} +.shortcuts-table thead th { + text-align: left; + padding: 0.75rem 1rem; + font-weight: 600; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #71717a; + border-bottom: 1px solid #1a1a1a; +} +.shortcuts-table tbody td { + padding: 0.6rem 1rem; + border-bottom: 1px solid #111; + color: #a1a1aa; +} +.shortcuts-table tbody tr:hover { + background: rgba(255,255,255,0.02); +} +.shortcuts-table kbd { + font-family: 'Geist Mono', monospace; + font-size: 0.8em; + background: #1a1a1a; + padding: 0.15em 0.4em; + border-radius: 4px; + border: 1px solid #333; + color: #fafafa; +} + /* ── Bottom CTA ─────────────────────────────────────────────── */ #cta { text-align: center; @@ -190,11 +495,19 @@ footer a { color: #71717a; text-decoration: none; } footer a:hover { color: #fafafa; } /* ── Responsive ─────────────────────────────────────────────── */ +@media (max-width: 768px) { + .screenshots-grid { grid-template-columns: repeat(2, 1fr); } + .nav-links { gap: 1rem; } + .nav-links a { font-size: 0.8rem; } +} @media (max-width: 640px) { #hero h1 { font-size: 1.5rem; } .tagline { font-size: 0.95rem; } .features-grid { grid-template-columns: 1fr; } + .screenshots-grid { grid-template-columns: 1fr; } .hero-buttons { flex-direction: column; align-items: center; } + .nav-links { display: none; } + .docs-nav { flex-direction: column; align-items: center; } } /* ── Reduced Motion ─────────────────────────────────────────── */ @@ -203,4 +516,7 @@ footer a:hover { color: #fafafa; } .scroll-indicator { animation: none; } .btn { transition: none; } .feature-card { transition: none; } + .screenshot-card { transition: none; } + .demo-video-placeholder { transition: none; } + .docs-nav-link { transition: none; } }