-
Notifications
You must be signed in to change notification settings - Fork 550
/
Copy pathindex.src.html
524 lines (502 loc) · 32.6 KB
/
index.src.html
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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
<!DOCTYPE HTML>
<html>
<head>
<title>朋友圈转发截图生成工具</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="author" content="TransparentLC">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="Cache-Control" content="no-transform">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1/dist/css/mdui.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot@05d514cfcec6d64690d67f7c2125497711456646/style.min.css">
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- <script src="https://fastly.jsdelivr.net/npm/eruda"></script><script>eruda.init()</script> -->
<script>new URL(location.href).searchParams.has("debug")&&(document.write(atob('PHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZXJ1ZGEiPjwvc2NyaXB0PjxzY3JpcHQ+ZXJ1ZGEuaW5pdCgpPC9zY3JpcHQ+')))</script>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink mdui-appbar-with-toolbar">
<header class="mdui-appbar mdui-appbar-fixed">
<div class="mdui-toolbar mdui-color-theme">
<span class="mdui-typo-title">朋友圈转发截图生成工具</span>
<div class="mdui-toolbar-spacer"></div>
<a class="mdui-btn mdui-btn-icon" mdui-dialog="{target:'#about'}" mdui-tooltip="{content:'关于'}"><i class="mdui-icon material-icons">info_outline</i></a>
<a id="sourceRepo" href="https://github.com/TransparentLC/WechatMomentScreenshot" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content:'查看 GitHub'}">
<svg viewBox="0 0 36 36" class="mdui-icon" style="width:24px;height:24px;">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z" />
</svg>
</a>
</div>
</header>
<div class="mdui-container">
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-10">
<div class="mdui-textfield">
<label class="mdui-textfield-label">用户名</label>
<input id="configName" class="mdui-textfield-input" type="text" />
</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<div class="mdui-textfield">
<label class="mdui-textfield-label"> </label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configAvatar').click();">选择头像</button>
<input id="configAvatar" type="file" style="display:none" />
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">正文</label>
<textarea id="configText" class="mdui-textfield-input"></textarea>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">截图类型</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeText" type="radio" name="group" checked />
<i class="mdui-radio-icon"></i>纯文字
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeWebsite" type="radio" name="group" />
<i class="mdui-radio-icon"></i>分享网页/公众号文章
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeSingleImage" type="radio" name="group" />
<i class="mdui-radio-icon"></i>图片（单张）
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-radio">
<input id="configTypeMultiImage" type="radio" name="group" />
<i class="mdui-radio-icon"></i>图片（九宫格）
</label>
</div>
</div>
<div id="configWebsite" style="display: none;">
<div class="mdui-textfield">
<label class="mdui-textfield-label">网页标题</label>
<input id="configArticleTitle" class="mdui-textfield-input" type="text" value="还不会用Google的你，就要被时代淘汰了" />
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripplet mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configArticleIcon').click();">上传网页图标</button>
<input id="configArticleIcon" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="getArticleInfo();">自动获取公众号文章标题/封面图</button>
</div>
</div>
</div>
<div id="configSingleImage" style="display: none;">
<div class="mdui-row">
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetSingleImage').click();">上传图片</button>
</div>
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="addPlayIcon()">添加视频播放图标</button>
</div>
</div>
<input id="configSetSingleImage" type="file" style="display:none" />
</div>
<div id="configMultiImage" style="display: none;">
<div class="mdui-m-y-1">请按图片 1 - 9 的顺序添加图片～<br>如果只需要显示一张图片，建议选择“图片（单张）”。</div>
<div class="mdui-row">
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage1').click();">上传图片 1</button>
<input id="configSetMultiImage1" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage2').click();">上传图片 2</button>
<input id="configSetMultiImage2" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage3').click();">上传图片 3</button>
<input id="configSetMultiImage3" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage4').click();">上传图片 4</button>
<input id="configSetMultiImage4" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage5').click();">上传图片 5</button>
<input id="configSetMultiImage5" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage6').click();">上传图片 6</button>
<input id="configSetMultiImage6" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage7').click();">上传图片 7</button>
<input id="configSetMultiImage7" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage8').click();">上传图片 8</button>
<input id="configSetMultiImage8" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-4">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configSetMultiImage9').click();">上传图片 9</button>
<input id="configSetMultiImage9" type="file" style="display:none" />
</div>
<div class="mdui-col-xs-12">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="clearMultiImage();">清空所有图片</button>
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">定位</label>
<input id="configLocation" class="mdui-textfield-input" type="text" value="" />
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">转发出处</label>
<input id="configApp" class="mdui-textfield-input" type="text" value="" />
<div class="mdui-textfield-helper">设置为“视频号 · ○○○”时将以链接的浅蓝色显示</div>
</div>
<div class="mdui-row">
<div class="mdui-textfield mdui-col-xs-6">
<label class="mdui-textfield-label">发表日期</label>
<input id="configPostDate" class="mdui-textfield-input" type="date" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">发表时间</label>
<input id="configPostTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label"> </label>
<input id="configPostTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
</div>
<div class="mdui-textfield mdui-col-xs-6">
<label class="mdui-textfield-label">截图日期</label>
<input id="configScreenshotDate" class="mdui-textfield-input" type="date" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">截图时间</label>
<input id="configScreenshotTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label"> </label>
<input id="configScreenshotTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
</div>
<div class="mdui-textfield mdui-col-xs-4 mdui-col-sm-6">
<label class="mdui-textfield-label">点赞数</label>
<input id="configLike" class="mdui-textfield-input" type="number" min="0" />
</div>
<div class="mdui-col-xs-4 mdui-col-sm-3">
<div class="mdui-textfield">
<label class="mdui-textfield-label">图片长度</label>
<input id="configHeight" class="mdui-textfield-input" type="number" value="1920" min="1920" />
</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-3">
<div class="mdui-textfield">
<label class="mdui-textfield-label"> </label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" mdui-tooltip="{content:'图片宽度默认为 1080 像素，长度根据设备长宽比确定计算，可能和实际存在偏差'}" onclick="document.getElementById('configHeight').value = Math.round(document.body.clientHeight / document.body.clientWidth * 1080);">自动设定</button>
</div>
</div>
<div class="mdui-textfield mdui-col-xs-8 mdui-col-sm-10">
<label class="mdui-textfield-label">自定义头像库</label>
<input id="configAvatarSet" class="mdui-textfield-input" type="text" list="presetAvatarSet" />
<datalist id="presetAvatarSet">
<option value="https://i.akarin.dev/wms-avatar/avatar-stable.txt">
<option value="https://i.akarin.dev/wms-avatar/avatar-fast.txt">
</datalist>
<div class="mdui-textfield-helper">高级功能，点击<a href="javascript:;" class="mdui-text-color-theme-accent" mdui-dialog="{target:'#aboutAvatarSet'}">这里</a>查看详细说明</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<div class="mdui-textfield">
<label class="mdui-textfield-label"> </label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="xhrGet(document.getElementById('configAvatarSet').value || 'https://i.akarin.dev/wms-avatar/avatar-stable.txt', function (result) {loadAvatarSet(result, true); config.avatarSet = document.getElementById('configAvatarSet').value})">应用</button>
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">评论区</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">
<label class="mdui-checkbox">
<input id="configShowComment" type="checkbox" name="configShowComment" onclick="document.getElementById('configCommentPreview').classList[this.checked ? 'remove' : 'add']('mdui-hidden');" />
<i class="mdui-checkbox-icon"></i>
显示评论区
</label>
</div>
<div id="configCommentPreview" class="mdui-col-xs-12 mdui-hidden">
<div class="mdui-table-fluid mdui-m-y-2">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>评论内容</th>
<th>时间</th>
</tr>
</thead>
<tbody id="configCommentList">
</tbody>
</table>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" mdui-dialog="{target:'#addComment'}" onclick="document.getElementById('configCommentName').value = randomName(); document.getElementById('configCommentAvatar').value = null;">添加评论</button>
</div>
<div class="mdui-col-xs-6">
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="removeComment()">删除评论</button>
</div>
</div>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">通知栏</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configTopBarAppIcons" type="checkbox" name="configTopBarAppIcons" />
<i class="mdui-checkbox-icon"></i>
显示 APP 图标
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configTopBarStatusIcons" type="checkbox" name="configTopBarStatusIcons" />
<i class="mdui-checkbox-icon"></i>
随机信号和电量
</label>
</div>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">其他</label>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configUIWhite" type="checkbox" name="configUIWhite" />
<i class="mdui-checkbox-icon"></i>使用 7.0 以上版本白色界面
</label>
</div>
<div class="mdui-col-xs-6">
<label class="mdui-checkbox">
<input id="configFirstAvatar" type="checkbox" name="configFirstAvatar" />
<i class="mdui-checkbox-icon"></i>第一个头像固定为自己
</label>
</div>
</div>
<button id="generate" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-btn-block mdui-m-t-2">生成</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="window.open('https://i.akarin.dev/donate/')">请小透明喝一瓶肥宅快乐水～(*´∀`)</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="copyGitLink()">复制本工具的链接，分享给有需要的人(`ヮ´ )</button>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="localStorage.removeItem('config');localStorage.removeItem('avatar');mdui.snackbar({message:'已清除～刷新后将使用默认设置'})">清除保存的设置信息</button>
<div id="gitLink" style="display:none">https://git.io/WMS</div>
<div id="fakeWechatMoment">
<div id="topBar" class="topBar">
<div id="topBarAppIcons"></div>
<div style="flex-grow:1"></div>
<img id="topBarIconWifi" class="topBarIcon" />
<img id="topBarIconSignal" class="topBarIcon" />
<img id="topBarIconBattery" class="topBarIcon" />
<span id="topBarTime"></span>
</div>
<div id="header" class="header">
<div style="width:40px"></div>
<img style="width:auto;height:48px" />
<div style="width:40px"></div>
详情
</div>
<div id="main" class="main">
<div style="height:30px"></div>
<div class="avatarOut">
<div id="avatar" class="avatarIn squareImage"></div>
</div>
<div class="content">
<div id="name" class="name"></div>
<div style="height:11px"></div>
<div id="text" class="text"></div>
<div id="article" class="article" style="display:none">
<div id="articleIcon" class="articleIcon squareImage" style="background-image:url(https://ae01.alicdn.com/kf/HTB1ci0Da5zxK1RjSspjq6AS.pXaD.jpg)"></div>
<div id="articleTitle" class="articleTitle"></div>
</div>
<div id="singleImage" class="singleImage" style="display:none">
<img id="image" class="image" src="https://ae01.alicdn.com/kf/HTB13rXuJCzqK1RjSZPxq6A4tVXae.jpg" />
</div>
<div id="multiImage" class="multiImage" style="display:none">
<div id="image1" class="multiImageBox squareImage"></div>
<div id="image2" class="multiImageBox squareImage"></div>
<div id="image3" class="multiImageBox squareImage"></div>
<div id="image4" class="multiImageBox squareImage"></div>
<div id="image5" class="multiImageBox squareImage"></div>
<div id="image6" class="multiImageBox squareImage"></div>
<div id="image7" class="multiImageBox squareImage"></div>
<div id="image8" class="multiImageBox squareImage"></div>
<div id="image9" class="multiImageBox squareImage"></div>
</div>
<div style="height:20px"></div>
<div class="info">
<span id="location" style="color:#576b95"></span>
<div style="height:20px"></div>
<span id="time"></span> <span style="color:#576b95">删除</span>
</div>
<img style="position:relative;display:inline-block;width:auto;height:42px;top:9px" />
</div>
<div style="height:50px"></div>
<div id="like" class="like">
<img src="like.svg" width="32" height="32" style="position: relative; left: 30px; top: 43px; display: inline-block; vertical-align: top;" />
<div id="likeAvatarList" class="likeAvatarList"></div>
<div style="height:17px"></div>
</div>
<div id="comment" class="like" style="margin-top:1px">
<img src="commentlist.svg" width="32" height="32" style="position: relative; left: 30px; top: 45px; display: inline-block; vertical-align: top;" />
<div id="commentList" class="likeAvatarList"></div>
</div>
</div>
<div id="footer" class="footer">
<div class="commentInput">评论</div>
<div style="width:22px;display:inline-block"></div>
<img style="width:88px!important;height:88px!important" />
<div style="width:40px;display:inline-block"></div>
<div class="commentSend">发送</div>
</div>
</div>
<div id="aboutFooter" class="mdui-m-y-2" style="text-align:center;line-height:1.5em">
<a href="https://github.com/TransparentLC/WechatMomentScreenshot" target="_blank" style="text-decoration:none"><img src="https://img.shields.io/github/stars/TransparentLC/WechatMomentScreenshot.svg?style=social"></a>
<br>
<span class="mdui-typo-caption-opacity">© 2023 ✨小透明・宸✨</span>
</div>
<div id="addComment" class="mdui-dialog">
<div class="mdui-dialog-title">添加评论</div>
<div class="mdui-dialog-content mdui-typo">
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-10">
<div class="mdui-textfield">
<label class="mdui-textfield-label">用户名</label>
<input id="configCommentName" class="mdui-textfield-input" type="text" value="" />
<div class="mdui-textfield-helper">默认的名字是随机生成的，未选择头像则会随机抽取一个头像。</div>
</div>
</div>
<div class="mdui-col-xs-4 mdui-col-sm-2">
<div class="mdui-textfield">
<label class="mdui-textfield-label"> </label>
<button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="document.getElementById('configCommentAvatar').click();">上传头像</button>
<input id="configCommentAvatar" type="file" style="display: none;" />
</div>
</div>
<div class="mdui-col-xs-12">
<div class="mdui-textfield">
<label class="mdui-textfield-label">评论内容</label>
<textarea id="configCommentText" class="mdui-textfield-input"></textarea>
</div>
</div>
<div class="mdui-textfield mdui-col-xs-6">
<label class="mdui-textfield-label">评论日期</label>
<input id="configCommentDate" class="mdui-textfield-input" type="date" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label">评论时间</label>
<input id="configCommentTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
</div>
<div class="mdui-textfield mdui-col-xs-3">
<label class="mdui-textfield-label"> </label>
<input id="configCommentTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
</div>
<div class="mdui-col-xs-12">
<div class="mdui-textfield">
<label class="mdui-textfield-label">回复给……（可选）</label>
<textarea id="configCommentReply" class="mdui-textfield-input"></textarea>
</div>
</div>
</div>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>CANCEL</button>
<button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="var avatarSrc = document.getElementById('configCommentAvatar').files[0] ? window.URL.createObjectURL(document.getElementById('configCommentAvatar').files[0]) : avatarURL[Math.floor(Math.random() * avatarURL.length)]; var configCommentDate = document.getElementById('configCommentDate').valueAsDate; configCommentDate.setHours(document.getElementById('configCommentTimeHour').value); configCommentDate.setMinutes(document.getElementById('configCommentTimeMinute').value); addComment(avatarSrc, document.getElementById('configCommentName').value, document.getElementById('configCommentText').value, configCommentDate, document.getElementById('configCommentReply').value);">OK</button>
</div>
</div>
<div id="generatedPopup" class="mdui-dialog">
<div class="mdui-dialog-title">生成完毕| ω・`)</div>
<img id="generated" />
<div class="mdui-typo-caption-opacity mdui-m-y-2">
<p>如果点击“保存”没有反应<br>请尝试长按/右键图片进行另存为操作( ﾟ 3ﾟ)</p>
<p>当前使用的头像与设置已保存到本地<br>下次打开本工具将自动读取～</p>
</div>
<div class="mdui-dialog-actions">
<a id="save" class="mdui-btn mdui-ripple">保存</a>
<button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
</div>
</div>
<div id="about" class="mdui-dialog">
<div class="mdui-dialog-title">关于</div>
<div class="mdui-dialog-content mdui-typo">
<h4>这个小工具是什么？</h4>
一个因为不喜欢也不想往朋友圈发某些不得不发的废文而做出来的摸鱼产物。
<h4>为什么生成的截图和我在手机上截的不一样？能不能做出 iOS 的样式？</h4>
不同手机的界面总是有那么一点区别的，要和真正的截图完全一样……我也很难办啊！（摊手）
<br>
如果实在是很在意通知栏的样式的话，可以从自己的手机上截一个通知栏的图然后覆盖上去……
<h4>能不能生成纯文字/转发图片的截图？</h4>
<del>懒得写样式，心情好的时候再加上～(*´ω`*)</del>
<br>
已经可以生成啦～
<h4>生成图片后点击“保存”没有反应？</h4>
也可以试试长按图片手动另存为呢( ﾟ 3ﾟ)
<h4>开源就是好</h4>
<ul>
<li>
<a href="https://html2canvas.hertzen.com">html2canvas</a> 开源许可：<a href="https://github.com/niklasvh/html2canvas/blob/master/LICENSE">The MIT License</a>
</li>
<li>
<a href="https://www.mdui.org">MDUI</a> 开源许可：<a href="https://github.com/zdhxiong/mdui/blob/master/LICENSE">The MIT License</a>
</li>
<li>
<a href="https://github.com/google/material-design-icons">Material Design icons</a> 开源许可：<a href="https://github.com/google/material-design-icons/blob/master/LICENSE">Apache License 2.0</a>
</li>
<li>
<a href="https://www.iconfont.cn">Iconfont 阿里巴巴矢量图标库</a>
</li>
</ul>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
</div>
</div>
<div id="aboutAvatarSet" class="mdui-dialog">
<div class="mdui-dialog-title">“自定义头像库”的说明</div>
<div class="mdui-dialog-content mdui-typo">
<p>如果你希望在生成的截图的点赞区域中显示自定义的头像，可以按照以下步骤操作：</p>
<ol>
<li>收集你想要的头像，并上传到图床之类的地方。</li>
<li>将这些头像的 URL 以一行一个的格式保存为纯文本，以下是示例。</li>
<pre><code>https://example.com/avatar-0.jpg
https://example.com/avatar-1.jpg
https://example.com/avatar-2.jpg
...</code></pre>
<li>将这个文本文件上传到某个地方，例如自己的网站上，也可以按照这一格式动态生成头像库的内容，总之需要使头像库也能通过 URL 访问到。</li>
<li>在“自定义头像库”中输入头像库的 URL，点击“应用”后会进行读取，之后在生成截图时就会从头像库抽取头像了。</li>
<li>头像和头像库都需要支持跨域访问（响应头 <code>Access-Control-Allow-Origin: *</code>）</li>
</ol>
<p>这个功能有一定的技术门槛，因此并不能保证每个人都有条件使用这一功能。留空后点击“应用”将会使用默认头像库。</p>
</div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
</div>
</div>
<div id="request" class="mdui-dialog">
<div id="requestResult" class="mdui-dialog-title"></div>
<div id="requestResultContent" class="mdui-dialog-content mdui-typo"></div>
<div class="mdui-dialog-actions">
<button id="requestAction" class="mdui-btn mdui-ripple" mdui-dialog-close>OK</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/combine/npm/html2canvas@1/dist/html2canvas.min.js,npm/mdui@1/dist/js/mdui.min.js,gh/TransparentLC/WechatMomentScreenshot@05d514cfcec6d64690d67f7c2125497711456646/main.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/mdui@1/dist/js/mdui.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/html2canvas@1/dist/html2canvas.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/gh/TransparentLC/WechatMomentScreenshot/main.min.js"></script> -->
<!-- <script src="main.js"></script> -->
</body>
</html>