sign-docs/index.html at main · Createitv/sign-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SignDocs - 文档签章编辑器</title>
  <link rel="stylesheet" href="/src/styles.css">
</head>
<body>
  <div class="app-header">
    <div class="app-title">
      <div class="app-logo">印</div>
      <div>
        <h1>SignDocs</h1>
        <p>文档签章编辑器 · 编辑 · 盖章 · 签名 · 导出</p>
      </div>
    </div>
    <div class="file-info" id="fileInfo">未打开文件</div>
  </div>

  <div class="main-container">
    <!-- Left Toolbar -->
    <div class="toolbar">

      <!-- File Operations -->
      <div class="tool-card">
        <h3><span class="icon icon-file">📁</span> 文件</h3>
        <div class="btn-group">
          <button class="btn btn-secondary" onclick="openDocument()">打开文档</button>
          <button class="btn btn-secondary" onclick="newDocument()">新建</button>
        </div>
      </div>

      <!-- Text Formatting -->
      <div class="tool-card" id="editToolCard">
        <h3><span class="icon icon-edit">✎</span> 文本编辑</h3>
        <select class="font-select" id="fontSelect" onchange="changeFont(this.value)">
          <option value="'Songti SC','STSong','SimSun',serif">宋体</option>
          <option value="'PingFang SC','Microsoft YaHei',sans-serif">黑体</option>
          <option value="'Kaiti SC','KaiTi',cursive">楷体</option>
          <option value="'STFangsong','FangSong',serif">仿宋</option>
        </select>
        <select class="font-select" id="fontSizeSelect" onchange="changeFontSize(this.value)">
          <option value="3">小号 (16px)</option>
          <option value="4" selected>中号 (18px)</option>
          <option value="5">大号 (24px)</option>
          <option value="6">特大 (32px)</option>
        </select>
        <div class="format-row">
          <button class="format-btn" onclick="fmt('bold')" title="加粗"><b>B</b></button>
          <button class="format-btn" onclick="fmt('italic')" title="斜体"><i>I</i></button>
          <button class="format-btn" onclick="fmt('underline')" title="下划线"><u>U</u></button>
          <button class="format-btn" onclick="fmt('justifyLeft')" title="左对齐">≡</button>
          <button class="format-btn" onclick="fmt('justifyCenter')" title="居中">☰</button>
          <button class="format-btn" onclick="fmt('justifyRight')" title="右对齐">≡</button>
        </div>
        <div class="btn-group">
          <button class="btn btn-secondary" onclick="addTextBox()">+ 文本框</button>
        </div>
      </div>

      <!-- Stamp -->
      <div class="tool-card">
        <h3><span class="icon icon-stamp">印</span> 公章管理</h3>
        <div class="stamp-preview-area" id="stampPreview">
          <span class="placeholder">暂无公章<br>请上传或生成</span>
        </div>
        <div class="stamp-size-control">
          <span>尺寸</span>
          <input type="range" id="stampSize" min="60" max="200" value="120">
          <span id="stampSizeVal">120px</span>
        </div>
        <div class="stamp-options">
          <label class="btn btn-secondary" style="cursor:pointer;">
            📁 上传公章图片
            <input type="file" accept="image/*" id="stampUpload" style="display:none" onchange="handleStampUpload(event)">
          </label>
          <button class="btn btn-primary" onclick="openGenStamp()">🔴 在线生成公章</button>
          <button class="btn btn-secondary" onclick="placeStamp()">📌 盖章到文档</button>
        </div>
      </div>

      <!-- Signature -->
      <div class="tool-card">
        <h3><span class="icon icon-sign">✒</span> 手写签名</h3>
        <div class="sig-preview-area" id="sigPreview" onclick="openSignaturePad()">
          <span class="placeholder">点击此处签名</span>
        </div>
        <div class="btn-group">
          <button class="btn btn-secondary" onclick="clearSignature()">清除</button>
          <button class="btn btn-primary" onclick="placeSignature()">放置到文档</button>
        </div>
      </div>

      <div class="tool-divider"></div>

      <!-- Export -->
      <div class="tool-card">
        <h3><span class="icon icon-pdf">↓</span> 导出</h3>
        <div style="padding: 0 4px;">
          <button class="btn btn-export" onclick="exportPDF()">导出为 PDF</button>
        </div>
      </div>

    </div>

    <!-- Document Area -->
    <div class="doc-wrapper">
      <div class="doc-page" id="docPage">
        <div class="doc-content" id="docContent" contenteditable="true"></div>
        <div class="pdf-container" id="pdfContainer" style="display:none;"></div>
      </div>
    </div>
  </div>

  <!-- Generate Stamp Modal -->
  <div class="gen-stamp-modal" id="genStampModal">
    <div class="gen-stamp-box">
      <h3>🔴 生成电子公章</h3>
      <label>公司名称 (环形文字)</label>
      <input type="text" id="stampCompany" value="某某科技有限公司" placeholder="输入公司名称">
      <label>中心文字</label>
      <input type="text" id="stampCenter" value="合同专用章" placeholder="输入中心文字">
      <label>编号 (底部)</label>
      <input type="text" id="stampCode" value="1234567890" placeholder="输入编号">
      <div class="gen-stamp-preview">
        <canvas id="genStampCanvas" width="200" height="200"></canvas>
      </div>
      <div class="gen-stamp-actions">
        <button class="btn btn-secondary" onclick="closeGenStamp()">取消</button>
        <button class="btn btn-primary" onclick="useGenStamp()">使用此公章</button>
      </div>
    </div>
  </div>

  <!-- Signature Modal -->
  <div class="sig-modal" id="sigModal">
    <div class="sig-modal-box">
      <div class="sig-modal-header">
        <h3>✒ 手写签名</h3>
        <div class="sig-modal-colors">
          笔色：
          <div class="sig-color-dot active" style="background:#1a1a2e" onclick="setSigColor('#1a1a2e', this)"></div>
          <div class="sig-color-dot" style="background:#c0392b" onclick="setSigColor('#c0392b', this)"></div>
          <div class="sig-color-dot" style="background:#2980b9" onclick="setSigColor('#2980b9', this)"></div>
        </div>
      </div>
      <div class="sig-canvas-wrap">
        <canvas id="sigCanvas"></canvas>
      </div>
      <div class="sig-modal-actions">
        <button class="btn btn-secondary" onclick="clearSignature()">清除重签</button>
        <button class="btn btn-secondary" onclick="closeSignaturePad()">取消</button>
        <button class="btn btn-primary" onclick="confirmSignature()">确认签名</button>
      </div>
    </div>
  </div>

  <!-- Toast -->
  <div class="toast" id="toast"></div>

  <script type="module" src="/src/main.js"></script>
</body>
</html>