testanki1.github.io/index.html at main · BattleOfTheForces/testanki1.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testanki 的网站</title>
<link rel="stylesheet" href="https://3dtank.com/wp-content/themes/mainsite/style.css" />
<style>
    /* 页面基础布局样式 */
    @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
    body{
        margin-top: 150px;
        font-family: 'Rubik', 'M PLUS 1p';
    }
    .logo-container {
        width: 100%;
        display: flex;
        justify-content: center;
        position: absolute;
        top: 0;
        margin-top: 20px;
    }
    .logo {
        width: 200px;
    }
    * {
        -webkit-tap-highlight-color: transparent;
    }
    .button-row {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .button {
        background-color: #76FF33;
        color: #000;
        border: none;
        border-radius: 20px;
        padding: 12px 25px; /* 统一按钮内边距 */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500; /* 加一点字重 */
        margin: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .button:hover {
        background-color: #62d926;
    }
    .button:active {
        background-color: #4caf50;
    }
    .download-button {
        background-color: #fff;
        color: #000;
        width: 44px; /* 调整尺寸与按钮协调 */
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.3s;
        border: none;
        margin: 10px;
    }
    .download-button:hover {
        background-color: #e0e0e0;
    }
    .download-button:active {
        background-color: #bdbdbd;
    }
    .download-icon {
        width: 20px;
        height: 20px;
        background-image: url("https://tankionline.com/en/wp-content/themes/tanki2023/img/download-icon.svg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .footer {
        color: #fff;
        font-size: 12px;
        margin-bottom: 20px;
    }

    /* --- 弹窗特定样式 --- */
    /* 1. 增加弹窗宽度 */
    #tampermonkeyModal .content {
        max-width: 600px;
        width: 90%;
    }

    /* 2. 让弹窗内的按钮继承 .button 样式并垂直排列 */
    #tampermonkeyModal .inner-wrapper .button {
        display: block; /* 变为块级元素，使其可以撑满宽度 */
        width: 100%;
        box-sizing: border-box; /* 确保 padding 不会影响总宽度 */
        margin: 15px 0 0 0; /* 调整外边距 */
    }
     #tampermonkeyModal .inner-wrapper .button:first-child {
        margin-top: 0;
     }

</style>
</head>
<body>
<div class="logo-container">
    <img src="https://testanki1.github.io/logo.svg" alt="Testanki" class="logo" />
</div>
<div class="button-row">
        <a href="/main" class="button">服务器列表</a>
        <a href="https://www.123pan.com/s/cbiA-hjafd" class="download-button">
            <div class="download-icon"></div>
        </a>
    </div>
    <section class="additional-links">
        <div class="links">
    <a href="https://space.bilibili.com/1670766752/lists/245461?type=series" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <video preload="auto" autoplay="true" loop="true" playsinline="" muted="muted">
                    <source src="https://web-cdn.tankionline.com/tanki-online/img/videoblog.mp4" type="video/mp4">
                </video>
            </div>
            <div class="info">
                <h3>视频周报</h3>
                <p>来自开发领域的最新消息，以视频形式展示。</p>
            </div>
        </div>
    </a>
    <a href="https://en.tankiwiki.com/" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://tankionline.com/en/wp-content/themes/tanki2023/img/wiki.jpg" alt="">
            </div>
            <div class="info">
                <h3>Wiki</h3>
                <p>3D坦克的知识库，关于游戏的大量信息</p>
            </div>
        </div>
    </a>
    <a href="https://testanki1.github.io/ratings" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://tankionline.com/en/wp-content/themes/tanki2023/img/ratings.jpg" alt="">
            </div>
            <div class="info">
                <h3>排行榜</h3>
                <p>个人统计、排行榜和成就系统允许您查看您和其他人的战绩统计数据，争夺每周排行榜的排名，并获得令人难忘的成就“奖牌”</p>
            </div>
        </div>
    </a>
<a href="https://pages.tankionline.com/challenge-accepted?lang=en" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://tankionline.com/en/wp-content/themes/tanki2023/img/challenge-accepted.jpg" alt="">
            </div>
            <div class="info">
                <h3>已接受的星级挑战（外服排行榜）</h3>
                <p>完成 60 个具有挑战性的等级，获得 300 颗星星，并获得有价值的奖励，包括数千颗水晶、堆积如山的道具和幸运礼盒钥匙。</p>
            </div>
        </div>
    </a>
<a href="https://testanki1.github.io/status" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://s21.ax1x.com/2024/12/15/pAqgSJA.png" alt="">
            </div>
            <div class="info">
                <h3>服务器状态页面</h3>
                <p>实时查看服务器在线人数，目前只能查看国服的，无法查看外服的服务器状态。</p>
            </div>
        </div>
    </a>
<a href="https://testanki1.github.io/alphabet/" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://tankionline.com/en/wp-content/uploads/2025/02/alphabet_1920_1080_web.jpg" alt="">
            </div>
            <div class="info">
                <h3>字母表游戏</h3>
                <p>3D坦克字母表单词解谜与游戏再现。游戏再现：对于每个单词，您可以从一组 16 个可能的字母中选择一个字母。注意：所有单词都与游戏和坦克/战斗有关。</p>
            </div>
        </div>
    </a>
<a href="https://testanki1.github.io/translate" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://s21.ax1x.com/2024/12/15/pAqgnWn.png" alt="">
            </div>
            <div class="info">
                <h3>装备名称翻译器</h3>
                <p>将游戏内英文专有名称翻译为中文，包括炮塔、底盘、无人机、道具、防御模块、地图、等级名称等，目前不支持翻译句子。</p>
            </div>
        </div>
    </a>
<a href="https://testanki1.github.io/augments_icon/custom_splicer" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://s21.ax1x.com/2024/12/15/pAq29k4.jpg" alt="">
            </div>
            <div class="info">
                <h3>装备改造图标拼接器</h3>
                <p>自定义装备改造图标，可将装备与装备改造的图标部分自由组合，可保存为图片，也可保存为矢量图。</p>
            </div>
        </div>
    </a>
<a href="https://testanki1.github.io/music_and_sounds" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://tankionline.com/en/wp-content/uploads/2024/11/music.jpg" alt="">
            </div>
            <div class="info">
                <h3>游戏音乐与音效</h3>
                <p>这里包含了一些3D坦克的音乐与音效，包括官方主题音乐、游戏背景音乐、迷你游戏背景音乐，另外还有游戏中的一些音效，比如炮塔射击音效。</p>
            </div>
        </div>
    </a>
<a href="https://testanki1.github.io/skin_videos" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://s21.ax1x.com/2024/12/15/pAqg8wF.png" alt="">
            </div>
            <div class="info">
                <h3>皮肤、地图宣传视频</h3>
                <p>观看由官方制作的皮肤首发视频与地图特制视频，也可以原画质下载视频保存。</p>
            </div>
        </div>
    </a>
<a href="https://testanki1.github.io/page-resources/view" class="link" target="_blank">
        <div class="filler"></div>
        <div class="content-wrapper">
            <div class="image">
                <img src="https://s21.ax1x.com/2024/12/15/pAqgQyV.png" alt="">
            </div>
            <div class="info">
                <h3>网页资源浏览</h3>
                <p>这里可查看游戏内的网页资源，从网页源代码中提取，并将保持更新，例如：游戏内的各种图标。</p>
            </div>
        </div>
    </a>
</div>    </section>

    <!-- 篡改猴脚本按钮 -->
    <div style="text-align: center; padding: 20px 0;">
      <button id="tampermonkeyBtn" class="button">篡改猴脚本</button>
    </div>

    <section class="social-links">
        <h2>社交网络</h2>
        <div class="social-links-wrapper">
    <a href="https://space.bilibili.com/1670766752" class="social-link" target="_blank">
        <div class="inner">
            <div class="icon">
                <img src="https://testanki1.github.io/bilibili.svg" alt="">
            </div>
            <div class="info">
                <div class="name">哔哩哔哩</div>
                <p>前往</p>
            </div>
        </div>
    </a>
    <a href="https://pd.qq.com/g/r55527p1mb" class="social-link" target="_blank">
        <div class="inner">
            <div class="icon">
                <img src="https://testanki1.github.io/qq_pd.svg" alt="">
            </div>
            <div class="info">
                <div class="name">腾讯频道</div>
                <p>前往</p>
            </div>
        </div>
    </a>
</div>    </section>
    <div class="footer" style="text-align:center;">
        注：本站为玩家制作，与3D坦克官方无关。联系邮箱：testanki@qq.com。
    </div>
    <div class="button-row">
        <a href="/more" class="button">网站待添加功能</a>
    </div>
</div>

<!-- 弹窗的 HTML 结构, 直接借用官方CSS样式 -->
<div id="tampermonkeyModal" class="popup" style="display: none;">
  <div class="close-wrapper close-popup"></div>
  <div class="content">
      <div class="heading">
          <div class="title">篡改猴脚本</div>
          <div class="close-icon close-popup"></div>
      </div>
      <div class="inner-wrapper">
          <!-- 3. 为按钮链接应用 .button 类 -->
          <a href="https://testanki1.github.io/models/script.user.js" class="button" target="_blank" rel="noopener noreferrer">资源替换</a>
          <a href="https://testanki1.github.io/chinese_words_replacer/script.user.js" class="button" target="_blank" rel="noopener noreferrer">国服屏蔽词替换</a>
      </div>
  </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById("tampermonkeyModal");
    const btn = document.getElementById("tampermonkeyBtn");

    // 获取所有关闭按钮 (包括背景遮罩和右上角的 'x')
    const closeButtons = modal.querySelectorAll(".close-popup");

    // 点击按钮时打开弹窗
    btn.onclick = function() {
      modal.style.display = "flex"; // style.css 中 .popup.active 使用 flex
      setTimeout(() => { // 延迟添加 active 类以实现过渡效果
          modal.classList.add("active");
      }, 10);
    }

    // 点击关闭元素时关闭弹窗
    function closeModal() {
        modal.classList.remove("active");
        // 等待过渡动画结束后再隐藏元素
        setTimeout(() => {
            modal.style.display = "none";
        }, 300); // 300ms 是 style.css 中 .popup 的过渡时间
    }

    closeButtons.forEach(button => {
        button.onclick = closeModal;
    });

    // 按下 Escape 键关闭弹窗
    window.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && modal.classList.contains('active')) {
            closeModal();
        }
    });
});
</script>

</body>
</html>