注意，将该项目直接绑定到你的域名会吃Abuse#

推荐将 index.html 重命名。让别人访问根路径无法访问到正常页面即可，但不保证永远不会吃Abuse

然后创建一个新的 index.html 写入：

1
<html><head>
2
  <title>Welcome to nginx!</title>
3
  <style>
4
    body {
5
      width: 35em;
6
      margin: 0 auto;
7
      font-family: Tahoma, Verdana, Arial, sans-serif;
8
    }
9
  </style>
10
  <style data-id="immersive-translate-input-injected-css">.immersive-translate-input {
11
  position: absolute;
12
  top: 0;
13
  right: 0;
14
  left: 0;
15
  bottom: 0;
16
  z-index: 2147483647;
17
  display: flex;
18
  justify-content: center;
19
  align-items: center;
20
}
21
.immersive-translate-attach-loading::after {
22
  content: " ";
23

24
  --loading-color: #f78fb6;
25
  width: 6px;
26
  height: 6px;
27
  border-radius: 50%;
28
  display: block;
29
  margin: 12px auto;
30
  position: relative;
31
  color: white;
32
  left: -100px;
33
  box-sizing: border-box;
34
  animation: immersiveTranslateShadowRolling 1.5s linear infinite;
35

36
  position: absolute;
37
  top: 50%;
38
  left: 50%;
39
  transform: translate(-2000%, -50%);
40
  z-index: 100;
41
}
42

43
.immersive-translate-loading-spinner {
44
  vertical-align: middle !important;
45
  width: 10px !important;
46
  height: 10px !important;
47
  display: inline-block !important;
48
  margin: 0 4px !important;
49
  border: 2px rgba(221, 244, 255, 0.6) solid !important;
50
  border-top: 2px rgba(0, 0, 0, 0.375) solid !important;
51
  border-left: 2px rgba(0, 0, 0, 0.375) solid !important;
52
  border-radius: 50% !important;
53
  padding: 0 !important;
54
  -webkit-animation: immersive-translate-loading-animation 0.6s infinite linear !important;
55
  animation: immersive-translate-loading-animation 0.6s infinite linear !important;
56
}
57

58
@-webkit-keyframes immersive-translate-loading-animation {
59
  from {
60
    -webkit-transform: rotate(0deg);
61
  }
62

63
  to {
64
    -webkit-transform: rotate(359deg);
65
  }
66
}
67

68
@keyframes immersive-translate-loading-animation {
69
  from {
70
    transform: rotate(0deg);
71
  }
72

73
  to {
74
    transform: rotate(359deg);
75
  }
76
}
77

78
.immersive-translate-input-loading {
79
  --loading-color: #f78fb6;
80
  width: 6px;
81
  height: 6px;
82
  border-radius: 50%;
83
  display: block;
84
  margin: 12px auto;
85
  position: relative;
86
  color: white;
87
  left: -100px;
88
  box-sizing: border-box;
89
  animation: immersiveTranslateShadowRolling 1.5s linear infinite;
90
}
91

92
@keyframes immersiveTranslateShadowRolling {
93
  0% {
94
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
95
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
96
  }
97

98
  12% {
99
    box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0),
100
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
101
  }
102

103
  25% {
104
    box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color),
105
      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
106
  }
107

108
  36% {
109
    box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color),
110
      100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
111
  }
112

113
  50% {
114
    box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color),
115
      110px 0 var(--loading-color), 100px 0 var(--loading-color);
116
  }
117

118
  62% {
119
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color),
120
      120px 0 var(--loading-color), 110px 0 var(--loading-color);
121
  }
122

123
  75% {
124
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
125
      130px 0 var(--loading-color), 120px 0 var(--loading-color);
126
  }
127

128
  87% {
129
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
130
      200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color);
131
  }
132

133
  100% {
134
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
135
      200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
136
  }
137
}
138

139
.immersive-translate-toast {
140
  display: flex;
141
  position: fixed;
142
  z-index: 2147483647;
143
  left: 0;
144
  right: 0;
145
  top: 1%;
146
  width: fit-content;
147
  padding: 12px 20px;
148
  margin: auto;
149
  overflow: auto;
150
  background: #fef6f9;
151
  box-shadow: 0px 4px 10px 0px rgba(0, 10, 30, 0.06);
152
  font-size: 15px;
153
  border-radius: 8px;
154
  color: #333;
155
}
156

157
.immersive-translate-toast-content {
158
  display: flex;
159
  flex-direction: row;
160
  align-items: center;
161
}
162

163
.immersive-translate-toast-hidden {
164
  margin: 0 20px 0 72px;
165
  text-decoration: underline;
166
  cursor: pointer;
167
}
168

169
.immersive-translate-toast-close {
170
  color: #666666;
171
  font-size: 20px;
172
  font-weight: bold;
173
  padding: 0 10px;
174
  cursor: pointer;
175
}
176

177
@media screen and (max-width: 768px) {
178
  .immersive-translate-toast {
179
    top: 0;
180
    padding: 12px 0px 0 10px;
181
  }
182
  .immersive-translate-toast-content {
183
    flex-direction: column;
184
    text-align: center;
185
  }
186
  .immersive-translate-toast-hidden {
187
    margin: 10px auto;
188
  }
189
}
190

191
.immersive-translate-modal {
192
  display: none;
193
  position: fixed;
194
  z-index: 2147483647;
195
  left: 0;
196
  top: 0;
197
  width: 100%;
198
  height: 100%;
199
  overflow: auto;
200
  background-color: rgb(0, 0, 0);
201
  background-color: rgba(0, 0, 0, 0.4);
202
  font-size: 15px;
203
}
204

205
.immersive-translate-modal-content {
206
  background-color: #fefefe;
207
  margin: 10% auto;
208
  padding: 40px 24px 24px;
209
  border-radius: 12px;
210
  width: 350px;
211
  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
212
    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
213
    "Segoe UI Symbol", "Noto Color Emoji";
214
  position: relative;
215
}
216

217
@media screen and (max-width: 768px) {
218
  .immersive-translate-modal-content {
219
    margin: 50% auto !important;
220
  }
221
}
222

223
.immersive-translate-modal .immersive-translate-modal-content-in-input {
224
  max-width: 500px;
225
}
226
.immersive-translate-modal-content-in-input .immersive-translate-modal-body {
227
  text-align: left;
228
  max-height: unset;
229
}
230

231
.immersive-translate-modal-title {
232
  text-align: center;
233
  font-size: 16px;
234
  font-weight: 700;
235
  color: #333333;
236
}
237

238
.immersive-translate-modal-body {
239
  text-align: center;
240
  font-size: 14px;
241
  font-weight: 400;
242
  color: #333333;
243
  margin-top: 24px;
244
}
245

246
@media screen and (max-width: 768px) {
247
  .immersive-translate-modal-body {
248
    max-height: 250px;
249
    overflow-y: auto;
250
  }
251
}
252

253
.immersive-translate-close {
254
  color: #666666;
255
  position: absolute;
256
  right: 16px;
257
  top: 16px;
258
  font-size: 20px;
259
  font-weight: bold;
260
}
261

262
.immersive-translate-close:hover,
263
.immersive-translate-close:focus {
264
  text-decoration: none;
265
  cursor: pointer;
266
}
267

268
.immersive-translate-modal-footer {
269
  display: flex;
270
  justify-content: center;
271
  flex-wrap: wrap;
272
  margin-top: 24px;
273
}
274

275
.immersive-translate-btn {
276
  width: fit-content;
277
  color: #fff;
278
  background-color: #ea4c89;
279
  border: none;
280
  font-size: 14px;
281
  margin: 0 8px;
282
  padding: 9px 30px;
283
  border-radius: 5px;
284
  display: flex;
285
  align-items: center;
286
  justify-content: center;
287
  cursor: pointer;
288
  transition: background-color 0.3s ease;
289
}
290

291
.immersive-translate-btn-container {
292
  display: flex;
293
  flex-direction: column;
294
  align-items: center;
295
  justify-content: center;
296
  gap: 8px;
297
}
298

299
.immersive-translate-btn:hover {
300
  background-color: #f082ac;
301
}
302
.immersive-translate-btn:disabled {
303
  opacity: 0.6;
304
  cursor: not-allowed;
305
}
306
.immersive-translate-btn:disabled:hover {
307
  background-color: #ea4c89;
308
}
309

310
.immersive-translate-link-btn {
311
  background-color: transparent;
312
  color: #ea4c89;
313
  border: none;
314
  cursor: pointer;
315
  height: 30px;
316
  line-height: 30px;
317
}
318

319
.immersive-translate-cancel-btn {
320
  /* gray color */
321
  background-color: rgb(89, 107, 120);
322
}
323

324
.immersive-translate-cancel-btn:hover {
325
  background-color: hsl(205, 20%, 32%);
326
}
327

328
.immersive-translate-action-btn {
329
  background-color: transparent;
330
  color: #ea4c89;
331
  border: 1px solid #ea4c89;
332
}
333

334
.immersive-translate-btn svg {
335
  margin-right: 5px;
336
}
337

338
.immersive-translate-link {
339
  cursor: pointer;
340
  user-select: none;
341
  -webkit-user-drag: none;
342
  text-decoration: none;
343
  color: #ea4c89;
344
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
345
}
346

347
.immersive-translate-primary-link {
348
  cursor: pointer;
349
  user-select: none;
350
  -webkit-user-drag: none;
351
  text-decoration: none;
352
  color: #ea4c89;
353
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
354
}
355

356
.immersive-translate-modal input[type="radio"] {
357
  margin: 0 6px;
358
  cursor: pointer;
359
}
360

361
.immersive-translate-modal label {
362
  cursor: pointer;
363
}
364

365
.immersive-translate-close-action {
366
  position: absolute;
367
  top: 2px;
368
  right: 0px;
369
  cursor: pointer;
370
}
371

372
.imt-image-status {
373
  background-color: rgba(0, 0, 0, 0.5) !important;
374
  display: flex !important;
375
  flex-direction: column !important;
376
  align-items: center !important;
377
  justify-content: center !important;
378
  border-radius: 16px !important;
379
}
380
.imt-image-status img,
381
.imt-image-status svg,
382
.imt-img-loading {
383
  width: 28px !important;
384
  height: 28px !important;
385
  margin: 0 0 8px 0 !important;
386
  min-height: 28px !important;
387
  min-width: 28px !important;
388
  position: relative !important;
389
}
390
.imt-img-loading {
391
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////oK74hAAAAPHRSTlMABBMIDyQXHwyBfFdDMSw+OjXCb+5RG51IvV/k0rOqlGRM6KKMhdvNyZBz9MaupmxpWyj437iYd/yJVNZeuUC7AAACt0lEQVRIx53T2XKiUBCA4QYOiyCbiAsuuGBcYtxiYtT3f6/pbqoYHVFO5r+iivpo6DpAWYpqeoFfr9f90DsYAuRSWkFnPO50OgR9PwiCUFcl2GEcx+N/YBh6pvKaefHlUgZd1zVe0NbYcQjGBfzrPE8Xz8aF+71D8gG6DHFPpc4a7xFiCDuhaWgKgGIJQ3d5IMGDrpS4S5KgpIm+en9f6PlAhKby4JwEIxlYJV9h5k5nee9GoxHJ2IDSNB0dwdad1NAxDJ/uXDHYmebdk4PdbkS58CIVHdYSUHTYYRWOJblWSyu2lmy3KNFVJNBhxcuGW4YBVCbYGRZwIooipHsNqjM4FbgOQqQqSKQQU9V8xmi1QlgHqQQ6DDBvRUVCDirs+EzGDGOQTCATgtYTnbCVLgsVgRE0T1QE0qHCFAht2z6dLvJQs3Lo2FQoDxWNUiBhaP4eRgwNkI+dAjVOA/kUrIDwf3CG8NfNOE0eiFotSuo+rBiq8tD9oY4Qzc6YJw99hl1wzpQvD7ef2M8QgnOGJfJw+EltQc+oX2yn907QB22WZcvlUpd143dqQu+8pCJZuGE4xCuPXJqqcs5sNpsI93Rmzym1k4Npk+oD1SH3/a3LOK/JpUBpWfqNySxWzCfNCUITuDG5dtuphrUJ1myeIE9bIsPiKrfqTai5WZxbhtNphYx6GEIHihyGFTI69lje/rxajdh0s0msZ0zYxyPLhYCb1CyHm9Qsd2H37Y3lugVwL9kNh8Ot8cha6fUNQ8nuXi5z9/ExsAO4zQrb/ev1yrCB7lGyQzgYDGuxq1toDN/JGvN+HyWNHKB7zEoK+PX11e12G431erGYzwmytAWU56fkMHY5JJnDRR2eZji3AwtIcrEV8Cojat/BdQ7XOwGV1e1hDjGGjXbdArm8uJZtCH5MbcctVX8A1WpqumJHwckAAAAASUVORK5CYII=");
392
  background-size: 28px 28px;
393
  animation: image-loading-rotate 1s linear infinite !important;
394
}
395

396
.imt-image-status span {
397
  color: var(--bg-2, #fff) !important;
398
  font-size: 14px !important;
399
  line-height: 14px !important;
400
  font-weight: 500 !important;
401
  font-family: "PingFang SC", Arial, sans-serif !important;
402
}
403

404
@keyframes image-loading-rotate {
405
  from {
406
    transform: rotate(360deg);
407
  }
408
  to {
409
    transform: rotate(0deg);
410
  }
411
}
412
</style></head>
413
  <body>
414
  <h1>Welcome to nginx!</h1>
415
  <p>If you see this page, the nginx web server is successfully installed and
416
  working. Further configuration is required.</p>
417

418
  <p>For online documentation and support please refer to
419
  <a href="http://nginx.org/">nginx.org</a>.<br>
420
  Commercial support is available at
421
  <a href="http://nginx.com/">nginx.com</a>.</p>
422

423
  <p><em>Thank you for using nginx.</em></p>
424

425

426
  <div id="screenity-ui"><div class="screenity-shadow-dom"><div><div class="screenity-scrollbar"></div><div class="screenity-scrollbar"></div></div><style type="text/css">
427
      #screenity-ui, #screenity-ui div {
428
        background-color: unset;
429
        padding: unset;
430
        width: unset;
431
        box-shadow: unset;
432
        display: unset;
433
        margin: unset;
434
        border-radius: unset;
435
      }
436
      .screenity-outline {
437
        position: absolute;
438
        z-index: 99999999999;
439
        border: 2px solid #3080F8;
440
        outline-offset: -2px;
441
        pointer-events: none;
442
        border-radius: 5px!important;
443
      }
444
    .screenity-blur {
445
      filter: blur(10px)!important;
446
    }
447
      .screenity-shadow-dom * {
448
        transition: unset;
449
      }
450
      .screenity-shadow-dom .TooltipContent {
451
  border-radius: 30px!important;
452
  background-color: #29292F!important;
453
  padding: 10px 15px!important;
454
  font-size: 12px;
455
  margin-bottom: 10px!important;
456
  bottom: 100px;
457
  line-height: 1;
458
  font-family: 'Satoshi-Medium', sans-serif;
459
  z-index: 99999999!important;
460
  color: #FFF;
461
  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px!important;
462
  user-select: none;
463
  transition: opacity 0.3 ease-in-out;
464
  will-change: transform, opacity;
465
  animation-duration: 400ms;
466
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
467
  will-change: transform, opacity;
468
}
469

470
.screenity-shadow-dom .hide-tooltip {
471
  display: none!important;
472
}
473

474
.screenity-shadow-dom .tooltip-tall {
475
  margin-bottom: 20px;
476
}
477

478
.screenity-shadow-dom .tooltip-small {
479
  margin-bottom: 5px;
480
}
481

482
.screenity-shadow-dom .TooltipContent[data-state='delayed-open'][data-side='top'] {
483
  animation-name: slideDownAndFade;
484
}
485
.screenity-shadow-dom .TooltipContent[data-state='delayed-open'][data-side='right'] {
486
  animation-name: slideLeftAndFade;
487
}
488
.screenity-shadow-dom.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
489
  animation-name: slideUpAndFade;
490
}
491
.screenity-shadow-dom.TooltipContent[data-state='delayed-open'][data-side='left'] {
492
  animation-name: slideRightAndFade;
493
}
494

495
@keyframes slideUpAndFade {
496
  from {
497
    opacity: 0;
498
    transform: translateY(2px);
499
  }
500
  to {
501
    opacity: 1;
502
    transform: translateY(0);
503
  }
504
}
505

506
@keyframes slideRightAndFade {
507
  from {
508
    opacity: 0;
509
    transform: translateX(-2px);
510
  }
511
  to {
512
    opacity: 1;
513
    transform: translateX(0);
514
  }
515
}
516

517
@keyframes slideDownAndFade {
518
  from {
519
    opacity: 0;
520
    transform: translateY(-2px);
521
  }
522
  to {
523
    opacity: 1;
524
    transform: translateY(0);
525
  }
526
}
527

528
@keyframes slideLeftAndFade {
529
  from {
530
    opacity: 0;
531
    transform: translateX(2px);
532
  }
533
  to {
534
    opacity: 1;
535
    transform: translateX(0);
536
  }
537
}
538

539
#screenity-ui [data-radix-popper-content-wrapper] { z-index: 999999999999!important; }
540

541
.screenity-shadow-dom .CanvasContainer {
542
  position: fixed;
543
  pointer-events: all!important;
544
  top: 0px!important;
545
  left: 0px!important;
546
  z-index: 99999999999!important;
547
}
548
.screenity-shadow-dom .canvas {
549
  position: fixed;
550
  top: 0px!important;
551
  left: 0px!important;
552
  z-index: 99999999999!important;
553
  background: transparent!important;
554
}
555
.screenity-shadow-dom .canvas-container {
556
  top: 0px!important;
557
  left: 0px!important;
558
  z-index: 99999999999;
559
  position: fixed!important;
560
  background: transparent!important;
561
}
562

563
.ScreenityDropdownMenuContent {
564
  z-index: 99999999999!important;
565
  min-width: 200px;
566
  background-color: white;
567
  margin-top: 4px;
568
  margin-right: 8px;
569
  padding-top: 12px;
570
  padding-bottom: 12px;
571
  border-radius: 15px;
572
  z-index: 99999;
573
  font-family: 'Satoshi-Medium', sans-serif;
574
  color: #29292F;
575
  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
576
    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
577
  animation-duration: 400ms;
578
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
579
  will-change: transform, opacity;
580
}
581
.ScreenityDropdownMenuContent[data-side="top"] {
582
  animation-name: slideDownAndFade;
583
}
584
.ScreenityDropdownMenuContent[data-side="right"] {
585
  animation-name: slideLeftAndFade;
586
}
587
.ScreenityDropdownMenuContent[data-side="bottom"] {
588
  animation-name: slideUpAndFade;
589
}
590
.ScreenityDropdownMenuContent[data-side="left"] {
591
  animation-name: slideRightAndFade;
592
}
593
.ScreenityItemIndicator {
594
  position: absolute;
595
  right: 12px;
596
  width: 18px;
597
  height: 18px;
598
  background: #3080F8;
599
  border-radius: 50%;
600
  display: inline-flex;
601
  align-items: center;
602
  justify-content: center;
603
}
604
.ScreenityDropdownMenuItem,
605
.ScreenityDropdownMenuRadioItem {
606
  font-size: 14px;
607
  line-height: 1;
608
  display: flex;
609
  align-items: center;
610
  height: 40px;
611
  padding: 0 5px;
612
  position: relative;
613
  padding-left: 22px;
614
  padding-right: 22px;
615
  user-select: none;
616
  outline: none;
617
}
618
.ScreenityDropdownMenuItem:hover {
619
    background-color: #F6F7FB !important;
620
    cursor: pointer;
621
}
622
.ScreenityDropdownMenuItem[data-disabled] {
623
  color: #6E7684; !important;
624
  cursor: not-allowed;
625
  background-color: #F6F7FB !important;
626
}
627

628

629

630
@keyframes slideUpAndFade {
631
  from {
632
    opacity: 0;
633
    transform: translateY(2px);
634
  }
635
  to {
636
    opacity: 1;
637
    transform: translateY(0);
638
  }
639
}
640

641
@keyframes slideRightAndFade {
642
  from {
643
    opacity: 0;
644
    transform: translateX(-2px);
645
  }
646
  to {
647
    opacity: 1;
648
    transform: translateX(0);
649
  }
650
}
651

652
@keyframes slideDownAndFade {
653
  from {
654
    opacity: 0;
655
    transform: translateY(-2px);
656
  }
657
  to {
658
    opacity: 1;
659
    transform: translateY(0);
660
  }
661
}
662

663
@keyframes slideLeftAndFade {
664
  from {
665
    opacity: 0;
666
    transform: translateX(2px);
667
  }
668
  to {
669
    opacity: 1;
670
    transform: translateX(0);
671
  }
672
}
673

674
</style></div></div></body><div id="immersive-translate-popup" style="all: initial"></div></html>

原理#

TG Web采用前后端分离

前端为静态资产，可以直接部署到Cloudflare Page

后端有高达10个API，反代一下即可

然后将前端请求的 .web.telegram.org 改为你的域名即可

正式开始#

以 TG Web K举例子

TG 后端API共有10个，分别为

1
pluto.web.telegram.org
2
venus.web.telegram.org
3
aurora.web.telegram.org
4
vesta.web.telegram.org
5
flora.web.telegram.org
6
pluto-1.web.telegram.org
7
venus-1.web.telegram.org
8
aurora-1.web.telegram.org
9
vesta-1.web.telegram.org
10
flora-1.web.telegram.org

假如我的域名是 072103.xyz ，则为 pluto.web.072103.xyz 。其他的以此类推

Fork 仓库： morethanwords/tweb: Telegram Web K, GPL v3

全局搜索 .web.telegram.org 替换为 .web.072103.xyz

将该仓库部署到Cloudflare Page，构建命令为 pnpm build ，构建输出目录为 public

注意，将该项目直接绑定到你的域名会吃Abuse#

原理#

正式开始#

成功#