-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
105 lines (94 loc) · 5.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Convert routing table to CIDR for Clash, SSTap, Netch proxy rules." />
<meta name="keywords" content="CIDR,Routing,RIB,Clash,SSTap,Netch" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="ittuann" />
<title>Route to CIDR Converter</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" />
<link rel="apple-touch-icon" sizes="180x180" href="iconx/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="iconx/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="iconx/favicon-16x16.png" />
<link rel="manifest" href="iconx/site.webmanifest" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-13TDFKC8ZD"></script>
<script>
function gtag() {
dataLayer.push(arguments);
}
(window.dataLayer = window.dataLayer || []), gtag("js", new Date()), gtag("config", "G-13TDFKC8ZD");
</script>
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen font-mono subpixel-antialiased">
<div id="container" class="relative bg-white p-8 rounded-lg shadow-lg w-full max-w-screen-2xl">
<div class="flex justify-center items-center mb-6">
<h1 class="text-2xl font-bold text-gray-700 text-center">Route to CIDR Converter</h1>
<a rel="dns-prefetch" href="https://github.com/ittuann/Route2CIDR" target="_blank" class="absolute top-2 right-2 w-10 h-10">
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Link" class="w-10 h-10" />
</a>
</div>
<div class="mt-8 bg-gray-50 p-6 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-700">工具介绍</h2>
<p class="text-gray-600 mt-2">
本在线工具用于将路由表转换为代理规则。工具会自动过滤本地网络、专用网络地址及环回地址，并剔除CIDR超网范围内的子网。可用于提取 UU
等游戏加速器的规则，详细教程请参考
<a href="https://github.com/FQrabbit/SSTap-Rule/blob/master/doc/UU-extract.md" class="text-blue-500 hover:text-blue-700" target="_blank"
>SSTap-Rule</a
>
</p>
<p class="text-gray-600 mt-2">
工具为开源项目，完整代码已上传到
<a href="https://github.com/ittuann/Route2CIDR" class="text-blue-500 hover:text-blue-700" target="_blank">GitHub-ittuann/Route2CIDR</a
>。所有转换操作均仅在本地浏览器内进行，网页不会对您的输入进行存储，无需担心数据安全。
</p>
</div>
<div class="input-info mt-8 mb-6">
<strong class="text-gray-700">粘贴路由表至此：</strong>
<p class="text-sm italic text-gray-500">Tip: 获取路由表的方式为，在 Windows 终端中执行命令 "route print -4"</p>
</div>
<textarea
id="input"
rows="10"
class="w-full p-3 border rounded-lg whitespace-pre-wrap focus:outline-none focus:ring-2 focus:ring-blue-500"
></textarea>
<div class="button-container mt-6 flex justify-center space-x-4">
<button id="buttonToClash" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">转换为 Clash 规则</button>
<button id="buttonToSSTap" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">转换为 SSTap 规则</button>
<button id="buttonToNetch" class="bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600">转换为 Netch 规则</button>
</div>
<div id="config-container" class="mt-6">
<strong class="block text-gray-700 mb-2">SSTap 规则头：</strong>
<p class="text-sm text-gray-500 mb-4">
Tip: SSTap 规则头格式详情可参考 GitHub:
<a
href="https://github.com/FQrabbit/SSTap-Rule/blob/master/doc/home.md#%E8%A7%84%E5%88%99%E6%96%87%E4%BB%B6%E8%AF%B4%E6%98%8E"
class="text-blue-500 hover:text-blue-700"
target="_blank"
>FQrabbit/SSTap-Rule</a
>
</p>
<input
type="text"
id="sstapHeader"
value="#gameEnglishName,游戏中文名,0,0,1,0,1,0,By-yourName"
class="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div class="flex justify-between items-center mt-8">
<h2 class="text-xl font-semibold text-gray-700">转换结果:</h2>
<div class="flex space-x-4">
<button id="copyButton" class="bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">复制</button>
<button id="downloadButton" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">下载</button>
</div>
</div>
<p class="text-sm italic text-gray-500 text-left mt-2">Note: 转换速度取决于输入路由表长度</p>
<div
id="notification"
class="fixed bottom-4 right-4 bg-gray-800 text-white py-2 px-4 rounded-lg shadow-lg opacity-0 transition-opacity duration-300"
></div>
<pre id="output" class="bg-gray-100 p-4 rounded-lg mt-4 border max-h-64 overflow-auto whitespace-pre-wrap"></pre>
</div>
<script type="module" src="dist/bundle.js" defer></script>
</body>
</html>