mirror of
https://github.com/nitezs/sub2sing-box.git
synced 2024-12-23 21:24:42 -05:00
🎨 Improve UI
This commit is contained in:
parent
9575fcf925
commit
9789354a51
@ -1,287 +1,272 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh-CN" data-bs-theme="light">
|
<html lang="zh-CN" class="mdui-theme-auto">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>sub2sing-box</title>
|
|
||||||
<!-- 引入 Bootstrap CSS -->
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
|
|
||||||
/>
|
|
||||||
<style>
|
|
||||||
.rename-group {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<head>
|
||||||
<div class="container my-5">
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>sub2sing-box</title>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
|
||||||
|
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
|
||||||
|
<style>
|
||||||
|
h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
background-color: rgb(var(--mdui-color-surface-container));
|
||||||
|
}
|
||||||
|
|
||||||
|
.section>* {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdui-container {
|
||||||
|
border-radius: 10px;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 30px auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="mdui-container">
|
||||||
|
<div style="
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
">
|
||||||
<h2>
|
<h2>
|
||||||
<a
|
<a href="https://github.com/nitezs/sub2sing-box" target="_blank">sub2sing-box</a>
|
||||||
href="https://github.com/nitezs/sub2sing-box"
|
|
||||||
target="_blank"
|
|
||||||
class="text-decoration-none"
|
|
||||||
>sub2sing-box</a
|
|
||||||
>
|
|
||||||
</h2>
|
</h2>
|
||||||
<div id="form">
|
<mdui-dropdown trigger="hover">
|
||||||
<div class="card my-4">
|
<mdui-icon slot="trigger" name="dark_mode"></mdui-icon>
|
||||||
<div class="card-header">节点</div>
|
<mdui-menu id="theme" selects="single" value="dark">
|
||||||
<div class="card-body">
|
<mdui-menu-item value="light">亮色</mdui-menu-item>
|
||||||
<!-- Subscription -->
|
<mdui-menu-item value="dark">暗色</mdui-menu-item>
|
||||||
<div class="input-group mb-3">
|
<mdui-divider></mdui-divider>
|
||||||
<span class="input-group-text">订阅链接</span>
|
<mdui-menu-item value="auto">跟随系统</mdui-menu-item>
|
||||||
<textarea
|
</mdui-menu>
|
||||||
class="form-control"
|
</mdui-dropdown>
|
||||||
id="subscription"
|
</div>
|
||||||
name="subscription"
|
<!-- Template Section -->
|
||||||
placeholder="一行一个"
|
<div class=" section">
|
||||||
></textarea>
|
<h3>模板</h3>
|
||||||
</div>
|
<mdui-text-field label="模板" type="text" id="template" name="template" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Proxy -->
|
<div id="form">
|
||||||
<div class="input-group mb-3">
|
<!-- Nodes Section -->
|
||||||
<span class="input-group-text">节点分享链接</span>
|
<div class="section">
|
||||||
<textarea
|
<h3>节点</h3>
|
||||||
class="form-control"
|
<div>
|
||||||
id="proxy"
|
<mdui-text-field label="订阅链接" autosize min-rows="3" max-rows="5" id="subscription" name="subscription"
|
||||||
name="proxy"
|
placeholder="一行一个"></mdui-text-field>
|
||||||
placeholder="一行一个"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Delete -->
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text">删除节点:</span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="delete"
|
|
||||||
name="delete"
|
|
||||||
placeholder="支持正则表达式"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Rename -->
|
|
||||||
<div class="input-group mb-2">
|
|
||||||
<span class="input-group-text">重命名节点</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary btn-sm"
|
|
||||||
onclick="addRenameField()"
|
|
||||||
>
|
|
||||||
+
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="renameContainer"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<div class="card my-4">
|
<mdui-text-field label="节点分享链接" autosize min-rows="3" max-rows="5" id="proxy" name="proxy"
|
||||||
<div class="card-header">模板</div>
|
placeholder="一行一个"></mdui-text-field>
|
||||||
<div class="card-body">
|
|
||||||
<!-- Template -->
|
|
||||||
<div class="form-group">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="template"
|
|
||||||
name="template"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<div class="card my-4">
|
<mdui-text-field label="删除节点" type="text" id="delete" name="delete" placeholder="支持正则表达式" />
|
||||||
<div class="card-header">国家策略组</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<!-- Group -->
|
|
||||||
<div class="form-check">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
class="form-check-input"
|
|
||||||
id="group"
|
|
||||||
name="group"
|
|
||||||
/>
|
|
||||||
<label for="group">启用</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- GroupType -->
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text">类型</span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="group-type"
|
|
||||||
name="group-type"
|
|
||||||
value="selector"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Sort -->
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text">排序依据</span>
|
|
||||||
<select class="form-select" name="sort" id="sort">
|
|
||||||
<option value="tag" selected>节点名</option>
|
|
||||||
<option value="num">节点数量</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- SortType -->
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-text">排序方式</span>
|
|
||||||
<select class="form-select" name="sort-type" id="sort-type">
|
|
||||||
<option value="asc" selected>升序</option>
|
|
||||||
<option value="desc">降序</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div>
|
||||||
<div class="card-header">生成链接</div>
|
<mdui-list id="list">
|
||||||
<div class="card-body">
|
<mdui-list-item>
|
||||||
<!-- Output -->
|
重命名节点
|
||||||
<div class="form-group">
|
<mdui-button slot="end-icon" type="button" onclick="addRenameField()">+
|
||||||
<textarea
|
</mdui-button>
|
||||||
class="form-control"
|
</mdui-list-item>
|
||||||
id="output"
|
</mdui-list>
|
||||||
name="output"
|
<div id="renameContainer"></div>
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Policy Group Section -->
|
||||||
|
<div class="section">
|
||||||
|
<h3>策略组</h3>
|
||||||
|
<div>
|
||||||
|
<label><mdui-checkbox type="checkbox" id="group" name="group" />启用</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<mdui-text-field label="类型" type="text" id="group-type" name="group-type" value="selector" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<mdui-select label="排序依据" name="sort" id="sort" value="tag">
|
||||||
|
<mdui-menu-item value="tag" selected>节点名</mdui-menu-item>
|
||||||
|
<mdui-menu-item value="num">节点数量</mdui-menu-item>
|
||||||
|
</mdui-select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<mdui-select label="排序方式" name="sort-type" id="sort-type" value="asc">
|
||||||
|
<mdui-menu-item value="asc" selected>升序</mdui-menu-item>
|
||||||
|
<mdui-menu-item value="desc">降序</mdui-menu-item>
|
||||||
|
</mdui-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Result Section -->
|
||||||
|
<div class="section">
|
||||||
|
<mdui-text-field label="生成链接" autosize min-rows="2" max-rows="5" id="output" name="output"></mdui-text-field>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<link
|
</div>
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
<script>
|
||||||
rel="stylesheet"
|
init();
|
||||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
|
||||||
crossorigin="anonymous"
|
|
||||||
/>
|
|
||||||
<script
|
|
||||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
||||||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
||||||
crossorigin="anonymous"
|
|
||||||
></script>
|
|
||||||
<script>
|
|
||||||
init();
|
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
listenInput();
|
theme();
|
||||||
|
listenInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
function theme() {
|
||||||
|
const theme = window.localStorage.getItem("theme");
|
||||||
|
if (theme) {
|
||||||
|
document.querySelector("html").className = "mdui-theme-" + theme;
|
||||||
|
document.getElementById("theme").value = theme;
|
||||||
|
} else {
|
||||||
|
document.querySelector("html").className = "mdui-theme-auto";
|
||||||
|
document.getElementById("theme").value = "auto";
|
||||||
|
window.localStorage.setItem("theme", "auto");
|
||||||
}
|
}
|
||||||
|
const icon = document.getElementById("theme");
|
||||||
function encodeBase64(str) {
|
const html = document.querySelector("html");
|
||||||
return btoa(
|
icon.addEventListener("change", function (e) {
|
||||||
encodeURIComponent(str).replace(
|
switch (icon.value) {
|
||||||
/%([0-9A-F]{2})/g,
|
case "light":
|
||||||
function (match, p1) {
|
html.className = "mdui-theme-light";
|
||||||
return String.fromCharCode("0x" + p1);
|
window.localStorage.setItem("theme", "light");
|
||||||
}
|
break;
|
||||||
)
|
case "dark":
|
||||||
)
|
html.className = "mdui-theme-dark";
|
||||||
.replace(/\+/g, "-")
|
window.localStorage.setItem("theme", "dark");
|
||||||
.replace(/\//g, "_");
|
break;
|
||||||
}
|
case "auto":
|
||||||
|
html.className = "mdui-theme-auto";
|
||||||
function decodeBase64(str) {
|
window.localStorage.setItem("theme", "auto");
|
||||||
return decodeURIComponent(
|
break;
|
||||||
Array.prototype.map
|
|
||||||
.call(atob(str), function (c) {
|
|
||||||
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
|
|
||||||
})
|
|
||||||
.join("")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function listenInput() {
|
|
||||||
const inputs = document.querySelectorAll("#form input, #form textarea");
|
|
||||||
for (let input of inputs) {
|
|
||||||
input.addEventListener("input", generateLink);
|
|
||||||
}
|
}
|
||||||
const selects = document.querySelectorAll("#form select");
|
|
||||||
for (let select of selects) {
|
|
||||||
select.addEventListener("change", generateLink);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function cleanLisnter() {
|
});
|
||||||
const inputs = document.querySelectorAll("#form input, #form textarea");
|
}
|
||||||
for (let input of inputs) {
|
|
||||||
input.removeEventListener("input", generateLink);
|
|
||||||
}
|
|
||||||
const selects = document.querySelectorAll("#form select");
|
|
||||||
for (let select of selects) {
|
|
||||||
select.removeEventListener("change", generateLink);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addRenameField() {
|
function encodeBase64(str) {
|
||||||
cleanLisnter();
|
return btoa(
|
||||||
const container = document.getElementById("renameContainer");
|
encodeURIComponent(str).replace(
|
||||||
const fieldHTML = `<div class="rename-group input-group">
|
/%([0-9A-F]{2})/g,
|
||||||
<input type="text" class="form-control" name="rename_from[]" placeholder="原字符（支持正则表达式）">
|
function (match, p1) {
|
||||||
<input type="text" class="form-control" name="rename_to[]" placeholder="替换字符">
|
return String.fromCharCode("0x" + p1);
|
||||||
<button type="button" class="btn btn-danger" onclick="removeThisField(this)">-</button>
|
|
||||||
</div>`;
|
|
||||||
container.insertAdjacentHTML("beforeend", fieldHTML);
|
|
||||||
listenInput();
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeThisField(button) {
|
|
||||||
cleanLisnter();
|
|
||||||
button.parentElement.remove();
|
|
||||||
generateLink();
|
|
||||||
listenInput();
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateLink() {
|
|
||||||
const subscription = document
|
|
||||||
.getElementById("subscription")
|
|
||||||
.value.split("\n")
|
|
||||||
.filter((i) => i);
|
|
||||||
const proxy = document
|
|
||||||
.getElementById("proxy")
|
|
||||||
.value.split("\n")
|
|
||||||
.filter((i) => i);
|
|
||||||
const deleteRule = document.getElementById("delete").value;
|
|
||||||
const template = document.getElementById("template").value;
|
|
||||||
const renameFrom = Array.from(
|
|
||||||
document.getElementsByName("rename_from[]")
|
|
||||||
).map((input) => input.value);
|
|
||||||
const renameTo = Array.from(
|
|
||||||
document.getElementsByName("rename_to[]")
|
|
||||||
).map((input) => input.value);
|
|
||||||
const output = document.getElementById("output");
|
|
||||||
const group = document.getElementById("group").checked;
|
|
||||||
const groupType = document.getElementById("group-type").value;
|
|
||||||
const sort = document.getElementById("sort").value;
|
|
||||||
const sortType = document.getElementById("sort-type").value;
|
|
||||||
|
|
||||||
let rename = {};
|
|
||||||
for (let i = 0; i < renameFrom.length; i++) {
|
|
||||||
if (renameFrom[i] && renameTo[i]) {
|
|
||||||
rename[renameFrom[i]] = renameTo[i];
|
|
||||||
}
|
}
|
||||||
}
|
)
|
||||||
const data = {
|
)
|
||||||
subscription,
|
.replace(/\+/g, "-")
|
||||||
proxy,
|
.replace(/\//g, "_");
|
||||||
delete: deleteRule,
|
}
|
||||||
template,
|
|
||||||
rename,
|
|
||||||
group,
|
|
||||||
"group-type": groupType,
|
|
||||||
sort,
|
|
||||||
"sort-type": sortType,
|
|
||||||
};
|
|
||||||
|
|
||||||
output.value = `${window.location.origin}/convert?data=${encodeBase64(
|
function decodeBase64(str) {
|
||||||
JSON.stringify(data)
|
return decodeURIComponent(
|
||||||
)}`;
|
Array.prototype.map
|
||||||
|
.call(atob(str), function (c) {
|
||||||
|
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
|
||||||
|
})
|
||||||
|
.join("")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function listenInput() {
|
||||||
|
const inputs = document.querySelectorAll(
|
||||||
|
"mdui-checkbox, mdui-text-field"
|
||||||
|
);
|
||||||
|
for (let input of inputs) {
|
||||||
|
input.addEventListener("input", generateLink);
|
||||||
}
|
}
|
||||||
</script>
|
const selects = document.querySelectorAll("mdui-select");
|
||||||
</body>
|
for (let select of selects) {
|
||||||
|
select.addEventListener("change", generateLink);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function cleanLisnter() {
|
||||||
|
const inputs = document.querySelectorAll("#form input, #form textarea");
|
||||||
|
for (let input of inputs) {
|
||||||
|
input.removeEventListener("input", generateLink);
|
||||||
|
}
|
||||||
|
const selects = document.querySelectorAll("#form select");
|
||||||
|
for (let select of selects) {
|
||||||
|
select.removeEventListener("change", generateLink);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addRenameField() {
|
||||||
|
cleanLisnter();
|
||||||
|
const container = document.getElementById("list");
|
||||||
|
const fieldHTML = `<mdui-list-item class="rename-group">
|
||||||
|
<mdui-text-field slot="icon" type="text" name="rename_from[]" placeholder="支持正则表达式" label="原字符"></mdui-text-field>
|
||||||
|
<mdui-text-field type="text" name="rename_to[]" label="替换字符"></mdui-text-field>
|
||||||
|
<mdui-button slot="end-icon" type="button" class="btn btn-danger" onclick="removeThisField(this)">-</mdui-button>
|
||||||
|
</mdui-list-item>`;
|
||||||
|
container.insertAdjacentHTML("beforeend", fieldHTML);
|
||||||
|
listenInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeThisField(button) {
|
||||||
|
cleanLisnter();
|
||||||
|
button.parentElement.remove();
|
||||||
|
generateLink();
|
||||||
|
listenInput();
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateLink() {
|
||||||
|
const subscription = document
|
||||||
|
.getElementById("subscription")
|
||||||
|
.value.split("\n")
|
||||||
|
.filter((i) => i);
|
||||||
|
const proxy = document
|
||||||
|
.getElementById("proxy")
|
||||||
|
.value.split("\n")
|
||||||
|
.filter((i) => i);
|
||||||
|
const deleteRule = document.getElementById("delete").value;
|
||||||
|
const template = document.getElementById("template").value;
|
||||||
|
const renameFrom = Array.from(
|
||||||
|
document.getElementsByName("rename_from[]")
|
||||||
|
).map((input) => input.value);
|
||||||
|
const renameTo = Array.from(
|
||||||
|
document.getElementsByName("rename_to[]")
|
||||||
|
).map((input) => input.value);
|
||||||
|
const output = document.getElementById("output");
|
||||||
|
const group = document.getElementById("group").checked;
|
||||||
|
const groupType = document.getElementById("group-type").value;
|
||||||
|
const sort = document.getElementById("sort").value;
|
||||||
|
const sortType = document.getElementById("sort-type").value;
|
||||||
|
|
||||||
|
let rename = {};
|
||||||
|
for (let i = 0; i < renameFrom.length; i++) {
|
||||||
|
if (renameFrom[i] && renameTo[i]) {
|
||||||
|
rename[renameFrom[i]] = renameTo[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const data = {
|
||||||
|
subscription,
|
||||||
|
proxy,
|
||||||
|
delete: deleteRule,
|
||||||
|
template,
|
||||||
|
rename,
|
||||||
|
group,
|
||||||
|
"group-type": groupType,
|
||||||
|
sort,
|
||||||
|
"sort-type": sortType,
|
||||||
|
};
|
||||||
|
|
||||||
|
output.value = `${window.location.origin}/convert?data=${encodeBase64(
|
||||||
|
JSON.stringify(data)
|
||||||
|
)}`;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -184,13 +184,16 @@
|
|||||||
},
|
},
|
||||||
"inbounds": [
|
"inbounds": [
|
||||||
{
|
{
|
||||||
"type": "tun",
|
"auto_route": true,
|
||||||
"inet4_address": "172.19.0.1/30",
|
"inet4_address": "172.19.0.1/30",
|
||||||
"inet6_address": "fdfe:dcba:9876::1/126",
|
"inet6_address": "fdfe:dcba:9876::1/126",
|
||||||
"auto_route": true,
|
|
||||||
"strict_route": true,
|
|
||||||
"sniff": true,
|
"sniff": true,
|
||||||
"sniff_override_destination": false
|
"sniff_override_destination": true,
|
||||||
|
"strict_route": true,
|
||||||
|
"type": "tun",
|
||||||
|
"stack": "mixed",
|
||||||
|
"inet4_route_exclude_address": ["100.64.0.0/10"],
|
||||||
|
"inet6_route_exclude_address": ["fd7a:115c:a1e0::/48"]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"outbounds": [
|
"outbounds": [
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user