Add phrase presets

README.md

@@ -6,6 +6,7 @@ InkTime 是一个英文手写动画生成器，用来解决制作简单签名式
 
 - 将英文短句渲染为逐笔书写的 SVG 动画。
 - 调整墨水颜色、字号、书写时长和对齐方式。
+- 提供三条常用英文短句预设，点击即可生成。
 - 一键重新播放动画。
 - 将当前结果导出为 SVG。
 - 输入校验会提示当前内置笔迹不支持的字符。
@@ -26,6 +27,7 @@ python3 -m http.server 8000
 ## 使用方法
 
 1. 输入不超过 70 个字符的英文短句。
+   也可以点击输入框下方的短句预设快速体验。
 2. 设置颜色、字号、时长和对齐方式。
 3. 点击“生成动画”。
 4. 点击“重新播放”查看效果，或点击“导出 SVG”下载结果。

app.js

@@ -56,6 +56,13 @@ document.querySelector('#controls').addEventListener('submit', event => {
   generate();
 });
 
+document.querySelectorAll('[data-phrase]').forEach(button => {
+  button.addEventListener('click', () => {
+    document.querySelector('#text-input').value = button.dataset.phrase;
+    generate();
+  });
+});
+
 document.querySelector('#replay-button').addEventListener('click', () => {
   if (!currentVara) return generate();
   currentVara.draw('message');

index.html

@@ -21,6 +21,11 @@ <h1>让一句话<br>慢慢写出来。</h1>
           <span>文字内容</span>
           <textarea id="text-input" maxlength="70" rows="3">Make today visible.</textarea>
           <small>当前内置笔迹支持英文字母、数字和常用英文标点。</small>
+          <div class="phrase-presets" aria-label="短句预设">
+            <button type="button" data-phrase="Stay curious.">Stay curious.</button>
+            <button type="button" data-phrase="Make it simple.">Make it simple.</button>
+            <button type="button" data-phrase="Build with care.">Build with care.</button>
+          </div>
         </label>
         <label>
           <span>墨水颜色</span>

styles.css

@@ -26,6 +26,8 @@ textarea { resize: vertical; line-height: 1.5; }
 input[type="color"] { width: 100%; height: 43px; border: 1px solid var(--line); padding: 4px; background: var(--paper); border-radius: 10px; }
 input[type="range"] { accent-color: var(--red); }
 small { color: #657089; line-height: 1.5; }
+.phrase-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
+.phrase-presets button { padding: 6px 10px; border-color: var(--line); font-size: 12px; }
 .actions { display: flex; flex-wrap: wrap; gap: 8px; }
 button { border: 1px solid var(--navy); background: transparent; color: var(--navy); border-radius: 999px; padding: 10px 15px; }
 button.primary { background: var(--navy); color: white; }