-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
213 lines (200 loc) · 12.6 KB
/
index.html
File metadata and controls
213 lines (200 loc) · 12.6 KB
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n="page_title">影瞬</title>
<!-- 引入浏览器小图标 -->
<link rel="icon" type="image/svg+xml" href="public/brand_assets/shadow_snap.svg">
<link rel="icon" type="image/png" href="public/brand_assets/shadow_snap.png">
<!-- 引入 Google Fonts 支持多语言 + 特色字体 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;600&family=Noto+Sans+SC:wght@400;700;900&family=Roboto:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans+Vietnamese:wght@400;700&family=Noto+Sans+Arabic:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container">
<header>
<!-- 语言切换 -->
<div class="lang-switch">
<span class="lang-icon">🌐</span>
<select id="lang-select" class="lang-select">
<option value="zh">中文</option>
<option value="en">English</option>
</select>
</div>
<h1 data-i18n="header_title"><img src="public/brand_assets/shadow_snap.svg" alt="Logo" class="header-logo"> 影瞬</h1>
<p data-i18n="header_desc">快速制作具有“切割感”背景的电影对话长图</p>
</header>
<main>
<!-- 预览区域 -->
<section class="preview-section">
<div class="canvas-wrapper">
<canvas id="subtitle-canvas"></canvas>
<div id="drop-zone" class="drop-zone">
<span data-i18n="drop_zone_text">拖拽图片至此 或 点击此处上传</span>
</div>
</div>
</section>
<!-- 控制面板 -->
<aside class="control-panel">
<!-- 基础设置：三个按钮水平均分 -->
<div class="control-group basic-group">
<h3 data-i18n="group_basic">📁 基础设置</h3>
<div class="button-row">
<label class="file-label">
<input type="file" id="image-input" accept="image/*">
<span data-i18n="btn_select_img">选择图片</span>
</label>
<button id="reset-btn" class="secondary-btn" data-i18n="btn_delete_img">🗑️ 删除图片</button>
<button id="download-btn" class="primary-btn" data-i18n="btn_save_img">💾 保存图片</button>
</div>
</div>
<!-- 两个功能栏水平均分 -->
<div class="settings-grid">
<!-- 左侧：字幕设置 -->
<div class="control-group subtitle-group">
<h3 data-i18n="group_subtitle">💬 字幕设置</h3>
<p class="hint" data-i18n="hint_enter">按回车键(Enter)换行</p>
<textarea id="subtitle-text" placeholder="在这里输入你的台词..."></textarea>
<div class="style-sub-panel">
<div class="field">
<label data-i18n="label_font">选择字体</label>
<select id="font-family">
<option value="'Noto Sans SC', sans-serif">中文 (Noto Sans SC)</option>
<option value="'Roboto', sans-serif">英语 (Roboto)</option>
<option value="'Noto Sans Thai', sans-serif">泰文 (Thai)</option>
<option value="'Noto Sans Vietnamese', sans-serif">越南文 (Vietnamese)</option>
<option value="'Noto Sans Arabic', sans-serif">阿拉伯文 (Arabic)</option>
</select>
</div>
<div class="field">
<label><span data-i18n="label_font_size">字号</span>: <span
id="font-size-val">20</span>px</label>
<input type="range" id="font-size" min="10" max="100" value="20">
</div>
<div class="field">
<label data-i18n="label_font_color">字体颜色 / 描边颜色</label>
<div class="color-pickers">
<input type="color" id="font-color" value="#ffffff" title="文字颜色">
<input type="color" id="stroke-color" value="#000000" title="描边颜色">
</div>
</div>
<div class="row">
<div class="field">
<label><span data-i18n="label_bar_height">字幕高度</span>: <span
id="bar-height-val">40</span>px</label>
<input type="range" id="bar-height" min="20" max="200" value="40">
</div>
<div class="field">
<label><span data-i18n="label_padding_x">安全边距</span>: <span
id="padding-x-val">20</span>px</label>
<input type="range" id="padding-x" min="0" max="100" value="20">
</div>
</div>
</div>
</div>
<!-- 右侧：水印设置 -->
<div class="control-group watermark-group">
<h3 data-i18n="group_watermark">📑 水印设置</h3>
<div class="field inline">
<label for="wm-enable" data-i18n="label_wm_enable">启用水印</label>
<input type="checkbox" id="wm-enable">
</div>
<div id="wm-controls" class="disabled-group">
<div class="field">
<label data-i18n="label_wm_content">水印内容</label>
<input type="text" id="wm-text" value="公众号：影子AI之旅">
</div>
<div class="field">
<label data-i18n="label_wm_pos">水印位置</label>
<select id="wm-pos">
<option value="bottom-right" data-i18n="pos_bottom_right">右下角</option>
<option value="bottom-left" data-i18n="pos_bottom_left">左下角</option>
<option value="top-right" data-i18n="pos_top_right">右上角</option>
<option value="top-left" data-i18n="pos_top_left">左上角</option>
<option value="center" data-i18n="pos_center">居中</option>
</select>
</div>
<div class="field">
<label><span data-i18n="label_wm_opacity">不透明度</span>: <span
id="wm-opacity-val">0.5</span></label>
<input type="range" id="wm-opacity" min="0" max="1" step="0.1" value="0.5">
</div>
<div class="field">
<label><span data-i18n="label_wm_size">水印大小</span>: <span
id="wm-size-val">16</span>px</label>
<input type="range" id="wm-size" min="10" max="50" value="16">
</div>
<div class="field">
<label data-i18n="label_wm_color">文字颜色</label>
<input type="color" id="wm-color" value="#ffffff">
</div>
</div>
</div>
</div>
</aside>
</main>
<footer class="app-footer">
<a href="https://shadow.wang/" target="_blank" class="footer-link-with-logo">
<img src="public/brand_assets/shadow_portal_logo.svg" alt="Shadow.Nexus" class="footer-logo">
Shadow.Nexus
</a>
<span class="divider">|</span>
<a href="https://sc.shadow.wang/" target="_blank" class="footer-link-with-logo">
<img src="public/brand_assets/shadow_card_logo.svg" alt="Shadow Card" class="footer-logo">
Shadow Card
</a>
<span class="divider">|</span>
<a href="mailto:wardlu@126.com" target="_blank">📧 <span data-i18n="footer_feedback">反馈建议</span></a>
<span class="divider">|</span>
<span id="donate-trigger">☕ <span data-i18n="footer_donate">打赏支持</span></span>
<span class="divider">|</span>
<span class="wechat-qr-trigger" title="微信公众号">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
style="vertical-align: middle; margin-right: 4px;">
<path
d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.406-.032zm-2.953 3.028c.506 0 .916.418.916.93s-.41.93-.916.93a.923.923 0 0 1-.916-.93c0-.512.41-.93.916-.93zm4.931 0c.506 0 .916.418.916.93s-.41.93-.916.93a.923.923 0 0 1-.916-.93c0-.512.41-.93.916-.93z" />
</svg>
<span data-i18n="footer_wechat">影子AI之旅</span>
<!-- 二维码弹出层 -->
<div class="wechat-qr-popup">
<img src="public/wxgzh.jpg" alt="微信公众号二维码">
<p>扫码关注公众号</p>
</div>
</span>
<span class="divider">|</span>
<a href="https://x.com/Gollumgulu" target="_blank" title="X: @Gollumgulu">𝕏 @Gollumgulu</a>
</footer>
</div>
<!-- 打赏模态框 -->
<div class="modal-overlay" id="donate-modal">
<div class="modal-content">
<button class="modal-close" id="modal-close">×</button>
<h3 data-i18n="modal_donate_title">☕ 感谢支持开发者</h3>
<p style="color:var(--text-secondary); margin-top:0.5rem; font-size:0.9rem;" data-i18n="modal_donate_desc">
如果这个工具对你有帮助，欢迎打赏一杯咖啡</p>
<div class="qr-container">
<div class="qr-item">
<div class="qr-placeholder">
<img src="assets/wechat-pay.jpg" alt="WeChat Pay">
</div>
<span data-i18n="donate_wechat">微信支付</span>
</div>
<div class="qr-item">
<div class="qr-placeholder">
<img src="assets/alipay.jpg" alt="Alipay">
</div>
<span data-i18n="donate_alipay">支付宝</span>
</div>
</div>
</div>
</div>
<!-- Toast 提示容器 -->
<div id="toast-container"></div>
<script src="script.js"></script>
</body>
</html>