@xiaozhu2007/koishi-plugin-litematic-renderer 0.4.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +15 -0
- package/assets/java-bridge/litematic-render-bridge-0.1.2.jar +0 -0
- package/assets/standalone-renderer/litematic-standalone-renderer-0.2.6.jar +0 -0
- package/assets/threeviews/index.html +1270 -0
- package/assets/threeviews//346/210/221/347/232/204/344/270/226/347/225/214-Litematic/346/212/225/345/275/261/344/270/211/350/247/206/345/233/276/351/242/204/350/247/210_files/api.js./344/270/213/350/275/275 +917 -0
- package/assets/threeviews//346/210/221/347/232/204/344/270/226/347/225/214-Litematic/346/212/225/345/275/261/344/270/211/350/247/206/345/233/276/351/242/204/350/247/210_files/assets.js./344/270/213/350/275/275 +1 -0
- package/assets/threeviews//346/210/221/347/232/204/344/270/226/347/225/214-Litematic/346/212/225/345/275/261/344/270/211/350/247/206/345/233/276/351/242/204/350/247/210_files/atlas.png +0 -0
- package/assets/threeviews//346/210/221/347/232/204/344/270/226/347/225/214-Litematic/346/212/225/345/275/261/344/270/211/350/247/206/345/233/276/351/242/204/350/247/210_files/deepslate-helpers.js./344/270/213/350/275/275 +118 -0
- package/assets/threeviews//346/210/221/347/232/204/344/270/226/347/225/214-Litematic/346/212/225/345/275/261/344/270/211/350/247/206/345/233/276/351/242/204/350/247/210_files/deepslate.js./344/270/213/350/275/275 +2 -0
- package/assets/threeviews//346/210/221/347/232/204/344/270/226/347/225/214-Litematic/346/212/225/345/275/261/344/270/211/350/247/206/345/233/276/351/242/204/350/247/210_files/gl-matrix-min.js./344/270/213/350/275/275 +28 -0
- package/assets/threeviews//346/210/221/347/232/204/344/270/226/347/225/214-Litematic/346/212/225/345/275/261/344/270/211/350/247/206/345/233/276/351/242/204/350/247/210_files/litematic-utils.js./344/270/213/350/275/275 +174 -0
- package/assets/threeviews//346/210/221/347/232/204/344/270/226/347/225/214-Litematic/346/212/225/345/275/261/344/270/211/350/247/206/345/233/276/351/242/204/350/247/210_files/opaque.js./344/270/213/350/275/275 +413 -0
- package/assets/vanilla-resources/Minecraft-26.2-Vanilla-Resources.zip +0 -0
- package/lib/index.d.ts +114 -0
- package/lib/index.js +1 -0
- package/package.json +54 -0
|
@@ -0,0 +1,1270 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!-- saved from url=(0036)https://mcimg.com/gongju/Threeviews/ -->
|
|
3
|
+
<html lang="zh" data-immersive-translate-page-theme="light"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
4
|
+
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>我的世界-Litematic投影三视图预览</title>
|
|
7
|
+
<meta name="description" content="我的世界Litematic投影三视图预览工具,在线查看Litematic文件的正视图、侧视图和俯视图,支持高清显示,适用于红石、建筑等投影文件">
|
|
8
|
+
<meta name="keywords" content="我的世界,MC,投影工坊,方块星球,Litematic投影,我的世界投影,我的世界红石,我的世界建筑">
|
|
9
|
+
<meta name="author" content="投影工坊">
|
|
10
|
+
<meta name="robots" content="index, follow">
|
|
11
|
+
<link rel="canonical" href="https://www.example.com/litematic-viewer">
|
|
12
|
+
|
|
13
|
+
<!-- Open Graph / Facebook -->
|
|
14
|
+
<meta property="og:type" content="website">
|
|
15
|
+
<meta property="og:title" content="我的世界-Litematic投影三视图预览">
|
|
16
|
+
<meta property="og:description" content="我的世界Litematic投影三视图预览工具,在线查看Litematic文件的正视图、侧视图和俯视图,支持高清显示,适用于红石、建筑等投影文件">
|
|
17
|
+
<meta property="og:image" content="https://www.example.com/preview-image.jpg">
|
|
18
|
+
|
|
19
|
+
<!-- Twitter -->
|
|
20
|
+
<meta property="twitter:card" content="summary_large_image">
|
|
21
|
+
<meta property="twitter:title" content="我的世界-Litematic投影三视图预览">
|
|
22
|
+
<meta property="twitter:description" content="我的世界Litematic投影三视图预览工具,在线查看Litematic文件的正视图、侧视图和俯视图,支持高清显示,适用于红石、建筑等投影文件">
|
|
23
|
+
|
|
24
|
+
<!-- Structured Data -->
|
|
25
|
+
<script type="application/ld+json">
|
|
26
|
+
{
|
|
27
|
+
"@context": "https://schema.org",
|
|
28
|
+
"@type": "WebApplication",
|
|
29
|
+
"name": "我的世界-Litematic投影三视图预览",
|
|
30
|
+
"description": "我的世界Litematic投影三视图预览工具,在线查看Litematic文件的正视图、侧视图和俯视图,支持高清显示,适用于红石、建筑等投影文件",
|
|
31
|
+
"applicationCategory": "UtilityApplication",
|
|
32
|
+
"operatingSystem": "Any",
|
|
33
|
+
"offers": {
|
|
34
|
+
"@type": "Offer",
|
|
35
|
+
"price": "0",
|
|
36
|
+
"priceCurrency": "CNY"
|
|
37
|
+
},
|
|
38
|
+
"keywords": "我的世界,MC,投影工坊,方块星球,Litematic投影,我的世界投影,我的世界红石,我的世界建筑"
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<!-- Deepslate -->
|
|
43
|
+
<script src="./我的世界-Litematic投影三视图预览_files/deepslate.js.下载"></script>
|
|
44
|
+
<script src="./我的世界-Litematic投影三视图预览_files/gl-matrix-min.js.下载"></script>
|
|
45
|
+
|
|
46
|
+
<script src="./我的世界-Litematic投影三视图预览_files/assets.js.下载"></script>
|
|
47
|
+
<script src="./我的世界-Litematic投影三视图预览_files/opaque.js.下载"></script>
|
|
48
|
+
|
|
49
|
+
<!-- 项目文件 -->
|
|
50
|
+
<script src="./我的世界-Litematic投影三视图预览_files/deepslate-helpers.js.下载"></script>
|
|
51
|
+
<script src="./我的世界-Litematic投影三视图预览_files/litematic-utils.js.下载"></script>
|
|
52
|
+
<script src="./我的世界-Litematic投影三视图预览_files/api.js.下载"></script>
|
|
53
|
+
|
|
54
|
+
<style>
|
|
55
|
+
:root {
|
|
56
|
+
/* Minecraft风格的绿色 */
|
|
57
|
+
--primary-color: #3C7236; /* 新主题色 RGB(60,114,54) */
|
|
58
|
+
--primary-light: #4C8246;
|
|
59
|
+
--secondary-color: #2C6226; /* 深色版本 */
|
|
60
|
+
--accent-color: #D0A639; /* 金矿石黄 */
|
|
61
|
+
--dirt-color: #866043; /* 泥土色 */
|
|
62
|
+
--stone-color: #828282; /* 石头色 */
|
|
63
|
+
--background-color: #E8F1E8; /* 淡草绿背景 */
|
|
64
|
+
--card-bg-color: #ffffff;
|
|
65
|
+
--text-color: #2c3e50;
|
|
66
|
+
--border-radius: 0px; /* Minecraft风格方块 */
|
|
67
|
+
--box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
|
|
68
|
+
--pixel-border: 4px solid #3A8312;
|
|
69
|
+
--transition: all 0.3s ease;
|
|
70
|
+
--mc-font: 'Minecraft', 'Segoe UI', Roboto, Arial, sans-serif;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Minecraft 风格字体(模拟像素风) */
|
|
74
|
+
@font-face {
|
|
75
|
+
font-family: 'Minecraft';
|
|
76
|
+
src: url('data:font/woff2;base64,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');
|
|
77
|
+
font-weight: normal;
|
|
78
|
+
font-style: normal;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
* {
|
|
82
|
+
margin: 0;
|
|
83
|
+
padding: 0;
|
|
84
|
+
box-sizing: border-box;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
body {
|
|
88
|
+
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
89
|
+
background-color: var(--background-color);
|
|
90
|
+
color: var(--text-color);
|
|
91
|
+
line-height: 1.6;
|
|
92
|
+
padding: 0;
|
|
93
|
+
margin: 0;
|
|
94
|
+
min-height: 100vh;
|
|
95
|
+
display: flex;
|
|
96
|
+
flex-direction: column;
|
|
97
|
+
position: relative;
|
|
98
|
+
overflow-x: hidden;
|
|
99
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%233C7236' fill-opacity='0.05'%3E%3Cpath d='M0 0h10v10H0zm10 10h10v10H10zm10-10h10v10H20zm10 10h10v10H30zM0 20h10v10H0zm10 10h10v10H10zm10-10h10v10H20zm10 10h10v10H30z'/%3E%3C/g%3E%3C/svg%3E");
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Minecraft 风格的像素边框 */
|
|
103
|
+
.pixel-border {
|
|
104
|
+
position: relative;
|
|
105
|
+
border: 4px solid var(--secondary-color);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.pixel-border::before {
|
|
109
|
+
content: "";
|
|
110
|
+
position: absolute;
|
|
111
|
+
top: 0;
|
|
112
|
+
left: 0;
|
|
113
|
+
right: 0;
|
|
114
|
+
bottom: 0;
|
|
115
|
+
border: 2px solid var(--primary-light);
|
|
116
|
+
pointer-events: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* 背景特效 - 浮动方块 */
|
|
120
|
+
.bg-animation {
|
|
121
|
+
position: fixed;
|
|
122
|
+
width: 100%;
|
|
123
|
+
height: 100%;
|
|
124
|
+
top: 0;
|
|
125
|
+
left: 0;
|
|
126
|
+
z-index: -1;
|
|
127
|
+
overflow: hidden;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.bg-block {
|
|
131
|
+
position: absolute;
|
|
132
|
+
opacity: 0.05;
|
|
133
|
+
animation: float 20s infinite ease-in-out;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.bg-block:nth-child(1) {
|
|
137
|
+
width: 80px;
|
|
138
|
+
height: 80px;
|
|
139
|
+
top: -40px;
|
|
140
|
+
left: 10%;
|
|
141
|
+
background-color: var(--primary-color);
|
|
142
|
+
animation-duration: 25s;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.bg-block:nth-child(2) {
|
|
146
|
+
width: 60px;
|
|
147
|
+
height: 60px;
|
|
148
|
+
top: 40%;
|
|
149
|
+
right: -30px;
|
|
150
|
+
background-color: var(--secondary-color);
|
|
151
|
+
animation-duration: 30s;
|
|
152
|
+
animation-delay: 2s;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.bg-block:nth-child(3) {
|
|
156
|
+
width: 50px;
|
|
157
|
+
height: 50px;
|
|
158
|
+
bottom: 10%;
|
|
159
|
+
left: 15%;
|
|
160
|
+
background-color: var(--accent-color);
|
|
161
|
+
animation-duration: 22s;
|
|
162
|
+
animation-delay: 4s;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.bg-block:nth-child(4) {
|
|
166
|
+
width: 40px;
|
|
167
|
+
height: 40px;
|
|
168
|
+
top: 20%;
|
|
169
|
+
left: 30%;
|
|
170
|
+
background-color: var(--dirt-color);
|
|
171
|
+
animation-duration: 18s;
|
|
172
|
+
animation-delay: 1s;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.bg-block:nth-child(5) {
|
|
176
|
+
width: 30px;
|
|
177
|
+
height: 30px;
|
|
178
|
+
bottom: 5%;
|
|
179
|
+
right: 20%;
|
|
180
|
+
background-color: var(--stone-color);
|
|
181
|
+
animation-duration: 24s;
|
|
182
|
+
animation-delay: 3s;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@keyframes float {
|
|
186
|
+
0%, 100% {
|
|
187
|
+
transform: translateY(0) translateX(0) rotate(0);
|
|
188
|
+
}
|
|
189
|
+
25% {
|
|
190
|
+
transform: translateY(-30px) translateX(20px) rotate(5deg);
|
|
191
|
+
}
|
|
192
|
+
50% {
|
|
193
|
+
transform: translateY(20px) translateX(40px) rotate(10deg);
|
|
194
|
+
}
|
|
195
|
+
75% {
|
|
196
|
+
transform: translateY(30px) translateX(-20px) rotate(5deg);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* 网格背景 */
|
|
201
|
+
.grid-background {
|
|
202
|
+
position: fixed;
|
|
203
|
+
top: 0;
|
|
204
|
+
left: 0;
|
|
205
|
+
width: 100%;
|
|
206
|
+
height: 100%;
|
|
207
|
+
z-index: -2;
|
|
208
|
+
background-size: 40px 40px;
|
|
209
|
+
background-image:
|
|
210
|
+
linear-gradient(to right, rgba(60, 114, 54, 0.05) 1px, transparent 1px),
|
|
211
|
+
linear-gradient(to bottom, rgba(60, 114, 54, 0.05) 1px, transparent 1px);
|
|
212
|
+
opacity: 0.8;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.header {
|
|
216
|
+
background: var(--primary-color);
|
|
217
|
+
color: white;
|
|
218
|
+
text-align: center;
|
|
219
|
+
padding: 2rem 1rem;
|
|
220
|
+
position: relative;
|
|
221
|
+
overflow: hidden;
|
|
222
|
+
border-bottom: 6px solid var(--secondary-color);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.header h1 {
|
|
226
|
+
font-size: 2.5rem;
|
|
227
|
+
font-weight: 600;
|
|
228
|
+
margin-bottom: 0.5rem;
|
|
229
|
+
position: relative;
|
|
230
|
+
z-index: 1;
|
|
231
|
+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
232
|
+
font-family: var(--mc-font);
|
|
233
|
+
letter-spacing: 1px;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.header::after {
|
|
237
|
+
content: '';
|
|
238
|
+
position: absolute;
|
|
239
|
+
bottom: -10px;
|
|
240
|
+
left: 0;
|
|
241
|
+
right: 0;
|
|
242
|
+
height: 20px;
|
|
243
|
+
background: var(--background-color);
|
|
244
|
+
border-radius: 0;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.container {
|
|
248
|
+
width: 100%;
|
|
249
|
+
max-width: 1200px;
|
|
250
|
+
margin: 0 auto;
|
|
251
|
+
padding: 2rem 1rem;
|
|
252
|
+
flex: 1;
|
|
253
|
+
position: relative;
|
|
254
|
+
z-index: 1;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.card {
|
|
258
|
+
background-color: var(--card-bg-color);
|
|
259
|
+
border: var(--pixel-border);
|
|
260
|
+
padding: 2rem;
|
|
261
|
+
margin-bottom: 2rem;
|
|
262
|
+
transition: var(--transition);
|
|
263
|
+
position: relative;
|
|
264
|
+
overflow: hidden;
|
|
265
|
+
box-shadow: var(--box-shadow);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.card:hover {
|
|
269
|
+
transform: translateY(-5px);
|
|
270
|
+
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.card h2 {
|
|
274
|
+
font-size: 1.8rem;
|
|
275
|
+
margin-bottom: 1.5rem;
|
|
276
|
+
color: var(--primary-color);
|
|
277
|
+
position: relative;
|
|
278
|
+
padding-bottom: 0.5rem;
|
|
279
|
+
font-family: var(--mc-font);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.card h2::before {
|
|
283
|
+
content: '⛏️';
|
|
284
|
+
margin-right: 10px;
|
|
285
|
+
font-size: 1.4rem;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.card h2::after {
|
|
289
|
+
content: '';
|
|
290
|
+
position: absolute;
|
|
291
|
+
bottom: 0;
|
|
292
|
+
left: 0;
|
|
293
|
+
height: 3px;
|
|
294
|
+
width: 60px;
|
|
295
|
+
background-color: var(--accent-color);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.file-upload {
|
|
299
|
+
display: flex;
|
|
300
|
+
flex-direction: column;
|
|
301
|
+
align-items: center;
|
|
302
|
+
padding: 2rem;
|
|
303
|
+
border: 3px dashed var(--secondary-color);
|
|
304
|
+
background-color: rgba(60, 114, 54, 0.05);
|
|
305
|
+
transition: var(--transition);
|
|
306
|
+
margin-bottom: 1rem;
|
|
307
|
+
cursor: pointer;
|
|
308
|
+
position: relative;
|
|
309
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23866043' fill-opacity='0.1' d='M0 0h10v10H0zm10 10h10v10H10zm10-10h10v10H20zm10 10h10v10H30zM0 20h10v10H0zm10 10h10v10H10zm10-10h10v10H20zm10 10h10v10H30z'/%3E%3C/svg%3E");
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.file-upload:hover {
|
|
313
|
+
border-color: var(--primary-color);
|
|
314
|
+
background-color: rgba(60, 114, 54, 0.1);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.file-upload.dragging {
|
|
318
|
+
border-color: var(--accent-color);
|
|
319
|
+
background-color: rgba(208, 166, 57, 0.1);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.file-upload .upload-icon {
|
|
323
|
+
font-size: 3rem;
|
|
324
|
+
margin-bottom: 1rem;
|
|
325
|
+
color: var(--primary-color);
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
/* Minecraft风格图标 */
|
|
329
|
+
.mc-icon {
|
|
330
|
+
font-family: var(--mc-font);
|
|
331
|
+
background: rgba(60, 114, 54, 0.1);
|
|
332
|
+
width: 60px;
|
|
333
|
+
height: 60px;
|
|
334
|
+
display: flex;
|
|
335
|
+
align-items: center;
|
|
336
|
+
justify-content: center;
|
|
337
|
+
border: 2px solid var(--secondary-color);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
/* 合成台风格装饰 */
|
|
341
|
+
.crafting-grid {
|
|
342
|
+
position: absolute;
|
|
343
|
+
bottom: 10px;
|
|
344
|
+
right: 10px;
|
|
345
|
+
display: grid;
|
|
346
|
+
grid-template-columns: repeat(3, 15px);
|
|
347
|
+
grid-template-rows: repeat(3, 15px);
|
|
348
|
+
gap: 2px;
|
|
349
|
+
opacity: 0.3;
|
|
350
|
+
transform: rotate(15deg);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.crafting-grid div {
|
|
354
|
+
background-color: #9d8a70;
|
|
355
|
+
border: 1px solid #7d6a50;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.crafting-grid div:nth-child(5) {
|
|
359
|
+
background-color: #b5a48c;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.file-upload p {
|
|
363
|
+
margin-bottom: 1rem;
|
|
364
|
+
color: #7f8c8d;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.file-upload input[type="file"] {
|
|
368
|
+
display: none;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
/* 增加文件类型指南,减少空旷感 */
|
|
372
|
+
.file-guide {
|
|
373
|
+
display: flex;
|
|
374
|
+
justify-content: space-between;
|
|
375
|
+
flex-wrap: wrap;
|
|
376
|
+
margin-top: 1rem;
|
|
377
|
+
padding-top: 1rem;
|
|
378
|
+
border-top: 2px dashed rgba(60, 114, 54, 0.3);
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.file-type {
|
|
382
|
+
flex: 1;
|
|
383
|
+
min-width: 180px;
|
|
384
|
+
background-color: rgba(60, 114, 54, 0.05);
|
|
385
|
+
margin: 0.5rem;
|
|
386
|
+
padding: 1rem;
|
|
387
|
+
text-align: center;
|
|
388
|
+
transition: var(--transition);
|
|
389
|
+
border: 2px solid var(--secondary-color);
|
|
390
|
+
position: relative;
|
|
391
|
+
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 4px 0 rgba(0,0,0,0.2);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.file-type:after {
|
|
395
|
+
content: "";
|
|
396
|
+
position: absolute;
|
|
397
|
+
bottom: 0;
|
|
398
|
+
right: 0;
|
|
399
|
+
width: 20px;
|
|
400
|
+
height: 20px;
|
|
401
|
+
background: rgba(0,0,0,0.1);
|
|
402
|
+
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.file-type:hover {
|
|
406
|
+
background-color: rgba(60, 114, 54, 0.1);
|
|
407
|
+
transform: translateY(-3px);
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.file-type-icon {
|
|
411
|
+
font-size: 1.8rem;
|
|
412
|
+
margin-bottom: 0.5rem;
|
|
413
|
+
color: var(--primary-color);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.file-type h4 {
|
|
417
|
+
color: var(--text-color);
|
|
418
|
+
margin-bottom: 0.5rem;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.file-type p {
|
|
422
|
+
font-size: 0.85rem;
|
|
423
|
+
color: #7f8c8d;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.security-notice {
|
|
427
|
+
background-color: rgba(230, 126, 34, 0.1);
|
|
428
|
+
border-left: 4px solid #e67e22;
|
|
429
|
+
padding: 1rem;
|
|
430
|
+
margin: 1rem 0;
|
|
431
|
+
font-size: 0.9rem;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.security-notice h4 {
|
|
435
|
+
color: #e67e22;
|
|
436
|
+
margin-bottom: 0.5rem;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.btn {
|
|
440
|
+
padding: 0.8rem 1.5rem;
|
|
441
|
+
background-color: var(--primary-color);
|
|
442
|
+
color: white;
|
|
443
|
+
border: none;
|
|
444
|
+
cursor: pointer;
|
|
445
|
+
font-size: 1rem;
|
|
446
|
+
transition: var(--transition);
|
|
447
|
+
display: inline-flex;
|
|
448
|
+
align-items: center;
|
|
449
|
+
justify-content: center;
|
|
450
|
+
gap: 0.5rem;
|
|
451
|
+
text-transform: uppercase;
|
|
452
|
+
font-weight: bold;
|
|
453
|
+
box-shadow: 0 4px 0 var(--secondary-color);
|
|
454
|
+
font-family: var(--mc-font);
|
|
455
|
+
image-rendering: pixelated;
|
|
456
|
+
position: relative;
|
|
457
|
+
border: 2px solid rgba(0,0,0,0.3);
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.btn:before {
|
|
461
|
+
content: "";
|
|
462
|
+
position: absolute;
|
|
463
|
+
top: 2px;
|
|
464
|
+
left: 2px;
|
|
465
|
+
right: 2px;
|
|
466
|
+
height: 5px;
|
|
467
|
+
background: rgba(255,255,255,0.3);
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.btn:hover {
|
|
471
|
+
background-color: var(--secondary-color);
|
|
472
|
+
transform: translateY(-2px);
|
|
473
|
+
box-shadow: 0 6px 0 var(--secondary-color);
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.btn:active {
|
|
477
|
+
transform: translateY(0);
|
|
478
|
+
box-shadow: 0 2px 0 var(--secondary-color);
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
.status {
|
|
482
|
+
padding: 1rem;
|
|
483
|
+
margin: 1rem 0;
|
|
484
|
+
transition: var(--transition);
|
|
485
|
+
background-color: rgba(60, 114, 54, 0.1);
|
|
486
|
+
border-left: 4px solid var(--primary-color);
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.status.success {
|
|
490
|
+
background-color: rgba(60, 114, 54, 0.1);
|
|
491
|
+
border-left-color: var(--primary-color);
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.status.error {
|
|
495
|
+
background-color: rgba(231, 76, 60, 0.1);
|
|
496
|
+
border-left-color: var(--accent-color);
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.status.processing {
|
|
500
|
+
background-color: rgba(241, 196, 15, 0.1);
|
|
501
|
+
border-left-color: #f1c40f;
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
.views-container {
|
|
505
|
+
display: flex;
|
|
506
|
+
flex-wrap: wrap;
|
|
507
|
+
gap: 1.5rem;
|
|
508
|
+
margin-top: 2rem;
|
|
509
|
+
justify-content: center;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.view-card {
|
|
513
|
+
flex: 1;
|
|
514
|
+
min-width: 300px;
|
|
515
|
+
max-width: 100%;
|
|
516
|
+
background-color: var(--card-bg-color);
|
|
517
|
+
box-shadow: var(--box-shadow);
|
|
518
|
+
overflow: hidden;
|
|
519
|
+
transition: var(--transition);
|
|
520
|
+
border: var(--pixel-border);
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.view-card:hover {
|
|
524
|
+
transform: translateY(-5px);
|
|
525
|
+
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
.view-card-header {
|
|
529
|
+
padding: 1rem;
|
|
530
|
+
background-color: var(--primary-color);
|
|
531
|
+
color: white;
|
|
532
|
+
text-align: center;
|
|
533
|
+
font-weight: 500;
|
|
534
|
+
font-size: 1.2rem;
|
|
535
|
+
font-family: var(--mc-font);
|
|
536
|
+
position: relative;
|
|
537
|
+
border-bottom: 3px solid rgba(0,0,0,0.2);
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
.view-card-header:before {
|
|
541
|
+
content: "";
|
|
542
|
+
position: absolute;
|
|
543
|
+
top: 2px;
|
|
544
|
+
left: 2px;
|
|
545
|
+
right: 2px;
|
|
546
|
+
height: 4px;
|
|
547
|
+
background: rgba(255,255,255,0.2);
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.view-card-body {
|
|
551
|
+
padding: 1rem;
|
|
552
|
+
overflow: hidden;
|
|
553
|
+
position: relative;
|
|
554
|
+
text-align: center;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.view-card img {
|
|
558
|
+
width: 100%;
|
|
559
|
+
height: auto;
|
|
560
|
+
display: block;
|
|
561
|
+
cursor: zoom-in;
|
|
562
|
+
transition: transform 0.1s ease-out;
|
|
563
|
+
transform-origin: center center;
|
|
564
|
+
image-rendering: auto; /* Use standard rendering for high-res images */
|
|
565
|
+
-webkit-backface-visibility: hidden; /* Prevent pixelation during transforms */
|
|
566
|
+
backface-visibility: hidden;
|
|
567
|
+
max-width: none; /* Allow image to be displayed at full resolution */
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
.view-card-body {
|
|
571
|
+
overflow: hidden;
|
|
572
|
+
position: relative;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
/* 添加Minecraft风格的边框 */
|
|
576
|
+
.view-card-body:before {
|
|
577
|
+
content: "";
|
|
578
|
+
position: absolute;
|
|
579
|
+
top: 0;
|
|
580
|
+
left: 0;
|
|
581
|
+
right: 0;
|
|
582
|
+
bottom: 0;
|
|
583
|
+
pointer-events: none;
|
|
584
|
+
border: 2px solid rgba(58, 131, 18, 0.3);
|
|
585
|
+
z-index: 1;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
.loading {
|
|
589
|
+
position: relative;
|
|
590
|
+
display: flex;
|
|
591
|
+
flex-direction: column;
|
|
592
|
+
align-items: center;
|
|
593
|
+
justify-content: center;
|
|
594
|
+
padding: 2rem;
|
|
595
|
+
min-height: 200px;
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
.loading::after {
|
|
599
|
+
content: "";
|
|
600
|
+
width: 50px;
|
|
601
|
+
height: 50px;
|
|
602
|
+
border: 5px solid #f3f3f3;
|
|
603
|
+
border-top: 5px solid var(--primary-color);
|
|
604
|
+
border-radius: 50%;
|
|
605
|
+
animation: spin 1s linear infinite;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
.loading-text {
|
|
609
|
+
margin-top: 1.5rem;
|
|
610
|
+
font-size: 1.2rem;
|
|
611
|
+
color: var(--text-color);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
@keyframes spin {
|
|
615
|
+
0% { transform: rotate(0deg); }
|
|
616
|
+
100% { transform: rotate(360deg); }
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.fadeIn {
|
|
620
|
+
animation: fadeIn 0.5s ease-in-out forwards;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
@keyframes fadeIn {
|
|
624
|
+
from { opacity: 0; transform: translateY(10px); }
|
|
625
|
+
to { opacity: 1; transform: translateY(0); }
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
.hidden {
|
|
629
|
+
display: none;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
footer {
|
|
633
|
+
text-align: center;
|
|
634
|
+
padding: 1.5rem;
|
|
635
|
+
background-color: var(--primary-color);
|
|
636
|
+
color: white;
|
|
637
|
+
margin-top: 2rem;
|
|
638
|
+
position: relative;
|
|
639
|
+
z-index: 1;
|
|
640
|
+
border-top: 6px solid var(--secondary-color);
|
|
641
|
+
font-family: var(--mc-font);
|
|
642
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' fill-opacity='0.1' d='M0 0h4v4H0zm4 4h4v4H4zm4-4h4v4H8zm4 4h4v4h-4zM0 8h4v4H0zm8 0h4v4H8zm4 0h4v4h-4z'/%3E%3C/svg%3E");
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
/* 图片灯箱 */
|
|
646
|
+
.lightbox {
|
|
647
|
+
position: fixed;
|
|
648
|
+
top: 0;
|
|
649
|
+
left: 0;
|
|
650
|
+
width: 100%;
|
|
651
|
+
height: 100%;
|
|
652
|
+
background-color: rgba(0, 0, 0, 0.9);
|
|
653
|
+
display: flex;
|
|
654
|
+
align-items: center;
|
|
655
|
+
justify-content: center;
|
|
656
|
+
z-index: 1000;
|
|
657
|
+
opacity: 0;
|
|
658
|
+
visibility: hidden;
|
|
659
|
+
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
.lightbox.active {
|
|
663
|
+
opacity: 1;
|
|
664
|
+
visibility: visible;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.lightbox-content {
|
|
668
|
+
position: relative;
|
|
669
|
+
max-width: 90%;
|
|
670
|
+
max-height: 80%;
|
|
671
|
+
display: flex;
|
|
672
|
+
flex-direction: column;
|
|
673
|
+
align-items: center;
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
.lightbox-image {
|
|
677
|
+
max-width: 100%;
|
|
678
|
+
max-height: 80vh;
|
|
679
|
+
object-fit: contain;
|
|
680
|
+
transition: transform 0.3s ease;
|
|
681
|
+
image-rendering: auto; /* Use standard rendering for high-res images */
|
|
682
|
+
-webkit-backface-visibility: hidden;
|
|
683
|
+
backface-visibility: hidden;
|
|
684
|
+
image-resolution: from-image; /* Use image's native resolution */
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
.lightbox-caption {
|
|
688
|
+
color: white;
|
|
689
|
+
text-align: center;
|
|
690
|
+
padding: 1rem;
|
|
691
|
+
font-size: 1.2rem;
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
.lightbox-controls {
|
|
695
|
+
position: absolute;
|
|
696
|
+
top: 1rem;
|
|
697
|
+
right: 1rem;
|
|
698
|
+
z-index: 10;
|
|
699
|
+
display: flex;
|
|
700
|
+
gap: 1rem;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.lightbox-btn {
|
|
704
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
705
|
+
border: none;
|
|
706
|
+
color: white;
|
|
707
|
+
width: 40px;
|
|
708
|
+
height: 40px;
|
|
709
|
+
border-radius: 50%;
|
|
710
|
+
display: flex;
|
|
711
|
+
align-items: center;
|
|
712
|
+
justify-content: center;
|
|
713
|
+
cursor: pointer;
|
|
714
|
+
transition: background-color 0.3s ease;
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.lightbox-btn:hover {
|
|
718
|
+
background-color: rgba(255, 255, 255, 0.4);
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
.lightbox-close {
|
|
722
|
+
font-size: 1.5rem;
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
.lightbox-zoom-in, .lightbox-zoom-out {
|
|
726
|
+
font-size: 1.2rem;
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.lightbox-navigation {
|
|
730
|
+
position: absolute;
|
|
731
|
+
top: 50%;
|
|
732
|
+
width: 100%;
|
|
733
|
+
display: flex;
|
|
734
|
+
justify-content: space-between;
|
|
735
|
+
padding: 0 1rem;
|
|
736
|
+
transform: translateY(-50%);
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
.lightbox-nav-btn {
|
|
740
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
741
|
+
border: none;
|
|
742
|
+
color: white;
|
|
743
|
+
width: 50px;
|
|
744
|
+
height: 50px;
|
|
745
|
+
border-radius: 50%;
|
|
746
|
+
display: flex;
|
|
747
|
+
align-items: center;
|
|
748
|
+
justify-content: center;
|
|
749
|
+
cursor: pointer;
|
|
750
|
+
transition: background-color 0.3s ease;
|
|
751
|
+
font-size: 1.5rem;
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
.lightbox-nav-btn:hover {
|
|
755
|
+
background-color: rgba(255, 255, 255, 0.4);
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
/* 响应式设计 */
|
|
759
|
+
@media (max-width: 768px) {
|
|
760
|
+
.header h1 {
|
|
761
|
+
font-size: 2rem;
|
|
762
|
+
}
|
|
763
|
+
|
|
764
|
+
.card h2 {
|
|
765
|
+
font-size: 1.5rem;
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
.view-card {
|
|
769
|
+
min-width: 100%;
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
.file-type {
|
|
773
|
+
min-width: 100%;
|
|
774
|
+
margin: 0.5rem 0;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.lightbox-content {
|
|
778
|
+
max-width: 95%;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.lightbox-navigation {
|
|
782
|
+
padding: 0 0.5rem;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
.lightbox-nav-btn {
|
|
786
|
+
width: 40px;
|
|
787
|
+
height: 40px;
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
</style>
|
|
791
|
+
</head>
|
|
792
|
+
<body>
|
|
793
|
+
<!-- 背景特效 -->
|
|
794
|
+
<div class="grid-background"></div>
|
|
795
|
+
<div class="bg-animation">
|
|
796
|
+
<div class="bg-block"></div>
|
|
797
|
+
<div class="bg-block"></div>
|
|
798
|
+
<div class="bg-block"></div>
|
|
799
|
+
<div class="bg-block"></div>
|
|
800
|
+
<div class="bg-block"></div>
|
|
801
|
+
</div>
|
|
802
|
+
|
|
803
|
+
<!-- 纹理图集 -->
|
|
804
|
+
<img id="atlas" src="./我的世界-Litematic投影三视图预览_files/atlas.png" alt="Texture atlas" crossorigin="anonymous" hidden="">
|
|
805
|
+
|
|
806
|
+
<!-- 灯箱组件 -->
|
|
807
|
+
<div class="lightbox" id="lightbox">
|
|
808
|
+
<div class="lightbox-content">
|
|
809
|
+
<div class="lightbox-controls">
|
|
810
|
+
<button class="lightbox-btn lightbox-zoom-in" id="zoom-in">+</button>
|
|
811
|
+
<button class="lightbox-btn lightbox-zoom-out" id="zoom-out">-</button>
|
|
812
|
+
<button class="lightbox-btn lightbox-close" id="close-lightbox">×</button>
|
|
813
|
+
</div>
|
|
814
|
+
<img class="lightbox-image" id="lightbox-image" src="https://mcimg.com/gongju/Threeviews/" alt="Enlarged view">
|
|
815
|
+
<div class="lightbox-caption" id="lightbox-caption"></div>
|
|
816
|
+
</div>
|
|
817
|
+
<div class="lightbox-navigation">
|
|
818
|
+
<button class="lightbox-nav-btn" id="prev-image">❮</button>
|
|
819
|
+
<button class="lightbox-nav-btn" id="next-image">❯</button>
|
|
820
|
+
</div>
|
|
821
|
+
</div>
|
|
822
|
+
|
|
823
|
+
<div class="header">
|
|
824
|
+
<h1>我的世界-Litematic投影三视图预览</h1>
|
|
825
|
+
</div>
|
|
826
|
+
|
|
827
|
+
<div class="container">
|
|
828
|
+
<div class="card fadeIn pixel-border">
|
|
829
|
+
<h2>上传文件</h2>
|
|
830
|
+
<div class="file-upload" id="drop-area">
|
|
831
|
+
<div class="upload-icon mc-icon">📦</div>
|
|
832
|
+
<p>拖放 .litematic 文件到这里,或点击选择文件</p>
|
|
833
|
+
<input type="file" id="file-input" accept=".litematic">
|
|
834
|
+
<button class="btn" id="select-file-btn">选择文件</button>
|
|
835
|
+
<div class="crafting-grid">
|
|
836
|
+
<div></div><div></div><div></div>
|
|
837
|
+
<div></div><div></div><div></div>
|
|
838
|
+
<div></div><div></div><div></div>
|
|
839
|
+
</div>
|
|
840
|
+
</div>
|
|
841
|
+
|
|
842
|
+
<!-- 安全提示 -->
|
|
843
|
+
<div class="security-notice">
|
|
844
|
+
<h4>📢 安全提示</h4>
|
|
845
|
+
<p>本工具仅支持.litematic格式文件,大小不超过20MB。出于安全考虑,所有上传内容仅在本地处理,不会上传到服务器。</p>
|
|
846
|
+
</div>
|
|
847
|
+
|
|
848
|
+
<!-- 增加文件指南,减少空旷感 -->
|
|
849
|
+
<div class="file-guide">
|
|
850
|
+
<div class="file-type">
|
|
851
|
+
<div class="file-type-icon">📄</div>
|
|
852
|
+
<h4>支持文件格式</h4>
|
|
853
|
+
<p>仅支持 .litematic 格式文件</p>
|
|
854
|
+
</div>
|
|
855
|
+
<div class="file-type">
|
|
856
|
+
<div class="file-type-icon">⚙️</div>
|
|
857
|
+
<h4>生成内容</h4>
|
|
858
|
+
<p>自动生成正视图、侧视图和俯视图</p>
|
|
859
|
+
</div>
|
|
860
|
+
<div class="file-type">
|
|
861
|
+
<div class="file-type-icon">🔍</div>
|
|
862
|
+
<h4>文件大小</h4>
|
|
863
|
+
<p>建议文件大小不超过20MB</p>
|
|
864
|
+
</div>
|
|
865
|
+
</div>
|
|
866
|
+
|
|
867
|
+
<div id="file-result" class="status hidden"></div>
|
|
868
|
+
<div id="render-status" class="status hidden"></div>
|
|
869
|
+
</div>
|
|
870
|
+
|
|
871
|
+
<div id="views-card" class="card hidden pixel-border">
|
|
872
|
+
<h2>渲染结果</h2>
|
|
873
|
+
<div id="views-loading" class="loading hidden">
|
|
874
|
+
<div class="loading-text">正在渲染三视图,请稍候...</div>
|
|
875
|
+
</div>
|
|
876
|
+
<div id="three-views-result" class="views-container"></div>
|
|
877
|
+
</div>
|
|
878
|
+
</div>
|
|
879
|
+
|
|
880
|
+
<footer>
|
|
881
|
+
我的世界Litematic 三视图渲染工具 © 2025
|
|
882
|
+
</footer>
|
|
883
|
+
|
|
884
|
+
<script>
|
|
885
|
+
// DOM 元素
|
|
886
|
+
const fileInput = document.getElementById('file-input');
|
|
887
|
+
const selectFileBtn = document.getElementById('select-file-btn');
|
|
888
|
+
const dropArea = document.getElementById('drop-area');
|
|
889
|
+
const fileResult = document.getElementById('file-result');
|
|
890
|
+
const renderStatus = document.getElementById('render-status');
|
|
891
|
+
const threeViewsResult = document.getElementById('three-views-result');
|
|
892
|
+
const viewsCard = document.getElementById('views-card');
|
|
893
|
+
const viewsLoading = document.getElementById('views-loading');
|
|
894
|
+
|
|
895
|
+
// 灯箱元素
|
|
896
|
+
const lightbox = document.getElementById('lightbox');
|
|
897
|
+
const lightboxImage = document.getElementById('lightbox-image');
|
|
898
|
+
const lightboxCaption = document.getElementById('lightbox-caption');
|
|
899
|
+
const closeLightbox = document.getElementById('close-lightbox');
|
|
900
|
+
const zoomIn = document.getElementById('zoom-in');
|
|
901
|
+
const zoomOut = document.getElementById('zoom-out');
|
|
902
|
+
const prevImage = document.getElementById('prev-image');
|
|
903
|
+
const nextImage = document.getElementById('next-image');
|
|
904
|
+
|
|
905
|
+
// 灯箱状态
|
|
906
|
+
let currentZoom = 1;
|
|
907
|
+
let currentImageIndex = 0;
|
|
908
|
+
let allImages = [];
|
|
909
|
+
|
|
910
|
+
// 资源加载
|
|
911
|
+
document.addEventListener("DOMContentLoaded", async function() {
|
|
912
|
+
try {
|
|
913
|
+
const image = document.getElementById('atlas');
|
|
914
|
+
if (image.complete) {
|
|
915
|
+
loadDeepslateResources(image);
|
|
916
|
+
} else {
|
|
917
|
+
image.onload = () => {
|
|
918
|
+
loadDeepslateResources(image);
|
|
919
|
+
};
|
|
920
|
+
}
|
|
921
|
+
} catch (error) {
|
|
922
|
+
console.error("资源加载错误:", error);
|
|
923
|
+
showStatus(fileResult, "资源加载失败: " + error.message, "error");
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
// 初始化灯箱事件
|
|
927
|
+
initLightbox();
|
|
928
|
+
});
|
|
929
|
+
|
|
930
|
+
// 初始化灯箱功能
|
|
931
|
+
function initLightbox() {
|
|
932
|
+
// 关闭灯箱
|
|
933
|
+
closeLightbox.addEventListener('click', () => {
|
|
934
|
+
lightbox.classList.remove('active');
|
|
935
|
+
currentZoom = 1;
|
|
936
|
+
lightboxImage.style.transform = `scale(${currentZoom})`;
|
|
937
|
+
});
|
|
938
|
+
|
|
939
|
+
// 点击灯箱背景关闭
|
|
940
|
+
lightbox.addEventListener('click', (e) => {
|
|
941
|
+
if (e.target === lightbox) {
|
|
942
|
+
lightbox.classList.remove('active');
|
|
943
|
+
}
|
|
944
|
+
});
|
|
945
|
+
|
|
946
|
+
// 放大
|
|
947
|
+
zoomIn.addEventListener('click', () => {
|
|
948
|
+
currentZoom += 0.2;
|
|
949
|
+
if (currentZoom > 3) currentZoom = 3;
|
|
950
|
+
lightboxImage.style.transform = `scale(${currentZoom})`;
|
|
951
|
+
});
|
|
952
|
+
|
|
953
|
+
// 缩小
|
|
954
|
+
zoomOut.addEventListener('click', () => {
|
|
955
|
+
currentZoom -= 0.2;
|
|
956
|
+
if (currentZoom < 0.5) currentZoom = 0.5;
|
|
957
|
+
lightboxImage.style.transform = `scale(${currentZoom})`;
|
|
958
|
+
});
|
|
959
|
+
|
|
960
|
+
// 鼠标滚轮缩放
|
|
961
|
+
lightbox.addEventListener('wheel', (e) => {
|
|
962
|
+
e.preventDefault();
|
|
963
|
+
if (e.deltaY < 0) {
|
|
964
|
+
// 向上滚动,放大
|
|
965
|
+
currentZoom += 0.1;
|
|
966
|
+
if (currentZoom > 3) currentZoom = 3;
|
|
967
|
+
} else {
|
|
968
|
+
// 向下滚动,缩小
|
|
969
|
+
currentZoom -= 0.1;
|
|
970
|
+
if (currentZoom < 0.5) currentZoom = 0.5;
|
|
971
|
+
}
|
|
972
|
+
lightboxImage.style.transform = `scale(${currentZoom})`;
|
|
973
|
+
});
|
|
974
|
+
|
|
975
|
+
// 前一张图片
|
|
976
|
+
prevImage.addEventListener('click', () => {
|
|
977
|
+
if (allImages.length <= 1) return;
|
|
978
|
+
currentImageIndex--;
|
|
979
|
+
if (currentImageIndex < 0) currentImageIndex = allImages.length - 1;
|
|
980
|
+
updateLightboxImage();
|
|
981
|
+
});
|
|
982
|
+
|
|
983
|
+
// 下一张图片
|
|
984
|
+
nextImage.addEventListener('click', () => {
|
|
985
|
+
if (allImages.length <= 1) return;
|
|
986
|
+
currentImageIndex++;
|
|
987
|
+
if (currentImageIndex >= allImages.length) currentImageIndex = 0;
|
|
988
|
+
updateLightboxImage();
|
|
989
|
+
});
|
|
990
|
+
|
|
991
|
+
// 键盘事件
|
|
992
|
+
document.addEventListener('keydown', (e) => {
|
|
993
|
+
if (!lightbox.classList.contains('active')) return;
|
|
994
|
+
|
|
995
|
+
switch (e.key) {
|
|
996
|
+
case 'Escape':
|
|
997
|
+
lightbox.classList.remove('active');
|
|
998
|
+
break;
|
|
999
|
+
case 'ArrowLeft':
|
|
1000
|
+
prevImage.click();
|
|
1001
|
+
break;
|
|
1002
|
+
case 'ArrowRight':
|
|
1003
|
+
nextImage.click();
|
|
1004
|
+
break;
|
|
1005
|
+
case '+':
|
|
1006
|
+
case '=':
|
|
1007
|
+
zoomIn.click();
|
|
1008
|
+
break;
|
|
1009
|
+
case '-':
|
|
1010
|
+
zoomOut.click();
|
|
1011
|
+
break;
|
|
1012
|
+
}
|
|
1013
|
+
});
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1016
|
+
// 更新灯箱图片
|
|
1017
|
+
function updateLightboxImage() {
|
|
1018
|
+
const currentImage = allImages[currentImageIndex];
|
|
1019
|
+
lightboxImage.src = currentImage.src;
|
|
1020
|
+
lightboxCaption.textContent = currentImage.caption;
|
|
1021
|
+
currentZoom = 1;
|
|
1022
|
+
lightboxImage.style.transform = `scale(${currentZoom})`;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
// 打开灯箱
|
|
1026
|
+
function openLightbox(src, caption, imagesList) {
|
|
1027
|
+
lightboxImage.src = src;
|
|
1028
|
+
lightboxCaption.textContent = caption;
|
|
1029
|
+
allImages = imagesList || [{src, caption}];
|
|
1030
|
+
currentImageIndex = allImages.findIndex(img => img.src === src);
|
|
1031
|
+
currentZoom = 1;
|
|
1032
|
+
lightboxImage.style.transform = `scale(${currentZoom})`;
|
|
1033
|
+
lightbox.classList.add('active');
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1036
|
+
// 点击按钮选择文件
|
|
1037
|
+
selectFileBtn.addEventListener('click', () => {
|
|
1038
|
+
fileInput.click();
|
|
1039
|
+
});
|
|
1040
|
+
|
|
1041
|
+
// 拖放功能
|
|
1042
|
+
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
|
1043
|
+
dropArea.addEventListener(eventName, preventDefaults, false);
|
|
1044
|
+
});
|
|
1045
|
+
|
|
1046
|
+
function preventDefaults(e) {
|
|
1047
|
+
e.preventDefault();
|
|
1048
|
+
e.stopPropagation();
|
|
1049
|
+
}
|
|
1050
|
+
|
|
1051
|
+
['dragenter', 'dragover'].forEach(eventName => {
|
|
1052
|
+
dropArea.addEventListener(eventName, () => {
|
|
1053
|
+
dropArea.classList.add('dragging');
|
|
1054
|
+
}, false);
|
|
1055
|
+
});
|
|
1056
|
+
|
|
1057
|
+
['dragleave', 'drop'].forEach(eventName => {
|
|
1058
|
+
dropArea.addEventListener(eventName, () => {
|
|
1059
|
+
dropArea.classList.remove('dragging');
|
|
1060
|
+
}, false);
|
|
1061
|
+
});
|
|
1062
|
+
|
|
1063
|
+
dropArea.addEventListener('drop', (e) => {
|
|
1064
|
+
const dt = e.dataTransfer;
|
|
1065
|
+
const files = dt.files;
|
|
1066
|
+
if (files.length) {
|
|
1067
|
+
fileInput.files = files;
|
|
1068
|
+
handleFiles(files);
|
|
1069
|
+
}
|
|
1070
|
+
}, false);
|
|
1071
|
+
|
|
1072
|
+
// 文件输入改变事件
|
|
1073
|
+
fileInput.addEventListener('change', (event) => {
|
|
1074
|
+
const files = event.target.files;
|
|
1075
|
+
if (files.length) {
|
|
1076
|
+
handleFiles(files);
|
|
1077
|
+
}
|
|
1078
|
+
});
|
|
1079
|
+
|
|
1080
|
+
// 处理上传的文件
|
|
1081
|
+
async function handleFiles(files) {
|
|
1082
|
+
const file = files[0];
|
|
1083
|
+
if (!file) return;
|
|
1084
|
+
|
|
1085
|
+
// 检查文件类型
|
|
1086
|
+
if (!file.name.toLowerCase().endsWith('.litematic')) {
|
|
1087
|
+
showStatus(fileResult, '不支持的文件类型,请上传.litematic格式文件', 'error');
|
|
1088
|
+
return;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
// 检查文件大小(20MB限制)
|
|
1092
|
+
if (file.size > 20 * 1024 * 1024) {
|
|
1093
|
+
showStatus(fileResult, '文件过大,请上传小于20MB的文件', 'error');
|
|
1094
|
+
return;
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
showStatus(fileResult, '正在加载文件...', 'processing');
|
|
1098
|
+
|
|
1099
|
+
try {
|
|
1100
|
+
// 安全性检查 - 基本内容检查
|
|
1101
|
+
const fileHeader = await readFileHeader(file, 8);
|
|
1102
|
+
// 检查文件魔数或特征 - .litematic文件是gzip压缩的NBT格式,检查gzip头
|
|
1103
|
+
// gzip文件的头两个字节是0x1F 0x8B
|
|
1104
|
+
if (fileHeader[0] !== 0x1F || fileHeader[1] !== 0x8B) {
|
|
1105
|
+
showStatus(fileResult, '无效的.litematic文件格式', 'error');
|
|
1106
|
+
return;
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
await litematicViewerAPI.loadFromFile(file);
|
|
1110
|
+
showStatus(fileResult, '文件加载成功: ' + file.name, 'success');
|
|
1111
|
+
|
|
1112
|
+
// 显示渲染卡片
|
|
1113
|
+
viewsCard.classList.remove('hidden');
|
|
1114
|
+
viewsLoading.classList.remove('hidden');
|
|
1115
|
+
|
|
1116
|
+
// 自动开始渲染三视图
|
|
1117
|
+
renderThreeViews();
|
|
1118
|
+
} catch (error) {
|
|
1119
|
+
showStatus(fileResult, '文件加载失败: ' + error.message, 'error');
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
// 读取文件头部字节
|
|
1124
|
+
function readFileHeader(file, bytes) {
|
|
1125
|
+
return new Promise((resolve, reject) => {
|
|
1126
|
+
const reader = new FileReader();
|
|
1127
|
+
reader.onload = () => {
|
|
1128
|
+
const arr = new Uint8Array(reader.result);
|
|
1129
|
+
resolve(arr);
|
|
1130
|
+
};
|
|
1131
|
+
reader.onerror = reject;
|
|
1132
|
+
reader.readAsArrayBuffer(file.slice(0, bytes));
|
|
1133
|
+
});
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
// 显示状态信息
|
|
1137
|
+
function showStatus(element, message, type = '') {
|
|
1138
|
+
element.textContent = message;
|
|
1139
|
+
element.classList.remove('hidden', 'success', 'error', 'processing');
|
|
1140
|
+
if (type) {
|
|
1141
|
+
element.classList.add(type);
|
|
1142
|
+
}
|
|
1143
|
+
}
|
|
1144
|
+
|
|
1145
|
+
// 三视图渲染函数
|
|
1146
|
+
async function renderThreeViews() {
|
|
1147
|
+
threeViewsResult.innerHTML = '';
|
|
1148
|
+
showStatus(renderStatus, '开始渲染三视图...', 'processing');
|
|
1149
|
+
|
|
1150
|
+
try {
|
|
1151
|
+
// 使用超高渲染分辨率
|
|
1152
|
+
const width = 2000;
|
|
1153
|
+
const height = 1500;
|
|
1154
|
+
|
|
1155
|
+
showStatus(renderStatus, `正在渲染三视图 (每视图 ${width}x${height})...`, 'processing');
|
|
1156
|
+
|
|
1157
|
+
// 使用高质量渲染设置
|
|
1158
|
+
const views = await litematicViewerAPI.renderThreeViews({
|
|
1159
|
+
width,
|
|
1160
|
+
height,
|
|
1161
|
+
quality: 'high', // 高质量渲染
|
|
1162
|
+
antialias: true, // 抗锯齿
|
|
1163
|
+
preserveDrawingBuffer: true // 保留绘图缓冲区以确保高质量输出
|
|
1164
|
+
});
|
|
1165
|
+
|
|
1166
|
+
// 创建视图容器
|
|
1167
|
+
const viewContainers = {
|
|
1168
|
+
'正视图': views.frontView,
|
|
1169
|
+
'侧视图': views.sideView,
|
|
1170
|
+
'俯视图': views.topView
|
|
1171
|
+
};
|
|
1172
|
+
|
|
1173
|
+
// 隐藏加载动画
|
|
1174
|
+
viewsLoading.classList.add('hidden');
|
|
1175
|
+
|
|
1176
|
+
// 准备所有图像数据,用于灯箱
|
|
1177
|
+
let allViewImages = [];
|
|
1178
|
+
Object.entries(viewContainers).forEach(([title, imageData]) => {
|
|
1179
|
+
allViewImages.push({
|
|
1180
|
+
src: imageData,
|
|
1181
|
+
caption: title
|
|
1182
|
+
});
|
|
1183
|
+
});
|
|
1184
|
+
|
|
1185
|
+
// 显示所有视图
|
|
1186
|
+
let delay = 0;
|
|
1187
|
+
Object.entries(viewContainers).forEach(([title, imageData], index) => {
|
|
1188
|
+
const viewCard = document.createElement('div');
|
|
1189
|
+
viewCard.className = 'view-card';
|
|
1190
|
+
viewCard.style.animationDelay = `${delay}s`;
|
|
1191
|
+
delay += 0.2;
|
|
1192
|
+
|
|
1193
|
+
const header = document.createElement('div');
|
|
1194
|
+
header.className = 'view-card-header';
|
|
1195
|
+
|
|
1196
|
+
// 添加Minecraft风格的图标
|
|
1197
|
+
const icon = document.createElement('span');
|
|
1198
|
+
icon.className = 'view-icon';
|
|
1199
|
+
if (title === '正视图') {
|
|
1200
|
+
icon.textContent = '🧱 '; // 方块图标
|
|
1201
|
+
} else if (title === '侧视图') {
|
|
1202
|
+
icon.textContent = '🪓 '; // 斧头图标
|
|
1203
|
+
} else if (title === '俯视图') {
|
|
1204
|
+
icon.textContent = '🔍 '; // 俯瞰图标
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
header.appendChild(icon);
|
|
1208
|
+
header.appendChild(document.createTextNode(title));
|
|
1209
|
+
viewCard.appendChild(header);
|
|
1210
|
+
|
|
1211
|
+
const body = document.createElement('div');
|
|
1212
|
+
body.className = 'view-card-body';
|
|
1213
|
+
|
|
1214
|
+
const img = new Image();
|
|
1215
|
+
|
|
1216
|
+
// 确保图像以最高质量加载
|
|
1217
|
+
img.onload = () => {
|
|
1218
|
+
viewCard.classList.add('fadeIn');
|
|
1219
|
+
|
|
1220
|
+
// 应用高质量图像处理
|
|
1221
|
+
img.style.imageRendering = 'auto';
|
|
1222
|
+
img.setAttribute('loading', 'eager'); // 优先加载图像
|
|
1223
|
+
img.setAttribute('decoding', 'sync'); // 同步解码以获得最佳质量
|
|
1224
|
+
};
|
|
1225
|
+
|
|
1226
|
+
img.src = imageData;
|
|
1227
|
+
img.alt = title;
|
|
1228
|
+
img.setAttribute('importance', 'high'); // 标记为高优先级资源
|
|
1229
|
+
// 添加点击事件,打开灯箱
|
|
1230
|
+
img.addEventListener('click', () => {
|
|
1231
|
+
openLightbox(imageData, title, allViewImages);
|
|
1232
|
+
});
|
|
1233
|
+
|
|
1234
|
+
// 添加鼠标滚轮缩放功能(直接在视图上)
|
|
1235
|
+
body.addEventListener('wheel', (e) => {
|
|
1236
|
+
e.preventDefault();
|
|
1237
|
+
const image = e.currentTarget.querySelector('img');
|
|
1238
|
+
const currentScale = parseFloat(image.style.transform.replace('scale(', '').replace(')', '') || 1);
|
|
1239
|
+
|
|
1240
|
+
let newScale;
|
|
1241
|
+
if (e.deltaY < 0) {
|
|
1242
|
+
// 向上滚动,放大
|
|
1243
|
+
newScale = Math.min(currentScale + 0.1, 3);
|
|
1244
|
+
} else {
|
|
1245
|
+
// 向下滚动,缩小
|
|
1246
|
+
newScale = Math.max(currentScale - 0.1, 0.5);
|
|
1247
|
+
}
|
|
1248
|
+
|
|
1249
|
+
image.style.transform = `scale(${newScale})`;
|
|
1250
|
+
image.style.transformOrigin = 'center center';
|
|
1251
|
+
}, { passive: false });
|
|
1252
|
+
|
|
1253
|
+
// onload 已在上方定义
|
|
1254
|
+
|
|
1255
|
+
body.appendChild(img);
|
|
1256
|
+
viewCard.appendChild(body);
|
|
1257
|
+
|
|
1258
|
+
threeViewsResult.appendChild(viewCard);
|
|
1259
|
+
});
|
|
1260
|
+
|
|
1261
|
+
showStatus(renderStatus, '三视图渲染完成', 'success');
|
|
1262
|
+
|
|
1263
|
+
} catch (error) {
|
|
1264
|
+
viewsLoading.classList.add('hidden');
|
|
1265
|
+
showStatus(renderStatus, '三视图渲染失败: ' + error.message, 'error');
|
|
1266
|
+
}
|
|
1267
|
+
}
|
|
1268
|
+
</script>
|
|
1269
|
+
|
|
1270
|
+
<div id="ai-speaker-content"></div></body><div id="immersive-translate-popup" style="all: initial"><template shadowrootmode="open"><div id="mount" style="display: block;"><div class="imt-fb-container right imt-notranslate " data-theme="light" style="z-index: 2147483637; pointer-events: none; right: 0px; top: 549px; display: flex;"><div class="btn-animate" style="transform: translateX(-5px); opacity: 0.7; pointer-events: all; filter: blur(0px); transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), filter 280ms cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, filter;"><div class="imt-fb-btn imt-fb-more-button imt-fb-side" style="pointer-events: all;"><div class=" btn-animate" style="position: relative; pointer-events: all; display: inline-block;"><div><svg class="imt-fb-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M9.65332 13.3477C10.4097 13.4245 11 14.0632 11 14.8398V18.8398L10.9922 18.9932C10.9205 19.6992 10.3593 20.2604 9.65332 20.332L9.5 20.3398H5.5C4.72334 20.3398 4.08461 19.7496 4.00781 18.9932L4 18.8398V14.8398C4 14.0114 4.67157 13.3398 5.5 13.3398H9.5L9.65332 13.3477ZM18.6533 13.3477C19.4097 13.4245 20 14.0632 20 14.8398V18.8398L19.9922 18.9932C19.9205 19.6992 19.3593 20.2604 18.6533 20.332L18.5 20.3398H14.5C13.7233 20.3398 13.0846 19.7496 13.0078 18.9932L13 18.8398V14.8398C13 14.0114 13.6716 13.3398 14.5 13.3398H18.5L18.6533 13.3477ZM5.5 14.3398C5.22386 14.3398 5 14.5637 5 14.8398V18.8398C5 19.116 5.22386 19.3398 5.5 19.3398H9.5C9.77614 19.3398 10 19.116 10 18.8398V14.8398C10 14.5637 9.77614 14.3398 9.5 14.3398H5.5ZM14.5 14.3398C14.2239 14.3398 14 14.5637 14 14.8398V18.8398C14 19.116 14.2239 19.3398 14.5 19.3398H18.5C18.7761 19.3398 19 19.116 19 18.8398V14.8398C19 14.5637 18.7761 14.3398 18.5 14.3398H14.5ZM9.65332 4.34766C10.4097 4.42445 11 5.06318 11 5.83984V9.83984L10.9922 9.99316C10.9205 10.6992 10.3593 11.2604 9.65332 11.332L9.5 11.3398H5.5C4.72334 11.3398 4.08461 10.7496 4.00781 9.99316L4 9.83984V5.83984C4 5.01142 4.67157 4.33984 5.5 4.33984H9.5L9.65332 4.34766ZM16.1484 3.18848C16.2521 2.83834 16.7479 2.83834 16.8516 3.18848L17.3281 4.79785C17.5079 5.40507 17.9648 5.89104 18.5596 6.1084L20.0576 6.65625C20.3786 6.77361 20.3785 7.22732 20.0576 7.34473L18.5596 7.89258C17.9648 8.10991 17.5079 8.59598 17.3281 9.20312L16.8516 10.8125C16.7479 11.1626 16.2521 11.1626 16.1484 10.8125L15.6719 9.20312C15.4921 8.59598 15.0352 8.10991 14.4404 7.89258L12.9424 7.34473C12.6215 7.22732 12.6214 6.77361 12.9424 6.65625L14.4404 6.1084C15.0352 5.89104 15.4921 5.40507 15.6719 4.79785L16.1484 3.18848ZM5.5 5.33984C5.22386 5.33984 5 5.5637 5 5.83984V9.83984C5 10.116 5.22386 10.3398 5.5 10.3398H9.5C9.77614 10.3398 10 10.116 10 9.83984V5.83984C10 5.5637 9.77614 5.33984 9.5 5.33984H5.5Z" fill="#ED6D8F"></path></svg><svg class="imt-fb-pin-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="7" fill="#B1B1B166"></circle><g transform="translate(2, 2)"><mask id="mask0_39788_745" maskUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" style="mask-type: alpha;"><rect width="10" height="10" fill="#D9D9D9"></rect></mask><g mask="url(#mask0_39788_745)"><path d="M6.23958 3.76042C6.28819 3.80903 6.35243 3.88194 6.43229 3.97917C6.51215 4.07639 6.59722 4.18056 6.6875 4.29167C6.6875 4.44444 6.63646 4.57292 6.53438 4.67708C6.43222 4.78125 6.30618 4.83333 6.15625 4.83333C6.00056 4.83333 5.86962 4.78125 5.76344 4.67708C5.65726 4.57292 5.60417 4.44444 5.60417 4.29167C5.59722 4.28472 5.59201 4.28646 5.58854 4.29688C5.58507 4.30729 5.58333 4.31076 5.58333 4.30729C5.58333 4.30382 5.59028 4.30382 5.60417 4.30729C5.61806 4.31076 5.62153 4.30903 5.61458 4.30208C5.47569 4.30208 5.3559 4.25104 5.25521 4.14896C5.15451 4.04681 5.10417 3.92771 5.10417 3.79167C5.10417 3.65278 5.15451 3.53299 5.25521 3.43229C5.3559 3.3316 5.47569 3.28125 5.61458 3.28125C5.74653 3.35764 5.86111 3.43403 5.95833 3.51042C6.05556 3.58681 6.14931 3.67014 6.23958 3.76042ZM5 2.75C4.94667 2.75 4.89465 2.75017 4.84396 2.75052C4.79326 2.75087 4.74083 2.75035 4.68667 2.74896C4.54139 2.7566 4.39931 2.72049 4.26042 2.64062C4.12153 2.56076 4.03472 2.44618 4 2.29688C3.96528 2.14757 3.98611 2.01389 4.0625 1.89583C4.13889 1.77778 4.25267 1.71094 4.40385 1.69531C4.50962 1.6901 4.61059 1.68576 4.70677 1.68229C4.80295 1.67882 4.90069 1.67708 5 1.67708C5.97917 1.67708 6.88368 1.93056 7.71354 2.4375C8.5434 2.94444 9.17059 3.64625 9.5951 4.54292C9.62892 4.61847 9.65451 4.69451 9.67188 4.77104C9.68924 4.84757 9.69792 4.92389 9.69792 5C9.69792 5.07611 9.69097 5.15417 9.67708 5.23417C9.66319 5.31417 9.64236 5.39236 9.61458 5.46875C9.49826 5.68972 9.36504 5.89948 9.2149 6.09802C9.06469 6.29656 8.90278 6.49306 8.72917 6.6875C8.63194 6.79861 8.51042 6.85069 8.36458 6.84375C8.21875 6.83681 8.09375 6.78069 7.98958 6.67542C7.88542 6.57007 7.83681 6.44507 7.84375 6.30042C7.85069 6.15569 7.90278 6.02431 8 5.90625C8.13194 5.76736 8.25125 5.62153 8.35792 5.46875C8.46465 5.31597 8.5641 5.15972 8.65625 5C8.30208 4.30556 7.79861 3.75694 7.14583 3.35417C6.49306 2.95139 5.77778 2.75 5 2.75ZM5 8.32292C4.04861 8.32292 3.1684 8.07465 2.35938 7.57812C1.55035 7.0816 0.919896 6.40906 0.468021 5.56052C0.419896 5.46462 0.387153 5.37142 0.369792 5.28094C0.352431 5.19052 0.34375 5.09677 0.34375 4.99969C0.34375 4.90267 0.352431 4.80556 0.369792 4.70833C0.387153 4.61111 0.420139 4.51736 0.46875 4.42708C0.614583 4.13542 0.787361 3.86813 0.987083 3.62521C1.18688 3.38229 1.40646 3.15306 1.64583 2.9375L0.96875 2.27083C0.871528 2.18056 0.821181 2.07812 0.817708 1.96354C0.814236 1.84896 0.861111 1.74306 0.958333 1.64583C1.05556 1.54861 1.16319 1.5 1.28125 1.5C1.39931 1.5 1.50694 1.54861 1.60417 1.64583L8.19792 8.23958C8.29514 8.33681 8.34201 8.44271 8.33854 8.55729C8.33507 8.67188 8.28819 8.77431 8.19792 8.86458C8.10069 8.96181 7.99479 9.01042 7.88021 9.01042C7.76562 9.01042 7.65972 8.96181 7.5625 8.86458L6.70833 8.01042C6.43472 8.12153 6.15382 8.20139 5.86562 8.25C5.57743 8.29861 5.28889 8.32292 5 8.32292ZM2.41667 3.6875C2.20139 3.88194 2.00347 4.08507 1.82292 4.29688C1.64236 4.50868 1.48611 4.74306 1.35417 5C1.69444 5.70139 2.19271 6.25174 2.84896 6.65104C3.50521 7.05035 4.22222 7.25 5 7.25C5.14729 7.25 5.29347 7.24132 5.43854 7.22396C5.58368 7.2066 5.72569 7.18056 5.86458 7.14583L5.39583 6.67708C5.33333 6.70486 5.26736 6.72396 5.19792 6.73438C5.12847 6.74479 5.0625 6.75 5 6.75C4.51389 6.75 4.10069 6.57986 3.76042 6.23958C3.42014 5.89931 3.25 5.48611 3.25 5C3.25 4.9375 3.25694 4.87153 3.27083 4.80208C3.28472 4.73264 3.29514 4.66667 3.30208 4.60417L2.41667 3.6875Z" fill="white"></path></g></g></svg></div></div></div></div><div hidden="" class="imt-no-events " id="manga-button" style="position: relative; opacity: 0.7;"><div class="imt-manga-button btn-animate" style="transform: translateX(2px);"><div style="position: relative;"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" style="vertical-align: middle;"><path d="M14.8853 4.92364C14.8853 4.92364 16.3905 10.4362 22.6668 4C22.6668 4 20.3381 10.8907 25.3364 10.0843C25.3364 10.0843 22.0563 15.6994 29 18.0599C29 18.0599 22.9934 19.306 21.1617 28C21.1617 28 17.7679 24.54 14.8853 27.3549C14.8853 27.3549 13.3233 23.5724 7.33097 26.27C7.33097 26.27 10.1141 20.6549 4.83179 21.0507C4.83179 21.0507 7.16057 18.8955 3 15.9047C3 15.9047 7.50137 16.1833 6.33697 11.7117C6.33697 11.7117 10.0005 12.3421 8.66576 6.82957C8.65156 6.81491 12.4855 9.80574 14.8853 4.92364Z" fill="#ED6D8F"></path><path d="M20.8599 13.7022C20.885 13.1361 20.9543 12.5713 20.9959 12.0052C21.0337 11.568 20.8107 11.2794 20.3876 11.18C20.0759 11.1013 19.7508 11.0867 19.433 11.137C19.1951 11.1945 18.9542 11.2396 18.7113 11.2721C18.2403 11.3028 17.9973 11.5275 17.9796 11.988C17.977 12.0833 17.9596 12.1777 17.928 12.268C17.3034 13.9102 16.6774 15.5499 16.0503 17.1873C16.0301 17.2401 16.0062 17.2904 15.9671 17.3776C15.7291 16.8975 15.4281 16.4898 15.2745 15.9986C14.8073 14.5152 14.3186 13.033 13.8312 11.5594C13.6826 11.1112 13.3489 10.9344 12.8754 11.0216C12.7889 11.0365 12.7008 11.0398 12.6134 11.0314C12.2241 10.9938 11.8311 11.0404 11.4623 11.1677C11.0946 11.2991 10.9498 11.557 11.0152 11.9254C11.0428 12.0371 11.0643 12.1503 11.0795 12.2643C11.1223 13.1902 11.1777 14.1087 11.2054 15.0321C11.257 16.7992 11.2117 18.5651 11.0858 20.3284C11.0644 20.6354 11.0304 20.9424 11.0228 21.2494C11.0115 21.6092 11.1613 21.7811 11.5266 21.8143C11.9976 21.8573 12.4711 21.8708 12.9421 21.9088C13.0309 21.9201 13.121 21.9003 13.1962 21.8528C13.2714 21.8053 13.3268 21.7334 13.3527 21.6497C13.3996 21.5394 13.4252 21.4216 13.4282 21.3022C13.4295 20.8258 13.4207 20.3493 13.4081 19.8741C13.393 19.3264 13.3917 18.7763 13.3438 18.231C13.2857 17.5839 13.266 16.934 13.2847 16.2847C13.2847 16.2466 13.291 16.2073 13.2985 16.1312C13.3338 16.2024 13.3514 16.2356 13.3665 16.2712C13.9017 17.5228 14.3617 18.8037 14.7443 20.1074C14.7928 20.2421 14.7928 20.3889 14.7443 20.5237C14.6322 20.8196 14.7141 21.037 14.9659 21.1377C15.4445 21.3268 15.9331 21.4926 16.4155 21.6731C16.4865 21.7033 16.566 21.7091 16.6408 21.6895C16.7157 21.6698 16.7815 21.6259 16.8273 21.565C16.9085 21.4643 16.9743 21.3526 17.0225 21.2335C17.0537 21.1374 17.0798 21.0399 17.1006 20.9412C17.3185 20.2425 17.5653 19.5499 17.7517 18.8438C17.9785 17.9723 18.2624 17.1158 18.6018 16.2798C18.6201 16.2439 18.6411 16.2094 18.6647 16.1766C18.6761 16.2319 18.6761 16.254 18.6761 16.2761C18.6345 17.59 18.5955 18.8978 18.5501 20.2056C18.5363 20.5949 18.491 20.9829 18.4809 21.3722C18.4721 21.705 18.6207 21.8708 18.9557 21.9002C19.4355 21.9432 19.9191 21.9592 20.4002 21.9973C20.4888 22.0079 20.5784 21.9875 20.653 21.9399C20.7277 21.8922 20.7827 21.8203 20.8082 21.7369C20.8531 21.6305 20.8766 21.5167 20.8775 21.4017C20.88 20.7668 20.8674 20.132 20.8674 19.4971C20.8662 19.2846 20.8687 19.0722 20.8523 18.8622C20.8158 18.3968 20.7264 17.9314 20.7339 17.4685C20.7515 16.2122 20.8044 14.9572 20.8599 13.7022Z" fill="white"></path></svg></div></div></div><div style="display: flex; align-items: center; flex-direction: row; gap: 8px;"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" style="display: block; opacity: 0;"><g clip-path="url(#clip0_38845_9816)"><path d="M7 14C5.14348 14 3.36301 13.2625 2.05025 11.9497C0.737498 10.637 0 8.85652 0 7C0 5.14348 0.737498 3.36301 2.05025 2.05025C3.36301 0.737498 5.14348 0 7 0C8.85652 0 10.637 0.737498 11.9497 2.05025C13.2625 3.36301 14 5.14348 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14Z" fill="#B1B1B1" fill-opacity="0.4"></path><path d="M6.11754 7.00052L4.18254 5.06452C4.06786 4.94725 4.00406 4.78948 4.00498 4.62546C4.00589 4.46144 4.07145 4.3044 4.18744 4.18841C4.30342 4.07243 4.46046 4.00687 4.62448 4.00595C4.7885 4.00503 4.94627 4.06884 5.06354 4.18352L6.99954 6.11852L8.93554 4.18352C8.99315 4.1246 9.06188 4.07771 9.13774 4.04554C9.2136 4.01337 9.29508 3.99656 9.37748 3.9961C9.45988 3.99564 9.54155 4.01153 9.61777 4.04285C9.69398 4.07417 9.76323 4.1203 9.82149 4.17857C9.87976 4.23683 9.92589 4.30608 9.95721 4.38229C9.98853 4.45851 10.0044 4.54018 10.004 4.62258C10.0035 4.70497 9.98669 4.78646 9.95452 4.86232C9.92235 4.93818 9.87545 5.00691 9.81654 5.06452L7.88154 7.00052L9.81654 8.93652C9.93122 9.05379 9.99502 9.21155 9.99411 9.37557C9.99319 9.5396 9.92763 9.69664 9.81164 9.81262C9.69566 9.9286 9.53862 9.99417 9.3746 9.99508C9.21058 9.996 9.05281 9.9322 8.93554 9.81752L6.99954 7.88252L5.06354 9.81752C5.00593 9.87643 4.93721 9.92333 4.86135 9.9555C4.78549 9.98767 4.704 10.0045 4.6216 10.0049C4.5392 10.0054 4.45753 9.9895 4.38131 9.95818C4.3051 9.92686 4.23585 9.88073 4.17759 9.82247C4.11932 9.7642 4.0732 9.69496 4.04188 9.61874C4.01056 9.54253 3.99467 9.46086 3.99513 9.37846C3.99559 9.29606 4.01239 9.21457 4.04456 9.13871C4.07673 9.06285 4.12363 8.99413 4.18254 8.93652L6.11754 7.00052Z" fill="white"></path></g><defs><clippath id="clip0_38845_9816"><rect width="14" height="14" fill="white"></rect></clippath></defs></svg><div style="position: relative;"><div class="imt-fb-btn right btn-animate " dir="ltr" style="opacity: 0.7;"><div class=" " style="position: relative; pointer-events: all; display: inline-block;"><div><div class="imt-fb-btn-content"><svg class="imt-fb-logo-img imt-fb-logo-img-big-bg" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#ED6D8F"></path><path d="M7.30921 15.6381C7.53044 15.6381 7.70979 15.8175 7.70979 16.0387V19.0088C7.70979 19.934 8.45993 20.684 9.38526 20.684H11.7557C11.9769 20.684 12.1562 20.8634 12.1562 21.0846V22.152C12.1562 22.3732 11.9769 22.5526 11.7557 22.5526H9.38526C7.42782 22.5526 5.84099 20.966 5.84099 19.0088V16.0387C5.84099 15.8175 6.02034 15.6381 6.24157 15.6381H7.30921ZM18.9876 12.6944C19.1515 12.6944 19.2989 12.7943 19.3597 12.9466L22.9711 22.0036C23.076 22.2667 22.8822 22.5526 22.599 22.5526H21.4672C21.3016 22.5526 21.153 22.4506 21.0934 22.2961L20.2724 20.1673C20.2128 20.0128 20.0643 19.9108 19.8986 19.9108H16.7508C16.5852 19.9108 16.4366 20.0128 16.377 20.1673L15.556 22.2961C15.4964 22.4506 15.3478 22.5526 15.1822 22.5526H14.0504C13.7672 22.5526 13.5734 22.2667 13.6783 22.0036L17.2897 12.9466C17.3505 12.7943 17.4979 12.6944 17.6618 12.6944H18.9876ZM18.5116 15.6017C18.4456 15.4308 18.2038 15.4308 18.1378 15.6017L17.3016 17.7699C17.251 17.9011 17.3478 18.0423 17.4885 18.0423H19.1609C19.3016 18.0423 19.3984 17.9012 19.3478 17.7699L18.5116 15.6017ZM9.69589 5.30028C9.79943 4.8999 10.368 4.89991 10.4715 5.30028L11.1086 7.76368C11.3244 8.59845 11.9396 9.27221 12.7513 9.56299L14.9019 10.3334C15.2559 10.4602 15.2559 10.9608 14.9019 11.0876L12.7513 11.8581C11.9396 12.1489 11.3244 12.8226 11.1086 13.6574L10.4715 16.1208C10.368 16.5212 9.79943 16.5212 9.69589 16.1208L9.05884 13.6574C8.84297 12.8226 8.22786 12.1489 7.41615 11.8581L5.26548 11.0876C4.91151 10.9608 4.91151 10.4602 5.26548 10.3334L7.41615 9.56299C8.22786 9.27221 8.84297 8.59844 9.05884 7.76368L9.69589 5.30028ZM18.0064 6.20485C19.9639 6.20485 21.5507 7.79145 21.5507 9.74861V11.281C21.5507 11.5022 21.3713 11.6816 21.1501 11.6816H20.0825C19.8612 11.6816 19.6819 11.5022 19.6819 11.281V9.74861C19.6819 8.82341 18.9318 8.07338 18.0064 8.07338H14.4343C14.2131 8.07338 14.0337 7.89403 14.0337 7.6728V6.60543C14.0337 6.3842 14.2131 6.20486 14.4343 6.20485H18.0064Z" fill="white"></path></svg></div></div></div></div><div title="关闭悬浮球" class="imt-fb-close-button btn-animate" style="opacity: 0; pointer-events: none; filter: blur(1px); transition: opacity 110ms cubic-bezier(0.4, 0, 1, 1), filter 110ms cubic-bezier(0.4, 0, 1, 1); will-change: opacity, filter;"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><g clip-path="url(#clip0_38845_9816)"><path d="M7 14C5.14348 14 3.36301 13.2625 2.05025 11.9497C0.737498 10.637 0 8.85652 0 7C0 5.14348 0.737498 3.36301 2.05025 2.05025C3.36301 0.737498 5.14348 0 7 0C8.85652 0 10.637 0.737498 11.9497 2.05025C13.2625 3.36301 14 5.14348 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14Z" fill="#B1B1B1" fill-opacity="0.4"></path><path d="M6.11754 7.00052L4.18254 5.06452C4.06786 4.94725 4.00406 4.78948 4.00498 4.62546C4.00589 4.46144 4.07145 4.3044 4.18744 4.18841C4.30342 4.07243 4.46046 4.00687 4.62448 4.00595C4.7885 4.00503 4.94627 4.06884 5.06354 4.18352L6.99954 6.11852L8.93554 4.18352C8.99315 4.1246 9.06188 4.07771 9.13774 4.04554C9.2136 4.01337 9.29508 3.99656 9.37748 3.9961C9.45988 3.99564 9.54155 4.01153 9.61777 4.04285C9.69398 4.07417 9.76323 4.1203 9.82149 4.17857C9.87976 4.23683 9.92589 4.30608 9.95721 4.38229C9.98853 4.45851 10.0044 4.54018 10.004 4.62258C10.0035 4.70497 9.98669 4.78646 9.95452 4.86232C9.92235 4.93818 9.87545 5.00691 9.81654 5.06452L7.88154 7.00052L9.81654 8.93652C9.93122 9.05379 9.99502 9.21155 9.99411 9.37557C9.99319 9.5396 9.92763 9.69664 9.81164 9.81262C9.69566 9.9286 9.53862 9.99417 9.3746 9.99508C9.21058 9.996 9.05281 9.9322 8.93554 9.81752L6.99954 7.88252L5.06354 9.81752C5.00593 9.87643 4.93721 9.92333 4.86135 9.9555C4.78549 9.98767 4.704 10.0045 4.6216 10.0049C4.5392 10.0054 4.45753 9.9895 4.38131 9.95818C4.3051 9.92686 4.23585 9.88073 4.17759 9.82247C4.11932 9.7642 4.0732 9.69496 4.04188 9.61874C4.01056 9.54253 3.99467 9.46086 3.99513 9.37846C3.99559 9.29606 4.01239 9.21457 4.04456 9.13871C4.07673 9.06285 4.12363 8.99413 4.18254 8.93652L6.11754 7.00052Z" fill="white"></path></g><defs><clippath id="clip0_38845_9816"><rect width="14" height="14" fill="white"></rect></clippath></defs></svg></div></div><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" style="display: none; opacity: 0;"><g clip-path="url(#clip0_38845_9816)"><path d="M7 14C5.14348 14 3.36301 13.2625 2.05025 11.9497C0.737498 10.637 0 8.85652 0 7C0 5.14348 0.737498 3.36301 2.05025 2.05025C3.36301 0.737498 5.14348 0 7 0C8.85652 0 10.637 0.737498 11.9497 2.05025C13.2625 3.36301 14 5.14348 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14Z" fill="#B1B1B1" fill-opacity="0.4"></path><path d="M6.11754 7.00052L4.18254 5.06452C4.06786 4.94725 4.00406 4.78948 4.00498 4.62546C4.00589 4.46144 4.07145 4.3044 4.18744 4.18841C4.30342 4.07243 4.46046 4.00687 4.62448 4.00595C4.7885 4.00503 4.94627 4.06884 5.06354 4.18352L6.99954 6.11852L8.93554 4.18352C8.99315 4.1246 9.06188 4.07771 9.13774 4.04554C9.2136 4.01337 9.29508 3.99656 9.37748 3.9961C9.45988 3.99564 9.54155 4.01153 9.61777 4.04285C9.69398 4.07417 9.76323 4.1203 9.82149 4.17857C9.87976 4.23683 9.92589 4.30608 9.95721 4.38229C9.98853 4.45851 10.0044 4.54018 10.004 4.62258C10.0035 4.70497 9.98669 4.78646 9.95452 4.86232C9.92235 4.93818 9.87545 5.00691 9.81654 5.06452L7.88154 7.00052L9.81654 8.93652C9.93122 9.05379 9.99502 9.21155 9.99411 9.37557C9.99319 9.5396 9.92763 9.69664 9.81164 9.81262C9.69566 9.9286 9.53862 9.99417 9.3746 9.99508C9.21058 9.996 9.05281 9.9322 8.93554 9.81752L6.99954 7.88252L5.06354 9.81752C5.00593 9.87643 4.93721 9.92333 4.86135 9.9555C4.78549 9.98767 4.704 10.0045 4.6216 10.0049C4.5392 10.0054 4.45753 9.9895 4.38131 9.95818C4.3051 9.92686 4.23585 9.88073 4.17759 9.82247C4.11932 9.7642 4.0732 9.69496 4.04188 9.61874C4.01056 9.54253 3.99467 9.46086 3.99513 9.37846C3.99559 9.29606 4.01239 9.21457 4.04456 9.13871C4.07673 9.06285 4.12363 8.99413 4.18254 8.93652L6.11754 7.00052Z" fill="white"></path></g><defs><clippath id="clip0_38845_9816"><rect width="14" height="14" fill="white"></rect></clippath></defs></svg></div><div class="btn-animate" style="margin-top: 10px; transform: translateX(-5px); opacity: 0; pointer-events: none; filter: blur(1px); transition: opacity 110ms cubic-bezier(0.4, 0, 1, 1), filter 110ms cubic-bezier(0.4, 0, 1, 1); will-change: opacity, filter;"><div class=" btn-animate" style="position: relative; pointer-events: none; display: inline-block;"><div><div class="imt-fb-round-button"><svg class="imt-fb-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" style="width: 24px; height: 24px;"><path d="M17 8.66797H11.375" stroke="#ED6D8F" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.625 15.332L7 15.332" stroke="#ED6D8F" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.125 17C16.1605 17 17 16.1605 17 15.125C17 14.0895 16.1605 13.25 15.125 13.25C14.0895 13.25 13.25 14.0895 13.25 15.125C13.25 16.1605 14.0895 17 15.125 17Z" stroke="#ED6D8F" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.875 10.75C9.91053 10.75 10.75 9.91053 10.75 8.875C10.75 7.83947 9.91053 7 8.875 7C7.83947 7 7 7.83947 7 8.875C7 9.91053 7.83947 10.75 8.875 10.75Z" stroke="#ED6D8F" stroke-linecap="round" stroke-linejoin="round"></path><rect x="3" y="4" width="18" height="16" rx="1.66667" stroke="#ED6D8F"></rect></svg></div></div></div></div><div class="btn-animate" style="margin-top: 10px; transform: translateX(-5px); opacity: 0; pointer-events: none; filter: blur(1px); transition: opacity 110ms cubic-bezier(0.4, 0, 1, 1), filter 110ms cubic-bezier(0.4, 0, 1, 1); will-change: opacity, filter;"><div class=" btn-animate" style="position: relative; pointer-events: none; display: inline-block;"><div><div class="imt-fb-round-button"><svg class="imt-fb-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><mask id="mask0_43829_2633" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20" style="mask-type: alpha;"><rect width="20" height="20" fill="#D9D9D9"></rect></mask><g mask="url(#mask0_43829_2633)"><path d="M9.99546 12.2609C10.1639 12.2609 10.305 12.2055 10.4188 12.0946C10.5327 11.9838 10.5896 11.8441 10.5896 11.6755C10.5896 11.507 10.5342 11.3659 10.4234 11.2521C10.3124 11.1384 10.1727 11.0815 10.0042 11.0815C9.83574 11.0815 9.69463 11.1369 9.58088 11.2478C9.46699 11.3586 9.41005 11.4982 9.41005 11.6667C9.41005 11.8353 9.46546 11.9765 9.5763 12.0903C9.68727 12.204 9.82699 12.2609 9.99546 12.2609ZM9.99546 10.1936C10.148 10.1936 10.2771 10.1418 10.3828 10.0382C10.4886 9.93443 10.5415 9.80568 10.5415 9.65193V5.20318C10.5415 5.04943 10.49 4.92075 10.3871 4.81713C10.2844 4.71338 10.1567 4.66151 10.0042 4.66151C9.85171 4.66151 9.72261 4.71338 9.61692 4.81713C9.51109 4.92075 9.45817 5.04943 9.45817 5.20318V9.65193C9.45817 9.80568 9.50963 9.93443 9.61255 10.0382C9.71532 10.1418 9.84296 10.1936 9.99546 10.1936ZM5.03192 14.5846L3.55359 16.063C3.34262 16.2739 3.10032 16.3221 2.82671 16.2076C2.55324 16.093 2.4165 15.8864 2.4165 15.5878V3.75776C2.4165 3.38262 2.54602 3.06554 2.80505 2.80651C3.06407 2.54748 3.38116 2.41797 3.7563 2.41797H16.2434C16.6185 2.41797 16.9356 2.54748 17.1946 2.80651C17.4537 3.06554 17.5832 3.38262 17.5832 3.75776V13.2448C17.5832 13.62 17.4537 13.9371 17.1946 14.1961C16.9356 14.4551 16.6185 14.5846 16.2434 14.5846H5.03192ZM4.58317 13.5013H16.2434C16.3075 13.5013 16.3663 13.4746 16.4196 13.4211C16.4731 13.3678 16.4998 13.309 16.4998 13.2448V3.75776C16.4998 3.69359 16.4731 3.63484 16.4196 3.58151C16.3663 3.52804 16.3075 3.5013 16.2434 3.5013H3.7563C3.69213 3.5013 3.63338 3.52804 3.58005 3.58151C3.52657 3.63484 3.49984 3.69359 3.49984 3.75776V14.5928L4.58317 13.5013Z" fill="#ED6D8F"></path></g></svg></div></div></div></div><div hidden="" id="immersive-translate-popup-overlay" class="immersive-translate-popup-overlay"><div class="immersive-translate-popup-wrapper" style="position: fixed; bottom: 30px; right: 65px;"></div></div></div></div></template></div></html>
|