1
0
mirror of https://github.com/nitezs/sub2sing-box.git synced 2024-12-23 21:44:41 -05:00

🎨 Improve UI

This commit is contained in:
Nite07 2024-05-19 03:16:05 +08:00
parent 9575fcf925
commit 9789354a51
2 changed files with 260 additions and 272 deletions

View File

@ -1,178 +1,160 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light"> <html lang="zh-CN" class="mdui-theme-auto">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sub2sing-box</title> <title>sub2sing-box</title>
<!-- 引入 Bootstrap CSS --> <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
<link <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
rel="stylesheet" <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
/>
<style> <style>
.rename-group { 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; margin-bottom: 10px;
} }
.mdui-container {
border-radius: 10px;
max-width: 1200px;
margin: 30px auto;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container my-5"> <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>
<mdui-dropdown trigger="hover">
<mdui-icon slot="trigger" name="dark_mode"></mdui-icon>
<mdui-menu id="theme" selects="single" value="dark">
<mdui-menu-item value="light">亮色</mdui-menu-item>
<mdui-menu-item value="dark">暗色</mdui-menu-item>
<mdui-divider></mdui-divider>
<mdui-menu-item value="auto">跟随系统</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
</div>
<!-- Template Section -->
<div class=" section">
<h3>模板</h3>
<mdui-text-field label="模板" type="text" id="template" name="template" />
</div>
<div id="form"> <div id="form">
<div class="card my-4"> <!-- Nodes Section -->
<div class="card-header">节点</div> <div class="section">
<div class="card-body"> <h3>节点</h3>
<!-- Subscription --> <div>
<div class="input-group mb-3"> <mdui-text-field label="订阅链接" autosize min-rows="3" max-rows="5" id="subscription" name="subscription"
<span class="input-group-text">订阅链接</span> placeholder="一行一个"></mdui-text-field>
<textarea
class="form-control"
id="subscription"
name="subscription"
placeholder="一行一个"
></textarea>
</div> </div>
<div>
<!-- Proxy --> <mdui-text-field label="节点分享链接" autosize min-rows="3" max-rows="5" id="proxy" name="proxy"
<div class="input-group mb-3"> placeholder="一行一个"></mdui-text-field>
<span class="input-group-text">节点分享链接</span>
<textarea
class="form-control"
id="proxy"
name="proxy"
placeholder="一行一个"
></textarea>
</div> </div>
<div>
<!-- Delete --> <mdui-text-field label="删除节点" type="text" id="delete" name="delete" placeholder="支持正则表达式" />
<div class="input-group mb-3">
<span class="input-group-text">删除节点:</span>
<input
type="text"
class="form-control"
id="delete"
name="delete"
placeholder="支持正则表达式"
/>
</div> </div>
<div>
<!-- Rename --> <mdui-list id="list">
<div class="input-group mb-2"> <mdui-list-item>
<span class="input-group-text">重命名节点</span> 重命名节点
<button <mdui-button slot="end-icon" type="button" onclick="addRenameField()">+
type="button" </mdui-button>
class="btn btn-primary btn-sm" </mdui-list-item>
onclick="addRenameField()" </mdui-list>
>
+
</button>
</div>
<div id="renameContainer"></div> <div id="renameContainer"></div>
</div> </div>
</div> </div>
<div class="card my-4"> <!-- Policy Group Section -->
<div class="card-header">模板</div> <div class="section">
<div class="card-body"> <h3>策略组</h3>
<!-- Template --> <div>
<div class="form-group"> <label><mdui-checkbox type="checkbox" id="group" name="group" />启用</label>
<input
type="text"
class="form-control"
id="template"
name="template"
/>
</div> </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>
</div> </div>
<div class="card my-4"> <!-- Result Section -->
<div class="card-header">国家策略组</div> <div class="section">
<div class="card-body"> <mdui-text-field label="生成链接" autosize min-rows="2" max-rows="5" id="output" name="output"></mdui-text-field>
<!-- 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> </div>
<div class="card">
<div class="card-header">生成链接</div>
<div class="card-body">
<!-- Output -->
<div class="form-group">
<textarea
class="form-control"
id="output"
name="output"
></textarea>
</div>
</div>
</div>
</div>
</div>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
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> <script>
init(); init();
function init() { function init() {
theme();
listenInput(); 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");
const html = document.querySelector("html");
icon.addEventListener("change", function (e) {
switch (icon.value) {
case "light":
html.className = "mdui-theme-light";
window.localStorage.setItem("theme", "light");
break;
case "dark":
html.className = "mdui-theme-dark";
window.localStorage.setItem("theme", "dark");
break;
case "auto":
html.className = "mdui-theme-auto";
window.localStorage.setItem("theme", "auto");
break;
}
});
}
function encodeBase64(str) { function encodeBase64(str) {
return btoa( return btoa(
encodeURIComponent(str).replace( encodeURIComponent(str).replace(
@ -197,11 +179,13 @@
} }
function listenInput() { function listenInput() {
const inputs = document.querySelectorAll("#form input, #form textarea"); const inputs = document.querySelectorAll(
"mdui-checkbox, mdui-text-field"
);
for (let input of inputs) { for (let input of inputs) {
input.addEventListener("input", generateLink); input.addEventListener("input", generateLink);
} }
const selects = document.querySelectorAll("#form select"); const selects = document.querySelectorAll("mdui-select");
for (let select of selects) { for (let select of selects) {
select.addEventListener("change", generateLink); select.addEventListener("change", generateLink);
} }
@ -220,12 +204,12 @@
function addRenameField() { function addRenameField() {
cleanLisnter(); cleanLisnter();
const container = document.getElementById("renameContainer"); const container = document.getElementById("list");
const fieldHTML = `<div class="rename-group input-group"> const fieldHTML = `<mdui-list-item class="rename-group">
<input type="text" class="form-control" name="rename_from[]" placeholder="原字符(支持正则表达式)"> <mdui-text-field slot="icon" type="text" name="rename_from[]" placeholder="支持正则表达式" label="原字符"></mdui-text-field>
<input type="text" class="form-control" name="rename_to[]" placeholder="替换字符"> <mdui-text-field type="text" name="rename_to[]" label="替换字符"></mdui-text-field>
<button type="button" class="btn btn-danger" onclick="removeThisField(this)">-</button> <mdui-button slot="end-icon" type="button" class="btn btn-danger" onclick="removeThisField(this)">-</mdui-button>
</div>`; </mdui-list-item>`;
container.insertAdjacentHTML("beforeend", fieldHTML); container.insertAdjacentHTML("beforeend", fieldHTML);
listenInput(); listenInput();
} }
@ -284,4 +268,5 @@
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -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": [