From 7befe6e7dabf7677c0a8e211c17c8556c463d8d7 Mon Sep 17 00:00:00 2001
From: PairZhu <1115306638@qq.com>
Date: Mon, 22 Jan 2024 20:34:46 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E4=BB=A3=E7=A0=81=20(#988)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 重构前端代码

几乎完全重构前端js代码
小幅度重构后端代码（主要为了适配前端）

* fix: 修复主题色无法自适应的bug

还原了主题色修改函数的write参数，去除该参数会导致自适应修改主题时也会写入localStorage

* feat: 自动修改标签的for属性

自动修改”获取 IP 方式“标签的for属性，保证其始终指向当前可编辑的元素

* refactor: 去除JQuery

* refactor: 按业务划分代码

* fix: 对空值兼容

* fix: 统一html命名

* feat: 默认选择最后一个配置

* fix: 删除冗余代码

* fix: Update writing.html
---
 config/config.go     |   14 +-
 main.go              |    2 -
 static/common.css    |    4 +-
 static/constant.js   |  265 ++++++++
 static/i18n.js       |   49 ++
 static/utils.js      |  115 ++--
 util/messages.go     |    1 +
 web/logs.go          |    7 +-
 web/netInterfaces.go |   32 -
 web/save.go          |   44 +-
 web/webhookTest.go   |   36 +-
 web/writing.go       |   48 +-
 web/writing.html     | 1421 ++++++++++++++++++------------------------
 13 files changed, 1088 insertions(+), 950 deletions(-)
 create mode 100644 static/constant.js
 create mode 100644 static/i18n.js
 delete mode 100755 web/netInterfaces.go

diff --git a/config/config.go b/config/config.go
index 7e365663c..ca65c304f 100755
--- a/config/config.go
+++ b/config/config.go
@@ -39,7 +39,7 @@ type DnsConfig struct {
 		URL          string
 		NetInterface string
 		Cmd          string
-		IPv6Reg      string // ipv6匹配正则表达式
+		Ipv6Reg      string // ipv6匹配正则表达式
 		Domains      []string
 	}
 	DNS DNS
@@ -291,10 +291,10 @@ func (conf *DnsConfig) getIpv6AddrFromInterface() string {
 
 	for _, netInterface := range ipv6 {
 		if netInterface.Name == conf.Ipv6.NetInterface && len(netInterface.Address) > 0 {
-			if conf.Ipv6.IPv6Reg != "" {
+			if conf.Ipv6.Ipv6Reg != "" {
 				// 匹配第几个IPv6
-				if match, err := regexp.MatchString("@\\d", conf.Ipv6.IPv6Reg); err == nil && match {
-					num, err := strconv.Atoi(conf.Ipv6.IPv6Reg[1:])
+				if match, err := regexp.MatchString("@\\d", conf.Ipv6.Ipv6Reg); err == nil && match {
+					num, err := strconv.Atoi(conf.Ipv6.Ipv6Reg[1:])
 					if err == nil {
 						if num > 0 {
 							if num <= len(netInterface.Address) {
@@ -303,14 +303,14 @@ func (conf *DnsConfig) getIpv6AddrFromInterface() string {
 							util.Log("未找到第 %d 个IPv6地址! 将使用第一个IPv6地址", num)
 							return netInterface.Address[0]
 						}
-						util.Log("IPv6匹配表达式 %s 不正确! 最小从1开始", conf.Ipv6.IPv6Reg)
+						util.Log("IPv6匹配表达式 %s 不正确! 最小从1开始", conf.Ipv6.Ipv6Reg)
 						return ""
 					}
 				}
 				// 正则表达式匹配
-				util.Log("IPv6将使用正则表达式 %s 进行匹配", conf.Ipv6.IPv6Reg)
+				util.Log("IPv6将使用正则表达式 %s 进行匹配", conf.Ipv6.Ipv6Reg)
 				for i := 0; i < len(netInterface.Address); i++ {
-					matched, err := regexp.MatchString(conf.Ipv6.IPv6Reg, netInterface.Address[i])
+					matched, err := regexp.MatchString(conf.Ipv6.Ipv6Reg, netInterface.Address[i])
 					if matched && err == nil {
 						util.Log("匹配成功! 匹配到地址: ", netInterface.Address[i])
 						return netInterface.Address[i]
diff --git a/main.go b/main.go
index e69277963..412021493 100644
--- a/main.go
+++ b/main.go
@@ -162,8 +162,6 @@ func runWebServer() error {
 	http.HandleFunc("/save", web.BasicAuth(web.Save))
 	http.HandleFunc("/logs", web.BasicAuth(web.Logs))
 	http.HandleFunc("/clearLog", web.BasicAuth(web.ClearLog))
-	http.HandleFunc("/ipv4NetInterface", web.BasicAuth(web.Ipv4NetInterfaces))
-	http.HandleFunc("/ipv6NetInterface", web.BasicAuth(web.Ipv6NetInterfaces))
 	http.HandleFunc("/webhookTest", web.BasicAuth(web.WebhookTest))
 
 	util.Log("监听 %s", *listen)
diff --git a/static/common.css b/static/common.css
index 99881135d..8d6e4fea0 100644
--- a/static/common.css
+++ b/static/common.css
@@ -146,11 +146,11 @@ main {
     margin-right: 25px;
 }
 
-[data-theme='dark'] .theme-button:hover {
+.theme-button:hover {
     box-shadow: 0px 0px 15px #0d0d0dab;
 }
 
-[data-theme='dark'] .theme-button:active {
+.theme-button:active {
     transform: scale(0.98);
 }
 
diff --git a/static/constant.js b/static/constant.js
new file mode 100644
index 000000000..2481f061d
--- /dev/null
+++ b/static/constant.js
@@ -0,0 +1,265 @@
+const DNS_PROVIDERS = {
+  alidns: {
+    name: {
+      "en": "Aliyun",
+      "zh-cn": "阿里云",
+    },
+    idLabel: "AccessKey ID",
+    secretLabel: "AccessKey Secret",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://ram.console.aliyun.com/manage/ak?spm=5176.12818093.nav-right.dak.488716d0mHaMgg'>Create AccessKey</a>",
+      "zh-cn": "<a target='_blank' href='https://ram.console.aliyun.com/manage/ak?spm=5176.12818093.nav-right.dak.488716d0mHaMgg'>创建 AccessKey</a>",
+    }
+  },
+  tencentcloud: {
+    name: {
+      "en": "Tencent",
+      "zh-cn": "腾讯云",
+    },
+    idLabel: "SecretId",
+    secretLabel: "SecretKey",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://console.dnspod.cn/account/token/apikey'>Create AccessKey</a>",
+      "zh-cn": "<a target='_blank' href='https://console.dnspod.cn/account/token/apikey'>创建腾讯云 API 密钥</a>",
+    }
+  },
+  dnspod: {
+    name: {
+      "en": "DnsPod",
+    },
+    idLabel: "ID",
+    secretLabel: "Token",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://console.dnspod.cn/account/token/token'>Create Token</a>",
+      "zh-cn": "<a target='_blank' href='https://console.dnspod.cn/account/token/token'>创建 DNSPod Token</a>",
+    }
+  },
+  cloudflare: {
+    name: {
+      "en": "Cloudflare",
+    },
+    idLabel: "",
+    secretLabel: "Token",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://dash.cloudflare.com/profile/api-tokens'>Create Token -> Edit Zone DNS (Use template)</a>",
+      "zh-cn": "<a target='_blank' href='https://dash.cloudflare.com/profile/api-tokens'>创建令牌 -> 编辑区域 DNS (使用模板)</a>",
+    }
+  },
+  huaweicloud: {
+    name: {
+      "en": "Huawei",
+      "zh-cn": "华为云",
+    },
+    idLabel: "Access Key Id",
+    secretLabel: "Secret Access Key",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://console.huaweicloud.com/iam/?locale=zh-cn#/mine/accessKey'>Create</a>",
+      "zh-cn": "<a target='_blank' href='https://console.huaweicloud.com/iam/?locale=zh-cn#/mine/accessKey'>新增访问密钥</a>",
+    }
+  },
+  callback: {
+    name: {
+      "en": "Callback",
+    },
+    idLabel: "URL",
+    secretLabel: "RequestBody",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://github.com/jeessy2/ddns-go/blob/master/README_EN.md#callback'>Callback</a> Support variables #{ip}, #{domain}, #{recordType}, #{ttl}",
+      "zh-cn": "<a target='_blank' href='https://github.com/jeessy2/ddns-go#callback'>自定义回调</a> 支持的变量 #{ip}, #{domain}, #{recordType}, #{ttl}",
+    }
+  },
+  baiducloud: {
+    name: {
+      "en": "Baidu",
+      "zh-cn": "百度云",
+    },
+    idLabel: "AccessKey ID",
+    secretLabel: "AccessKey Secret",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://console.bce.baidu.com/iam/?_=1651763238057#/iam/accesslist'>Create AccessKey</a><br /><a target='_blank' href='https://ticket.bce.baidu.com/#/ticket/create~productId=60&questionId=393&channel=2'>Apply for a ticket</a> DDNS needs to call the API, and the related APIs of Baidu Cloud are only open to users who have applied. Please submit a ticket before using it.",
+      "zh-cn": "<a target='_blank' href='https://console.bce.baidu.com/iam/?_=1651763238057#/iam/accesslist'>创建 AccessKey</a><br /><a target='_blank' href='https://ticket.bce.baidu.com/#/ticket/create~productId=60&questionId=393&channel=2'>申请工单</a> DDNS 需调用 API ，而百度云相关 API 仅对申请用户开放，使用前请先提交工单申请。",
+    }
+  },
+  porkbun: {
+    name: {
+      "en": "Porkbun",
+    },
+    idLabel: "API Key",
+    secretLabel: "Secret Key",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://porkbun.com/account/api'>Create Access</a>",
+      "zh-cn": "<a target='_blank' href='https://porkbun.com/account/api'>创建 Access</a>",
+    }
+  },
+  godaddy: {
+    name: {
+      "en": "GoDaddy",
+    },
+    idLabel: "Key",
+    secretLabel: "Secret",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://porkbun.com/account/api'>Create API KEY</a>",
+      "zh-cn": "<a target='_blank' href='https://developer.godaddy.com/keys'>创建 API KEY</a>",
+    }
+  },
+  googledomain: {
+    name: {
+      "en": "Google Domain",
+    },
+    idLabel: "Username",
+    secretLabel: "Password",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://support.google.com/domains/answer/6147083?hl=en'>How to get started</a>",
+      "zh-cn": "<a target='_blank' href='https://support.google.com/domains/answer/6147083?hl=zh-Hans'>新建动态域名解析记录</a>",
+    }
+  },
+  namecheap: {
+    name: {
+      "en": "Namecheap",
+    },
+    idLabel: "",
+    secretLabel: "Password",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://www.namecheap.com/support/knowledgebase/article.aspx/36/11/how-do-i-start-using-dynamic-dns/'>How to get started</a> <span style='color: red'>Namecheap DDNS does not support updating IPv6</span>",
+      "zh-cn": "<a target='_blank' href='https://www.namecheap.com/support/knowledgebase/article.aspx/36/11/how-do-i-start-using-dynamic-dns/'>开启namecheap动态域名解析</a> <span style='color: red'>Namecheap DDNS 不支持更新 IPv6</span>",
+    }
+  },
+  namesilo: {
+    name: {
+      "en": "NameSilo",
+    },
+    idLabel: "",
+    secretLabel: "Password",
+    helpHtml: {
+      "en": "<a target='_blank' href='https://www.namesilo.com/account/api-manager'>How to get started</a> <b>Please note that the TTL of namesilo is at least 1 hour</b>",
+      "zh-cn": "<a target='_blank' href='https://www.namesilo.com/account/api-manager'>开启namesilo动态域名解析</a> <b>请注意namesilo的TTL最低1小时</b>",
+    }
+  },
+};
+
+const SVG_CODE = {
+  success: `<svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="#52c41a" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg>`,
+  info: `<svg viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em" fill="#1677ff" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg>`,
+  warning: '<svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="#faad14" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg>',
+  error: '<svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="#ff4d4f" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg>'
+}
+
+
+const I18N_MAP = {
+  'en': {
+    'Logs': 'Logs',
+    'Save': 'Save',
+    'Config:': 'Config:',
+    'Add': 'Add',
+    'Delete': 'Delete',
+    'DNS Provider': 'DNS Provider',
+    'Create AccessKey': 'Create AccessKey',
+    'Auto': 'Auto',
+    '1s': '1s',
+    '5s': '5s',
+    '10s': '10s',
+    '1m': '1m',
+    '2m': '2m',
+    '10m': '10m',
+    '30m': '30m',
+    '1h': '1h',
+    'ttlHelp': 'You can modify it if the account supports a smaller TTL. The TTL will only be updated when the IP changes',
+    'Enabled': 'Enabled',
+    'Get IP method': 'Get IP method',
+    'By api': 'By api',
+    'By network card': 'By network card',
+    'By command': 'By command',
+    'domainsHelp': `
+      One domain per line, you can use colon to separate the root domain
+      (example.cn.eu.org) and the subdomain (www), fill in as: <b>www:example.cn.eu.org</b>
+    `,
+    'Regular exp.': 'Regular exp.',
+    'regHelp': 'You can use @1 to specify the first IPv6 address, @2 to specify the second IPv6 address... You can also use regular expressions to match the specified IPv6 address, leave it blank to disable it',
+    'Others': 'Others',
+    'Deny from WAN': 'Deny from WAN',
+    'NotAllowWanAccessHelp': 'Default enabled, can prohibit access to this page from the public network',
+    'Username': 'Username',
+    'accountHelp': 'Please enter to protect your information security',
+    'Password': 'Password',
+    'WebhookURLHelp': `
+      <a
+        target="blank"
+        href="https://github.com/jeessy2/ddns-go/blob/master/README_EN.md#webhook"
+      >Click to get more info</a
+      ><br />
+      Support variables #{ipv4Addr}, #{ipv4Result},
+      #{ipv4Domains}, #{ipv6Addr}, #{ipv6Result}, #{ipv6Domains}
+    `,
+    'WebhookRequestBodyHelp': 'If RequestBody is empty, it is a GET request, otherwise it is a POST request. Supported variables are the same as above',
+    'WebhookHeadersHelp': 'One header per line, such as: Authorization: Bearer API_KEY',
+    'Try it': 'Try it',
+    'Clear': 'Clear',
+    'OK': 'OK',
+    "Ipv4UrlHelp": "https://myip4.ipip.net, https://ddns.oray.com/checkip, https://ip.3322.net",
+    "Ipv6UrlHelp": "https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me, https://6.ipw.cn",
+    "Ipv4NetInterfaceHelp": "Get IPv4 address through network card",
+    "Ipv6NetInterfaceHelp": "If you do not specify a matching regular expression, the first IPv6 address will be used by default",
+    "Ipv4CmdHelp": "Get IPv4 through command, only use the first matching IPv4 address of standard output(stdout). Such as: ip -4 addr show eth1",
+    "Ipv6CmdHelp": "Get IPv6 through command, only use the first matching IPv6 address of standard output(stdout). Such as: ip -6 addr show eth1",
+    "NetInterfaceEmptyHelp": '<span style="color: red">No available network card found</span>',
+  },
+  'zh-cn': {
+    'Logs': '日志',
+    'Save': '保存',
+    'Config:': '配置切换:',
+    'Add': '添加',
+    'Delete': '删除',
+    'DNS Provider': 'DNS服务商',
+    'Create AccessKey': '创建 AccessKey',
+    'Auto': '自动',
+    '1s': '1秒',
+    '5s': '5秒',
+    '10s': '10秒',
+    '1m': '1分钟',
+    '2m': '2分钟',
+    '10m': '10分钟',
+    '30m': '30分钟',
+    '1h': '1小时',
+    'ttlHelp': '如账号支持更小的 TTL, 可修改。IP 有变化时才会更新TTL',
+    'Enabled': '是否启用',
+    'Get IP method': '获取 IP 方式',
+    'By api': '通过接口获取',
+    'By network card': '通过网卡获取',
+    'By command': '通过命令获取',
+    'domainsHelp': `
+      一行一个域名, 可使用冒号分隔根域名(example.cn.eu.org)与子域名(www), 填写为：<b>www:example.cn.eu.org</b>
+      <a target="blank" href="https://github.com/jeessy2/ddns-go/wiki/传递自定义参数">支持传递自定义参数</a>
+    `,
+    'Regular exp.': '匹配正则表达式',
+    'regHelp': '可使用 @1 指定第一个IPv6地址, @2 指定第二个IPv6地址... 也可使用正则表达式匹配指定的IPv6地址, 留空则不启用',
+    'Others': '其他',
+    'Deny from WAN': '禁止公网访问',
+    'NotAllowWanAccessHelp': '默认启用, 可禁止从公网访问本页面',
+    'Username': '用户名',
+    'accountHelp': '为保护你的信息安全，建议输入',
+    'Password': '密码',
+    'WebhookURLHelp': `
+      <a target="blank" href="https://github.com/jeessy2/ddns-go#webhook">点击参考官方 Webhook 说明</a>
+      <br />
+      支持的变量 #{ipv4Addr}, #{ipv4Result}, #{ipv4Domains}, #{ipv6Addr}, #{ipv6Result}, #{ipv6Domains}
+    `,
+    'WebhookRequestBodyHelp': '如果 RequestBody 为空, 则为 GET 请求, 否则为 POST 请求。支持的变量同上',
+    'WebhookHeadersHelp': '一行一个Header, 如: Authorization: Bearer API_KEY',
+    'Try it': '模拟测试Webhook',
+    'Clear': '清空',
+    'OK': '确定',
+    "Ipv4UrlHelp": "https://myip4.ipip.net, https://ddns.oray.com/checkip, https://ip.3322.net",
+    "Ipv6UrlHelp": "https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me, https://6.ipw.cn",
+    "Ipv4NetInterfaceHelp": "通过网卡获取IPv4",
+    "Ipv6NetInterfaceHelp": "如不指定匹配正则表达式，将默认使用第一个 IPv6 地址",
+    "Ipv4CmdHelp": `
+      通过命令获取IPv4, 仅使用标准输出(stdout)的第一个匹配的 IPv4 地址。如: ip -4 addr show eth1
+      <a target="blank" href="https://github.com/jeessy2/ddns-go/wiki/通过命令获取IP参考">点击参考更多</a>
+    `,
+    "Ipv6CmdHelp": `
+      通过命令获取IPv6, 仅使用标准输出(stdout)的第一个匹配的 IPv6 地址。如: ip -6 addr show eth1
+      <a target="blank" href="https://github.com/jeessy2/ddns-go/wiki/通过命令获取IP参考">点击参考更多</a>
+    `,
+    "NetInterfaceEmptyHelp": '<span style="color: red">没有找到可用的网卡</span>',
+  }
+};
diff --git a/static/i18n.js b/static/i18n.js
new file mode 100644
index 000000000..786546069
--- /dev/null
+++ b/static/i18n.js
@@ -0,0 +1,49 @@
+const LANG = localStorage.getItem('lang') || (navigator.language || navigator.browserLanguage).replaceAll('_', '-').toLowerCase();
+
+// 支持两种调用方式：
+// 1. 文本的key + (可选：语言映射字典)，{en: {hello: "hello", world: "world"}, zh: {hello: "你好", world: "世界"}}
+// 2. 语言字符串字典，{en: "hello", zh: "你好"}
+const i18n = (key, langMap = I18N_MAP) => {
+  if (typeof key !== 'string') {
+    langMap = key;
+    key = null;
+  }
+  // 优先取地区语言，否则取表示语言，再否则取表示语言相同的地区语言，最后取英文
+  let lang = 'en';
+  if (LANG in langMap) {
+    lang = LANG;
+  } else if (LANG.split('-')[0] in langMap) {
+    lang = LANG.split('-')[0];
+  } else {
+    for (const l in langMap) {
+      if (l.split('-')[0] === LANG.split('-')[0]) {
+        lang = l;
+        break;
+      }
+    }
+  }
+  let text = '';
+  if (key) {
+    text = langMap[lang][key];
+  } else {
+    text = langMap[lang];
+  }
+  if (text === undefined) {
+    console.warn(`i18n: No translation for ${key}`);
+    return key;
+  }
+  return text;
+}
+
+const convertDom = (dom = document, ...args) => {
+  dom.querySelectorAll('[data-i18n]').forEach(el => {
+    const key = el.dataset.i18n;
+    el.textContent = i18n(key, ...args);
+  });
+  dom.querySelectorAll('[data-i18n_html]').forEach(el => {
+    const key = el.dataset.i18n_html;
+    el.innerHTML = i18n(key, ...args);
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {convertDom();});
\ No newline at end of file
diff --git a/static/utils.js b/static/utils.js
index 3624193f3..ef9311056 100644
--- a/static/utils.js
+++ b/static/utils.js
@@ -1,71 +1,110 @@
-// 常量资源
-const SVG_CODE = {
-  success: `<svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="#52c41a" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg>`,
-  info: `<svg viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em" fill="#1677ff" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg>`,
-  warning: '<svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="#faad14" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg>',
-  error: '<svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="#ff4d4f" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg>'
-}
-
-
-
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 
+const html2Element = (htmlString) => {
+  const doc = new DOMParser().parseFromString(htmlString, 'text/html')
+  return doc.body.firstElementChild
+}
+
 // 在页面顶部显示一行消息，并在若干秒后自动消失
 const showMessage = async (msgObj) => {
+  // 填充默认值
+  msgObj = Object.assign({
+    type: 'info',
+    content: '',
+    html: false,
+    duration: 3000
+  }, msgObj)
   // 当前是否有消息容器
-  let $container = document.querySelector('#msg-container')
+  let $container = document.getElementById('msg-container')
   if (!$container) {
     // 创建消息容器
-    $container = document.createElement('div')
-    $container.id = 'msg-container'
+    $container = html2Element('<div id="msg-container"></div>')
     document.body.appendChild($container)
   }
   // 创建消息元素
-  const $msg = document.createElement('div')
+  const $msg = html2Element('<div class="msg msg-fade"></div>')
   // 创建两个span，用于显示消息的图标和内容
-  const $icon = document.createElement('span')
-  const $content = document.createElement('span')
-  $icon.classList.add('msg-icon')
+  const $content = html2Element('<span></span>')
+
+  // 填充内容，根据html属性决定使用text还是html
+  if (msgObj.html) {
+    $content.innerHTML = msgObj.content
+  } else {
+    $content.textContent = msgObj.content
+  }
   // 根据消息类型设置图标
-  $icon.innerHTML = SVG_CODE[msgObj.type] || SVG_CODE.info
-  $content.innerText = msgObj.content || ''
-  $msg.appendChild($icon)
+  $msg.innerHTML = `<span class="msg-icon">${SVG_CODE[msgObj.type]}</span>`
   $msg.appendChild($content)
-  // 增加出现动画
-  $msg.classList.add('msg','msg-fade')
   $container.appendChild($msg)
-  // 0延迟是为了让剩余的代码存入异步队列，稍后执行。否则浏览器会把两步操作合并，导致动画不生效
+  // 确保动画生效
   await delay(0)
   $msg.classList.remove('msg-fade')
   // 等待动画结束
   await delay(200)
-  // 消失函数
-  const disappear = async () => {
-    // 清除计时器
-    clearTimeout(timer)
+  // 销毁函数
+  const destroy = async () => {
     // 增加消失动画
     $msg.classList.add('msg-fade')
     // 动画结束后移除元素
-    await delay(200);
-    $container.removeChild($msg)
+    await delay(200)
+    $msg.remove()
     // 如果容器中没有消息了，移除容器
-    if ($container.children.length === 0) {
-      document.body.removeChild($container)
+    if (!$container.children.length) {
+      $container.remove()
     }
   }
   // 如果duration为0，则不自动消失
   if (msgObj.duration === 0) {
-    return disappear
+    return destroy
   }
   // 自动消失计时器
-  let timer = setTimeout(disappear, msgObj.duration || 3000)
+  let timer = setTimeout(destroy, msgObj.duration)
   // 注册鼠标事件，鼠标移入时取消自动消失
-  $msg.onmouseenter = () => {
+  $msg.addEventListener('mouseenter', () => {
     clearTimeout(timer)
-  }
+  })
   // 鼠标移出时重新计时
-  $msg.onmouseleave = () => {
-    timer = setTimeout(disappear, msgObj.duration || 3000)
+  $msg.addEventListener('mouseleave', () => {
+    timer = setTimeout(destroy, msgObj.duration)
+  })
+  return destroy
+}
+
+const request = {
+  baseURL: './',
+  parse: async function(resp) {
+    const text = await resp.text()
+    try {
+      return JSON.parse(text)
+    } catch (e) {
+      return text
+    }
+  },
+  stringify: function(dict) {
+    const result = []
+    for (let key in dict) {
+      if (!dict.hasOwnProperty(key)) {
+        continue
+      }
+      // 所有空值将被删除
+      if (String(dict[key])) {
+        result.push(`${key}=${encodeURIComponent(dict[key])}`)
+      }
+    }
+    return result.join('&')
+  },
+  get: async function(path, data, parseFunc) {
+    const response = await fetch(`${this.baseURL}${path}?${this.stringify(data)}`)
+    return await (parseFunc||this.parse)(response)
+  },
+  post: async function(path, data, parseFunc) {
+    if (typeof data === 'object') {
+      data = JSON.stringify(data)
+    }
+    const response = await fetch(`${this.baseURL}${path}`, {
+      method: 'POST',
+      body: data
+    })
+    return await (parseFunc||this.parse)(response)
   }
-  return disappear
 }
\ No newline at end of file
diff --git a/util/messages.go b/util/messages.go
index 7b053e8ea..7187c52da 100644
--- a/util/messages.go
+++ b/util/messages.go
@@ -56,6 +56,7 @@ func init() {
 	message.SetString(language.English, "启用外网访问, 必须输入登录用户名/密码", "Enable external network access, you must enter the login username/password")
 	message.SetString(language.English, "修改 '通过命令获取' 必须设置帐号密码，请先设置帐号密码", "Modify 'Get by command' must set username/password, please set username/password first")
 	message.SetString(language.English, "密码不安全！尝试使用更长的密码", "insecure password, try using a longer password")
+	message.SetString(language.English, "数据解析失败, 请刷新页面重试", "Data parsing failed, please refresh the page and try again")
 
 	// config
 	message.SetString(language.English, "从网卡获得IPv4失败", "Get IPv4 from network card failed")
diff --git a/web/logs.go b/web/logs.go
index 352452e77..edad41fd8 100644
--- a/web/logs.go
+++ b/web/logs.go
@@ -34,12 +34,7 @@ func init() {
 // Logs web
 func Logs(writer http.ResponseWriter, request *http.Request) {
 	// mlogs.Logs数组转为json
-	logs, err := json.Marshal(mlogs.Logs)
-	if err != nil {
-		// 返回错误代码
-		http.Error(writer, err.Error(), http.StatusInternalServerError)
-		return
-	}
+	logs, _ := json.Marshal(mlogs.Logs)
 	writer.Write(logs)
 }
 
diff --git a/web/netInterfaces.go b/web/netInterfaces.go
deleted file mode 100755
index c16ea8c4e..000000000
--- a/web/netInterfaces.go
+++ /dev/null
@@ -1,32 +0,0 @@
-package web
-
-import (
-	"encoding/json"
-	"net/http"
-
-	"github.com/jeessy2/ddns-go/v6/config"
-)
-
-// Ipv4NetInterfaces 获得Ipv4网卡信息
-func Ipv4NetInterfaces(writer http.ResponseWriter, request *http.Request) {
-	ipv4, _, err := config.GetNetInterface()
-	if len(ipv4) > 0 && err == nil {
-		byt, err := json.Marshal(ipv4)
-		if err == nil {
-			writer.Write(byt)
-			return
-		}
-	}
-}
-
-// Ipv6NetInterfaces 获得Ipv6网卡信息
-func Ipv6NetInterfaces(writer http.ResponseWriter, request *http.Request) {
-	_, ipv6, err := config.GetNetInterface()
-	if len(ipv6) > 0 && err == nil {
-		byt, err := json.Marshal(ipv6)
-		if err == nil {
-			writer.Write(byt)
-			return
-		}
-	}
-}
diff --git a/web/save.go b/web/save.go
index 1c9597e33..bca8b971e 100755
--- a/web/save.go
+++ b/web/save.go
@@ -28,9 +28,26 @@ func Save(writer http.ResponseWriter, request *http.Request) {
 }
 
 func checkAndSave(request *http.Request) string {
-	conf, err := config.GetConfigCached()
-	usernameNew := strings.TrimSpace(request.FormValue("Username"))
-	passwordNew := request.FormValue("Password")
+	conf, _ := config.GetConfigCached()
+
+	// 从请求中读取 JSON 数据
+	var data struct {
+		Username           string       `json:"Username"`
+		Password           string       `json:"Password"`
+		NotAllowWanAccess  bool         `json:"NotAllowWanAccess"`
+		WebhookURL         string       `json:"WebhookURL"`
+		WebhookRequestBody string       `json:"WebhookRequestBody"`
+		WebhookHeaders     string       `json:"WebhookHeaders"`
+		DnsConf            []dnsConf4JS `json:"DnsConf"`
+	}
+
+	// 解析请求中的 JSON 数据
+	err := json.NewDecoder(request.Body).Decode(&data)
+	if err != nil {
+		return util.LogStr("数据解析失败, 请刷新页面重试")
+	}
+	usernameNew := strings.TrimSpace(data.Username)
+	passwordNew := data.Password
 
 	// 国际化
 	accept := request.Header.Get("Accept-Language")
@@ -52,15 +69,14 @@ func checkAndSave(request *http.Request) string {
 			(usernameNew != "" || passwordNew != "") {
 			return util.LogStr("若从未设置过帐号密码, 仅允许在ddns-go启动后 5 分钟内设置, 请重启ddns-go")
 		}
-
 	}
 
-	conf.NotAllowWanAccess = request.FormValue("NotAllowWanAccess") == "on"
+	conf.NotAllowWanAccess = data.NotAllowWanAccess
 	conf.Username = usernameNew
 	conf.Password = passwordNew
-	conf.WebhookURL = strings.TrimSpace(request.FormValue("WebhookURL"))
-	conf.WebhookRequestBody = strings.TrimSpace(request.FormValue("WebhookRequestBody"))
-	conf.WebhookHeaders = strings.TrimSpace(request.FormValue("WebhookHeaders"))
+	conf.WebhookURL = strings.TrimSpace(data.WebhookURL)
+	conf.WebhookRequestBody = strings.TrimSpace(data.WebhookRequestBody)
+	conf.WebhookHeaders = strings.TrimSpace(data.WebhookHeaders)
 
 	// 如启用公网访问，帐号密码不能为空
 	if !conf.NotAllowWanAccess && (conf.Username == "" || conf.Password == "") {
@@ -79,11 +95,7 @@ func checkAndSave(request *http.Request) string {
 		}
 	}
 
-	dnsConfFromJS := []dnsConf4JS{}
-	err = json.Unmarshal([]byte(request.FormValue("DnsConf")), &dnsConfFromJS)
-	if err != nil {
-		return "Please refresh the browser and try again"
-	}
+	dnsConfFromJS := data.DnsConf
 	dnsConfArray := []config.DnsConfig{}
 	empty := dnsConf4JS{}
 	for k, v := range dnsConfFromJS {
@@ -95,7 +107,7 @@ func checkAndSave(request *http.Request) string {
 		dnsConf.DNS.Name = v.DnsName
 		dnsConf.DNS.ID = strings.TrimSpace(v.DnsID)
 		dnsConf.DNS.Secret = strings.TrimSpace(v.DnsSecret)
-		dnsConf.Ipv4.Enable = v.Ipv4Enable == "on"
+		dnsConf.Ipv4.Enable = v.Ipv4Enable
 		dnsConf.Ipv4.GetType = v.Ipv4GetType
 		dnsConf.Ipv4.URL = strings.TrimSpace(v.Ipv4Url)
 		dnsConf.Ipv4.NetInterface = v.Ipv4NetInterface
@@ -105,12 +117,12 @@ func checkAndSave(request *http.Request) string {
 		} else {
 			dnsConf.Ipv4.Domains = strings.Split(v.Ipv4Domains, "\n")
 		}
-		dnsConf.Ipv6.Enable = v.Ipv6Enable == "on"
+		dnsConf.Ipv6.Enable = v.Ipv6Enable
 		dnsConf.Ipv6.GetType = v.Ipv6GetType
 		dnsConf.Ipv6.URL = strings.TrimSpace(v.Ipv6Url)
 		dnsConf.Ipv6.NetInterface = v.Ipv6NetInterface
 		dnsConf.Ipv6.Cmd = strings.TrimSpace(v.Ipv6Cmd)
-		dnsConf.Ipv6.IPv6Reg = strings.TrimSpace(v.IPv6Reg)
+		dnsConf.Ipv6.Ipv6Reg = strings.TrimSpace(v.Ipv6Reg)
 		if strings.Contains(v.Ipv6Domains, "\r\n") {
 			dnsConf.Ipv6.Domains = strings.Split(v.Ipv6Domains, "\r\n")
 		} else {
diff --git a/web/webhookTest.go b/web/webhookTest.go
index 936dfb2c2..6d87de8bc 100755
--- a/web/webhookTest.go
+++ b/web/webhookTest.go
@@ -1,19 +1,33 @@
 package web
 
 import (
+	"encoding/json"
 	"net/http"
-	"strings"
-
-	"github.com/jeessy2/ddns-go/v6/util"
 
 	"github.com/jeessy2/ddns-go/v6/config"
+	"github.com/jeessy2/ddns-go/v6/util"
 )
 
-// WebhookTest 测试webhook
 func WebhookTest(writer http.ResponseWriter, request *http.Request) {
-	url := strings.TrimSpace(request.FormValue("URL"))
-	requestBody := strings.TrimSpace(request.FormValue("RequestBody"))
-	webhookHeaders := strings.TrimSpace(request.FormValue("WebhookHeaders"))
+	var data struct {
+		URL         string `json:"URL"`
+		RequestBody string `json:"RequestBody"`
+		Headers     string `json:"Headers"`
+	}
+	err := json.NewDecoder(request.Body).Decode(&data)
+	if err != nil {
+		util.Log("数据解析失败, 请刷新页面重试")
+		return
+	}
+
+	url := data.URL
+	requestBody := data.RequestBody
+	headers := data.Headers
+
+	if url == "" {
+		util.Log("请输入Webhook的URL")
+		return
+	}
 
 	var domains = make([]*config.Domain, 1)
 	domains[0] = &config.Domain{}
@@ -32,13 +46,9 @@ func WebhookTest(writer http.ResponseWriter, request *http.Request) {
 		Webhook: config.Webhook{
 			WebhookURL:         url,
 			WebhookRequestBody: requestBody,
-			WebhookHeaders:     webhookHeaders,
+			WebhookHeaders:     headers,
 		},
 	}
 
-	if url != "" {
-		config.ExecWebhook(fakeDomains, fakeConfig)
-	} else {
-		util.Log("请输入Webhook的URL")
-	}
+	config.ExecWebhook(fakeDomains, fakeConfig)
 }
diff --git a/web/writing.go b/web/writing.go
index 78c0afbef..14129c78b 100755
--- a/web/writing.go
+++ b/web/writing.go
@@ -17,32 +17,24 @@ var writingEmbedFile embed.FS
 
 const VersionEnv = "DDNS_GO_VERSION"
 
-type writingData struct {
-	DnsConf           template.JS
-	NotAllowWanAccess string
-	config.User
-	config.Webhook
-	Version string
-}
-
 // js中的dns配置
 type dnsConf4JS struct {
 	DnsName          string
 	DnsID            string
 	DnsSecret        string
 	TTL              string
-	Ipv4Enable       string
+	Ipv4Enable       bool
 	Ipv4GetType      string
 	Ipv4Url          string
 	Ipv4NetInterface string
 	Ipv4Cmd          string
 	Ipv4Domains      string
-	Ipv6Enable       string
+	Ipv6Enable       bool
 	Ipv6GetType      string
 	Ipv6Url          string
 	Ipv6NetInterface string
 	Ipv6Cmd          string
-	IPv6Reg          string
+	Ipv6Reg          string
 	Ipv6Domains      string
 }
 
@@ -56,19 +48,34 @@ func Writing(writer http.ResponseWriter, request *http.Request) {
 	}
 
 	conf, err := config.GetConfigCached()
-
 	// 默认禁止公网访问
 	if err != nil {
 		conf.NotAllowWanAccess = true
 	}
 
-	tmpl.Execute(writer, &writingData{
+	ipv4, ipv6, _ := config.GetNetInterface()
+
+	err = tmpl.Execute(writer, struct {
+		DnsConf           template.JS
+		NotAllowWanAccess bool
+		config.User
+		config.Webhook
+		Version string
+		Ipv4    []config.NetInterface
+		Ipv6    []config.NetInterface
+	}{
 		DnsConf:           template.JS(getDnsConfStr(conf.DnsConf)),
-		NotAllowWanAccess: BooltoOn(conf.NotAllowWanAccess),
+		NotAllowWanAccess: conf.NotAllowWanAccess,
 		User:              conf.User,
 		Webhook:           conf.Webhook,
 		Version:           os.Getenv(VersionEnv),
+		Ipv4:              ipv4,
+		Ipv6:              ipv6,
 	})
+	if err != nil {
+		fmt.Println("Error happened..")
+		fmt.Println(err)
+	}
 }
 
 func getDnsConfStr(dnsConf []config.DnsConfig) string {
@@ -81,18 +88,18 @@ func getDnsConfStr(dnsConf []config.DnsConfig) string {
 			DnsID:            idHide,
 			DnsSecret:        secretHide,
 			TTL:              conf.TTL,
-			Ipv4Enable:       BooltoOn(conf.Ipv4.Enable),
+			Ipv4Enable:       conf.Ipv4.Enable,
 			Ipv4GetType:      conf.Ipv4.GetType,
 			Ipv4Url:          conf.Ipv4.URL,
 			Ipv4NetInterface: conf.Ipv4.NetInterface,
 			Ipv4Cmd:          conf.Ipv4.Cmd,
 			Ipv4Domains:      strings.Join(conf.Ipv4.Domains, "\r\n"),
-			Ipv6Enable:       BooltoOn(conf.Ipv6.Enable),
+			Ipv6Enable:       conf.Ipv6.Enable,
 			Ipv6GetType:      conf.Ipv6.GetType,
 			Ipv6Url:          conf.Ipv6.URL,
 			Ipv6NetInterface: conf.Ipv6.NetInterface,
 			Ipv6Cmd:          conf.Ipv6.Cmd,
-			IPv6Reg:          conf.Ipv6.IPv6Reg,
+			Ipv6Reg:          conf.Ipv6.Ipv6Reg,
 			Ipv6Domains:      strings.Join(conf.Ipv6.Domains, "\r\n"),
 		})
 	}
@@ -117,10 +124,3 @@ func getHideIDSecret(conf *config.DnsConfig) (idHide string, secretHide string)
 	}
 	return
 }
-
-func BooltoOn(b bool) string {
-	if b {
-		return "on"
-	}
-	return ""
-}
diff --git a/web/writing.html b/web/writing.html
index c888511a9..fc939d2fe 100755
--- a/web/writing.html
+++ b/web/writing.html
@@ -14,7 +14,9 @@
     />
     <link rel="stylesheet" href="./static/bootstrap.min.css" />
     <link rel="stylesheet" href="./static/theme-button.css" />
+    <script src="./static/constant.js"></script>
     <script src="./static/utils.js"></script>
+    <script src="./static/i18n.js"></script>
   </head>
 
   <body>
@@ -29,15 +31,15 @@
             <strong>DDNS-GO</strong>
           </a>
           <button
+            data-i18n="Logs"
             class="btn btn-info btn-sm"
             id="logsBtn"
-            onclick="showHideLogs()"
           >
             Logs
           </button>
           <span
             class="theme-button gg-dark-mode"
-            onclick="toggleTheme(true)"
+            id="themeButton"
           ></span>
           <span class="badge badge-secondary">{{.Version}}</span>
         </div>
@@ -45,12 +47,15 @@
     </header>
 
     <main role="main">
-      <div id="mask" onclick="showHideLogs()" style="visibility: hidden"></div>
+      <div id="mask" style="visibility: hidden"></div>
       <div class="row">
         <div class="col-md-6 offset-md-3">
           <div class="row" style="margin-top: 15px; margin-bottom: 15px">
             <div class="col-md-4 col-sm-12">
-              <button class="btn btn-primary submit_btn">Save</button>
+              <button
+                data-i18n="Save"
+                class="btn btn-primary submit_btn"
+              >Save</button>
             </div>
 
             <div
@@ -58,15 +63,19 @@
               style="margin-left: auto; margin-right: 0"
             >
               <form class="form-inline" style="margin-top: 5px">
-                <label for="index" style="margin-left: auto">Config:</label>
+                <label
+                  data-i18n="Config:"
+                  for="index"
+                  style="margin-left: auto"
+                >Config:</label>
                 <select
                   class="form-control form-control-sm"
                   style="margin: 0 5px; width: 155px"
                   name="Index"
                   id="index"
-                  value=""
                 ></select>
                 <button
+                  data-i18n="Add"
                   class="btn btn-primary btn-sm"
                   style="margin: 0 5px"
                   id="addBtn"
@@ -74,6 +83,7 @@
                   Add
                 </button>
                 <button
+                  data-i18n="Delete"
                   class="btn btn-primary btn-sm"
                   style="margin: 0 0 0 5px"
                   id="delBtn"
@@ -86,19 +96,17 @@
 
           <form id="formDnsConf">
             <div class="portlet">
-              <h5 class="portlet__head" id="dnsProvider">DNS Provider</h5>
+              <h5 
+                data-i18n="DNS Provider"
+                class="portlet__head"
+                id="dnsProvider"
+              >DNS Provider</h5>
               <div class="portlet__body">
                 <div class="form-group row">
                   <label class="col-sm-2 col-form-label"></label>
                   <div class="col-sm-10">
                     <div id="DnsSelector"></div>
-
-                    <small id="dns_help" class="form-text text-muted">
-                      <a
-                        target="_blank"
-                        href="https://ram.console.aliyun.com/manage/ak?spm=5176.12818093.nav-right.dak.488716d0mHaMgg"
-                        >创建 AccessKey</a
-                      >
+                    <small id="dnsHelp" class="form-text text-muted">
                     </small>
                   </div>
                 </div>
@@ -115,7 +123,6 @@ <h5 class="portlet__head" id="dnsProvider">DNS Provider</h5>
                       class="form-control form"
                       name="DnsID"
                       id="DnsID"
-                      value=""
                     />
                   </div>
                 </div>
@@ -132,7 +139,6 @@ <h5 class="portlet__head" id="dnsProvider">DNS Provider</h5>
                       class="form-control form"
                       name="DnsSecret"
                       id="DnsSecret"
-                      value=""
                     />
                   </div>
                 </div>
@@ -143,23 +149,24 @@ <h5 class="portlet__head" id="dnsProvider">DNS Provider</h5>
                     <select
                       class="form-control form"
                       name="TTL"
-                      id="ttl"
+                      id="TTL"
                       value=""
                     >
-                      <option value="" selected>Auto</option>
-                      <option value="1">1s</option>
-                      <option value="5">5s</option>
-                      <option value="10">10s</option>
-                      <option value="60">1m</option>
-                      <option value="120">2m</option>
-                      <option value="600">10m</option>
-                      <option value="1800">30m</option>
-                      <option value="3600">1h</option>
+                      <option data-i18n="Auto" value="" selected>Auto</option>
+                      <option data-i18n="1s" value="1">1s</option>
+                      <option data-i18n="5s" value="5">5s</option>
+                      <option data-i18n="10s" value="10">10s</option>
+                      <option data-i18n="1m" value="60">1m</option>
+                      <option data-i18n="2m" value="120">2m</option>
+                      <option data-i18n="10m" value="600">10m</option>
+                      <option data-i18n="30m" value="1800">30m</option>
+                      <option data-i18n="1h" value="3600">1h</option>
                     </select>
-                    <small id="ttl_help" class="form-text text-muted">
-                      You can modify it if the account supports a smaller TTL.
-                      The TTL will only be updated when the IP changes
-                    </small>
+                    <small
+                      data-i18n_html="ttlHelp"
+                      id="ttlHelp"
+                      class="form-text text-muted"
+                    ></small>
                   </div>
                 </div>
               </div>
@@ -170,9 +177,9 @@ <h5 class="portlet__head">IPv4</h5>
               <div class="portlet__body">
                 <div class="form-group row">
                   <label
-                    for="ipv4_enable"
+                    data-i18n="Enabled"
+                    for="Ipv4Enable"
                     class="col-sm-2"
-                    id="enabled_label_v4"
                     >Enabled</label
                   >
                   <div class="col-sm-10">
@@ -180,7 +187,7 @@ <h5 class="portlet__head">IPv4</h5>
                       type="checkbox"
                       class="form-check-inline"
                       style="margin-top: 5px"
-                      id="ipv4_enable"
+                      id="Ipv4Enable"
                       name="Ipv4Enable"
                       checked
                     />
@@ -189,9 +196,9 @@ <h5 class="portlet__head">IPv4</h5>
 
                 <div class="form-group row">
                   <label
-                    for="ipv4_url"
+                    data-i18n="Get IP method"
+                    for="Ipv4Url"
                     class="col-sm-2 col-form-label"
-                    id="getIPMethod_label_v4"
                   >
                     Get IP method
                   </label>
@@ -204,12 +211,11 @@ <h5 class="portlet__head">IPv4</h5>
                         id="urlRadioIpv4"
                         value="url"
                         checked
-                        onclick="urlClick('ipv4')"
                       />
                       <label
+                        data-i18n="By api"
                         class="form-check-label"
                         for="urlRadioIpv4"
-                        id="urlRadio_label_v4"
                         >By api</label
                       >
                     </div>
@@ -220,12 +226,11 @@ <h5 class="portlet__head">IPv4</h5>
                         name="Ipv4GetType"
                         id="netInterfaceRadioIpv4"
                         value="netInterface"
-                        onclick="netInterfaceClick('ipv4')"
                       />
                       <label
+                        data-i18n="By network card"
                         class="form-check-label"
                         for="netInterfaceRadioIpv4"
-                        id="netInterfaceRadio_label_v4"
                         >By network card</label
                       >
                     </div>
@@ -236,12 +241,11 @@ <h5 class="portlet__head">IPv4</h5>
                         name="Ipv4GetType"
                         id="cmdRadioIpv4"
                         value="cmd"
-                        onclick="cmdClick('ipv4')"
                       />
                       <label
+                        data-i18n="By command"
                         class="form-check-label"
                         for="cmdRadioIpv4"
-                        id="cmdRadio_label_v4"
                         >By command</label
                       >
                     </div>
@@ -249,49 +253,72 @@ <h5 class="portlet__head">IPv4</h5>
                       type="url"
                       class="form-control form"
                       name="Ipv4Url"
-                      id="ipv4_url"
-                      aria-describedby="ipv4_url_help"
-                      value="https://myip4.ipip.net, https://ddns.oray.com/checkip, https://ip.3322.net, https://4.ipw.cn"
+                      id="Ipv4Url"
+                      aria-describedby="Ipv4UrlHelp"
+                      data-visible="url"
                     />
                     <select
                       class="form-control"
-                      id="ipv4_netInterface_select"
+                      id="Ipv4NetInterface"
                       name="Ipv4NetInterface"
-                      style="display: none"
-                    ></select>
+                      aria-describedby="Ipv4NetInterfaceHelp"
+                      data-visible="netInterface"
+                    >
+                      {{range .Ipv4}}
+                      <option value="{{.Name}}">
+                        {{.Name}}{{.Address}}
+                      </option>
+                      {{end}}
+                    </select>
                     <input
                       type="text"
                       class="form-control form"
-                      id="ipv4_cmd"
+                      id="Ipv4Cmd"
                       name="Ipv4Cmd"
-                      aria-describedby="ipv4_url_help"
-                      value=""
-                      style="display: none"
+                      aria-describedby="Ipv4CmdHelp"
+                      data-visible="cmd"
                     />
                     <small
-                      id="ipv4_url_help"
+                      data-i18n_html="Ipv4UrlHelp"
+                      id="Ipv4UrlHelp"
                       class="form-text text-muted"
+                      data-visible="url"
+                    ></small>
+                    <small
+                      {{if len .Ipv4}}
+                      data-i18n_html="Ipv4NetInterfaceHelp"
+                      {{else}}
+                      data-i18n_html="NetInterfaceEmptyHelp"
+                      {{end}}
+                      id="Ipv4NetInterfaceHelp"
+                      class="form-text text-muted"
+                      data-visible="netInterface"
+                    ></small>
+                    <small
+                      data-i18n_html="Ipv4CmdHelp"
+                      id="Ipv4CmdHelp"
+                      class="form-text text-muted"
+                      data-visible="cmd"
                     ></small>
                   </div>
                 </div>
 
                 <div class="form-group row">
-                  <label for="ipv4_domains" class="col-sm-2 col-form-label"
+                  <label for="Ipv4Domains" class="col-sm-2 col-form-label"
                     >Domains</label
                   >
                   <div class="col-sm-10">
                     <textarea
                       class="form-control form"
-                      id="ipv4_domains"
+                      id="Ipv4Domains"
                       name="Ipv4Domains"
                       rows="3"
-                      aria-describedby="ipv4_domains_help"
+                      aria-describedby="ipv4DomainsHelp"
                     ></textarea>
-                    <small id="ipv4_domains_help" class="form-text text-muted">
-                      One domain per line, you can use colon to separate the
-                      root domain (example.cn.eu.org) and the subdomain (www),
-                      fill in as: <b>www:example.cn.eu.org</b>
-                    </small>
+                    <small
+                      data-i18n_html="domainsHelp"
+                      id="ipv4DomainsHelp" class="form-text text-muted"
+                    ></small>
                   </div>
                 </div>
               </div>
@@ -302,9 +329,9 @@ <h5 class="portlet__head">IPv6</h5>
               <div class="portlet__body">
                 <div class="form-group row">
                   <label
-                    for="ipv6_enable"
+                    data-i18n="Enabled"
+                    for="Ipv6Enable"
                     class="col-sm-2"
-                    id="enabled_label_v6"
                     >Enabled</label
                   >
                   <div class="col-sm-10">
@@ -312,7 +339,7 @@ <h5 class="portlet__head">IPv6</h5>
                       type="checkbox"
                       class="form-check-inline"
                       style="margin-top: 5px"
-                      id="ipv6_enable"
+                      id="Ipv6Enable"
                       name="Ipv6Enable"
                       checked
                     />
@@ -321,9 +348,9 @@ <h5 class="portlet__head">IPv6</h5>
 
                 <div class="form-group row">
                   <label
-                    for="ipv6_url"
+                    data-i18n="Get IP method"
+                    for="Ipv6Url"
                     class="col-sm-2 col-form-label"
-                    id="getIPMethod_label_v6"
                   >
                     Get IP method
                   </label>
@@ -336,12 +363,11 @@ <h5 class="portlet__head">IPv6</h5>
                         id="urlRadioIpv6"
                         value="url"
                         checked
-                        onclick="urlClick('ipv6')"
                       />
                       <label
+                        data-i18n="By api"
                         class="form-check-label"
                         for="urlRadioIpv6"
-                        id="urlRadio_label_v6"
                         >By api</label
                       >
                     </div>
@@ -352,12 +378,11 @@ <h5 class="portlet__head">IPv6</h5>
                         name="Ipv6GetType"
                         id="netInterfaceRadioIpv6"
                         value="netInterface"
-                        onclick="netInterfaceClick('ipv6')"
                       />
                       <label
+                        data-i18n="By network card"
                         class="form-check-label"
                         for="netInterfaceRadioIpv6"
-                        id="netInterfaceRadio_label_v6"
                         >By network card</label
                       >
                     </div>
@@ -368,90 +393,112 @@ <h5 class="portlet__head">IPv6</h5>
                         name="Ipv6GetType"
                         id="cmdRadioIpv6"
                         value="cmd"
-                        onclick="cmdClick('ipv6')"
                       />
                       <label
+                        data-i18n="By command"
                         class="form-check-label"
                         for="cmdRadioIpv6"
-                        id="cmdRadio_label_v6"
                         >By command</label
                       >
                     </div>
                     <input
                       type="url"
                       class="form-control form"
-                      id="ipv6_url"
+                      id="Ipv6Url"
                       name="Ipv6Url"
-                      aria-describedby="ipv6_url_help"
-                      value="https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me, https://6.ipw.cn"
+                      aria-describedby="Ipv6UrlHelp"
+                      data-visible="url"
                     />
                     <select
                       class="form-control"
-                      id="ipv6_netInterface_select"
+                      id="Ipv6NetInterface"
                       name="Ipv6NetInterface"
-                      style="display: none"
-                    ></select>
+                      aria-describedby="Ipv6NetInterfaceHelp"
+                      data-visible="netInterface"
+                    >
+                      {{range .Ipv6}}
+                      <option value="{{.Name}}">
+                        {{.Name}}{{.Address}}
+                      </option>
+                      {{end}}
+                    </select>
                     <input
                       type="text"
                       class="form-control form"
-                      id="ipv6_cmd"
+                      id="Ipv6Cmd"
                       name="Ipv6Cmd"
-                      aria-describedby="ipv6_url_help"
-                      value=""
-                      style="display: none"
+                      aria-describedby="Ipv6CmdHelp"
+                      data-visible="cmd"
                     />
                     <small
-                      id="ipv6_url_help"
+                      data-i18n_html="Ipv6UrlHelp"
+                      id="Ipv6UrlHelp"
+                      class="form-text text-muted"
+                      data-visible="url"
+                    ></small>
+                    <small
+                      {{if len .Ipv6}}
+                      data-i18n_html="Ipv6NetInterfaceHelp"
+                      {{else}}
+                      data-i18n_html="NetInterfaceEmptyHelp"
+                      {{end}}
+                      id="Ipv6NetInterfaceHelp"
+                      class="form-text text-muted"
+                      data-visible="netInterface"
+                    ></small>
+                    <small
+                      data-i18n_html="Ipv6CmdHelp"
+                      id="Ipv6CmdHelp"
                       class="form-text text-muted"
+                      data-visible="cmd"
                     ></small>
                   </div>
                 </div>
 
                 <div
                   class="form-group row"
-                  id="IPv6RegDiv"
+                  id="Ipv6RegDiv"
+                  data-visible="netInterface"
                   style="display: none"
                 >
                   <label
-                    for="IPv6Reg"
+                    data-i18n="Regular exp."
+                    for="Ipv6Reg"
                     class="col-sm-2 col-form-label"
-                    id="IPv6RegDivLabel"
                     >Regular exp.</label
                   >
                   <div class="col-sm-10">
                     <input
                       class="form-control form"
-                      name="IPv6Reg"
-                      id="IPv6Reg"
-                      value=""
-                      aria-describedby="IPv6Reg_label"
+                      name="Ipv6Reg"
+                      id="Ipv6Reg"
+                      aria-describedby="Ipv6RegHelp"
                     />
-                    <small id="IPv6Reg_label" class="form-text text-muted"
-                      >You can use @1 to specify the first IPv6 address, @2 to
-                      specify the second IPv6 address... You can also use
-                      regular expressions to match the specified IPv6 address,
-                      leave it blank to disable it</small
-                    >
+                    <small 
+                      data-i18n_html="regHelp"
+                      id="Ipv6RegHelp"
+                      class="form-text text-muted"
+                    ></small>
                   </div>
                 </div>
 
                 <div class="form-group row">
-                  <label for="ipv6_domains" class="col-sm-2 col-form-label"
+                  <label for="Ipv6Domains" class="col-sm-2 col-form-label"
                     >Domains</label
                   >
                   <div class="col-sm-10">
                     <textarea
                       class="form-control form"
-                      id="ipv6_domains"
+                      id="Ipv6Domains"
                       name="Ipv6Domains"
                       rows="3"
-                      aria-describedby="ipv6_domains_help"
+                      aria-describedby="ipv6_domainsHelp"
                     ></textarea>
-                    <small id="ipv6_domains_help" class="form-text text-muted">
-                      One domain per line, you can use colon to separate the
-                      root domain (example.cn.eu.org) and the subdomain (www),
-                      fill in as: <b>www:example.cn.eu.org</b>
-                    </small>
+                    <small
+                      data-i18n_html="domainsHelp"
+                      id="ipv6_domainsHelp"
+                      class="form-text text-muted"
+                    ></small>
                   </div>
                 </div>
               </div>
@@ -460,13 +507,16 @@ <h5 class="portlet__head">IPv6</h5>
 
           <form id="formGlobal">
             <div class="portlet">
-              <h5 class="portlet__head">Others</h5>
+              <h5 
+                data-i18n="Others"
+                class="portlet__head"
+              >Others</h5>
               <div class="portlet__body">
                 <div class="form-group row">
                   <label
+                    data-i18n="Deny from WAN"
                     for="NotAllowWanAccess"
                     class="col-sm-2 col-form-label"
-                    id="NotAllowWanAccess_label"
                     >Deny from WAN</label
                   >
                   <div class="col-sm-10">
@@ -476,22 +526,22 @@ <h5 class="portlet__head">Others</h5>
                       style="margin-top: 5px"
                       id="NotAllowWanAccess"
                       name="NotAllowWanAccess"
-                      checked
+                      {{if .NotAllowWanAccess}}checked{{end}}
                     />
                     <small
-                      id="NotAllowWanAccess_help"
+                      data-i18n_html="NotAllowWanAccessHelp"
+                      id="NotAllowWanAccessHelp"
                       class="form-text text-muted"
-                      >Default enabled, can prohibit access to this page from
-                      the public network</small
+                      ></small
                     >
                   </div>
                 </div>
 
                 <div class="form-group row">
                   <label
+                    data-i18n="Username"
                     for="Username"
                     class="col-sm-2 col-form-label"
-                    id="UsernameLabel"
                     >Username</label
                   >
                   <div class="col-sm-10">
@@ -499,20 +549,23 @@ <h5 class="portlet__head">Others</h5>
                       class="form-control form"
                       name="Username"
                       id="Username"
-                      value=""
-                      aria-describedby="Username_help"
+                      value="{{.Username}}"
+                      autocomplete="username"
+                      aria-describedby="UsernameHelp"
                     />
-                    <small id="Username_help" class="form-text text-muted"
-                      >Please enter to protect your information security</small
-                    >
+                    <small
+                      data-i18n_html="accountHelp"
+                      id="UsernameHelp" 
+                      class="form-text text-muted"
+                    ></small>
                   </div>
                 </div>
 
                 <div class="form-group row">
                   <label
+                    data-i18n="Password"
                     for="Password"
                     class="col-sm-2 col-form-label"
-                    id="PasswordLabel"
                     >Password</label
                   >
                   <div class="col-sm-10">
@@ -521,12 +574,15 @@ <h5 class="portlet__head">Others</h5>
                       type="password"
                       name="Password"
                       id="Password"
-                      value=""
-                      aria-describedby="password_help"
+                      value="{{.Password}}"
+                      autocomplete="new-password"
+                      aria-describedby="passwordHelp"
                     />
-                    <small id="password_help" class="form-text text-muted"
-                      >Please enter to protect your information security</small
-                    >
+                    <small
+                      data-i18n_html="accountHelp"
+                      id="passwordHelp"
+                      class="form-text text-muted"
+                    ></small>
                   </div>
                 </div>
               </div>
@@ -544,18 +600,14 @@ <h5 class="portlet__head">Webhook</h5>
                       class="form-control form"
                       name="WebhookURL"
                       id="WebhookURL"
-                      value=""
-                      aria-describedby="WebhookURL_help"
+                      value="{{.WebhookURL}}"
+                      aria-describedby="WebhookURLHelp"
                     />
-                    <small id="WebhookURL_help" class="form-text text-muted">
-                      <a
-                        target="blank"
-                        href="https://github.com/jeessy2/ddns-go/blob/master/README_EN.md#webhook"
-                        >Click to get more info</a
-                      ><br />
-                      Support variables #{ipv4Addr}, #{ipv4Result},
-                      #{ipv4Domains}, #{ipv6Addr}, #{ipv6Result}, #{ipv6Domains}
-                    </small>
+                    <small
+                      data-i18n_html="WebhookURLHelp"
+                      id="WebhookURLHelp"
+                      class="form-text text-muted"
+                    ></small>
                   </div>
                 </div>
 
@@ -571,16 +623,13 @@ <h5 class="portlet__head">Webhook</h5>
                       id="WebhookRequestBody"
                       name="WebhookRequestBody"
                       rows="3"
-                      aria-describedby="WebhookRequestBody_help"
-                    ></textarea>
+                      aria-describedby="WebhookRequestBodyHelp"
+                    >{{.WebhookRequestBody}}</textarea>
                     <small
-                      id="WebhookRequestBody_help"
+                      data-i18n_html="WebhookRequestBodyHelp"
+                      id="WebhookRequestBodyHelp"
                       class="form-text text-muted"
-                    >
-                      If RequestBody is empty, it is a GET request, otherwise it
-                      is a POST request. Supported variables are the same as
-                      above
-                    </small>
+                    ></small>
                   </div>
                 </div>
 
@@ -594,15 +643,13 @@ <h5 class="portlet__head">Webhook</h5>
                       id="WebhookHeaders"
                       name="WebhookHeaders"
                       rows="1"
-                      aria-describedby="WebhookHeaders_help"
-                    ></textarea>
+                      aria-describedby="WebhookHeadersHelp"
+                    >{{.WebhookHeaders}}</textarea>
                     <small
-                      id="WebhookHeaders_help"
+                      data-i18n_html="WebhookHeadersHelp"
+                      id="WebhookHeadersHelp"
                       class="form-text text-muted"
-                    >
-                      One header per line, such as: Authorization: Bearer
-                      API_KEY
-                    </small>
+                    ></small>
                   </div>
                 </div>
 
@@ -610,16 +657,12 @@ <h5 class="portlet__head">Webhook</h5>
                   <label class="col-sm-2 col-form-label"></label>
                   <div class="col-sm-10">
                     <button
+                      data-i18n="Try it"
                       class="webhook-button btn btn-primary btn-sm"
                       id="webhookTestBtn"
-                      aria-describedby="webhookTestBtn_help"
                     >
                       Try it
                     </button>
-                    <small
-                      id="webhookTestBtn_help"
-                      class="form-text text-muted"
-                    ></small>
                   </div>
                 </div>
               </div>
@@ -627,724 +670,482 @@ <h5 class="portlet__head">Webhook</h5>
           </form>
 
           <button
+            data-i18n="Save"
             class="btn btn-primary submit_btn"
             style="margin-bottom: 16px"
           >
             Save
           </button>
         </div>
-        <div class="logs-panel col-md-6 offset-md-3" style="visibility: hidden">
+        <div
+          class="logs-panel col-md-6 offset-md-3"
+          style="visibility: hidden"
+          id="logs-panel"
+        >
           <textarea class="logs form-control" id="logs" readonly></textarea>
-          <button type="button" class="btn btn-danger btn-sm" id="clearLogBtn">
+          <button
+            data-i18n="Clear"
+            type="button"
+            class="btn btn-danger btn-sm"
+            id="clearLogBtn"
+          >
             Clear
           </button>
           <button
+            data-i18n="OK"
             type="button"
             class="btn btn-primary btn-sm"
-            onclick="showHideLogs()"
             style="float: right"
+            id="closeLogBtn"
           >
             OK
           </button>
         </div>
       </div>
     </main>
-    <script>
-      // 是否为中文
-      const isZH = navigator.language?.toLowerCase().startsWith("zh");
-    </script>
-    <script>
-      const dnsProviders = [
-        {
-          name: isZH ? "阿里云" : "Aliyun",
-          id: "alidns",
-          idLabel: "AccessKey ID",
-          secretLabel: "AccessKey Secret",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://ram.console.aliyun.com/manage/ak?spm=5176.12818093.nav-right.dak.488716d0mHaMgg'>创建 AccessKey</a>"
-            : "<a target='_blank' href='https://ram.console.aliyun.com/manage/ak?spm=5176.12818093.nav-right.dak.488716d0mHaMgg'>Create AccessKey</a>",
-        },
-        {
-          name: isZH ? "腾讯云" : "Tencent",
-          id: "tencentcloud",
-          idLabel: "SecretId",
-          secretLabel: "SecretKey",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://console.dnspod.cn/account/token/apikey'>创建腾讯云 API 密钥</a>"
-            : "<a target='_blank' href='https://console.dnspod.cn/account/token/apikey'>Create AccessKey</a>",
-        },
-        {
-          name: "DnsPod",
-          id: "dnspod",
-          idLabel: "ID",
-          secretLabel: "Token",
-          helpHtml:
-            "<a target='_blank' href='https://console.dnspod.cn/account/token/token'>创建 DNSPod Token</a>",
-        },
-        {
-          name: "Cloudflare",
-          id: "cloudflare",
-          idLabel: "",
-          secretLabel: "Token",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://dash.cloudflare.com/profile/api-tokens'>创建令牌 -> 编辑区域 DNS (使用模板)</a>"
-            : "<a target='_blank' href='https://dash.cloudflare.com/profile/api-tokens'>Create Token -> Edit Zone DNS (Use template)</a>",
-        },
-        {
-          name: isZH ? "华为云" : "Huawei",
-          id: "huaweicloud",
-          idLabel: "Access Key Id",
-          secretLabel: "Secret Access Key",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://console.huaweicloud.com/iam/?locale=zh-cn#/mine/accessKey'>新增访问密钥</a>"
-            : "<a target='_blank' href='https://console.huaweicloud.com/iam/?locale=zh-cn#/mine/accessKey'>Create</a>",
-        },
-        {
-          name: "Callback",
-          id: "callback",
-          idLabel: "URL",
-          secretLabel: "RequestBody",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://github.com/jeessy2/ddns-go#callback'>自定义回调</a> 支持的变量 #{ip}, #{domain}, #{recordType}, #{ttl}"
-            : "<a target='_blank' href='https://github.com/jeessy2/ddns-go/blob/master/README_EN.md#callback'>Callback</a> Support variables #{ip}, #{domain}, #{recordType}, #{ttl}",
-        },
-        {
-          name: isZH ? "百度云" : "Baidu",
-          id: "baiducloud",
-          idLabel: "AccessKey ID",
-          secretLabel: "AccessKey Secret",
-          helpHtml:
-            "<a target='_blank' href='https://console.bce.baidu.com/iam/?_=1651763238057#/iam/accesslist'>创建 AccessKey</a><br /><a target='_blank' href='https://ticket.bce.baidu.com/#/ticket/create~productId=60&questionId=393&channel=2'>申请工单</a> DDNS 需调用 API ，而百度云相关 API 仅对申请用户开放，使用前请先提交工单申请。",
-        },
-        {
-          name: "Porkbun",
-          id: "porkbun",
-          idLabel: "API Key",
-          secretLabel: "Secret Key",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://porkbun.com/account/api'>创建 Access</a>"
-            : "<a target='_blank' href='https://porkbun.com/account/api'>Create Access</a>",
-        },
-        {
-          name: "GoDaddy",
-          id: "godaddy",
-          idLabel: "Key",
-          secretLabel: "Secret",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://developer.godaddy.com/keys'>创建 API KEY</a>"
-            : "<a target='_blank' href='https://porkbun.com/account/api'>Create API KEY</a>",
-        },
-        {
-          name: "Google Domain",
-          id: "googledomain",
-          idLabel: "Username",
-          secretLabel: "Password",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://support.google.com/domains/answer/6147083?hl=zh-Hans'>新建动态域名解析记录</a>"
-            : "<a target='_blank' href='https://support.google.com/domains/answer/6147083?hl=en'>How to get started</a>",
-        },
-        {
-          name: "Namecheap",
-          id: "namecheap",
-          idLabel: "",
-          secretLabel: "Password",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://www.namecheap.com/support/knowledgebase/article.aspx/36/11/how-do-i-start-using-dynamic-dns/'>开启namecheap动态域名解析</a> <span style='color: red'>Namecheap DDNS 不支持更新 IPv6</span>"
-            : "<a target='_blank' href='https://www.namecheap.com/support/knowledgebase/article.aspx/36/11/how-do-i-start-using-dynamic-dns/'>How to get started</a> <span style='color: red'>Namecheap DDNS does not support updating IPv6</span>",
-        },
-        {
-          name: "NameSilo",
-          id: "namesilo",
-          idLabel: "",
-          secretLabel: "Password",
-          helpHtml: isZH
-            ? "<a target='_blank' href='https://www.namesilo.com/account/api-manager'>开启namesilo动态域名解析</a> <b>请注意namesilo的TTL最低1小时</b>"
-            : "<a target='_blank' href='https://www.namesilo.com/account/api-manager'>How to get started</a> <b>Please note that the TTL of namesilo is at least 1 hour</b>",
-        },
-      ];
-      let DnsSelectorInnerHTML = "";
-      dnsProviders.forEach((item) => {
-        DnsSelectorInnerHTML += `
-      <div class="form-check form-check-inline col-form-label">
-        <input class="form-check-input" type="radio" name="DnsName" id="${item.id}" value="${item.id}">
-        <label class="form-check-label" for="${item.id}">
-          ${item.name}
-        </label>
-      </div>`;
-      });
-      document.getElementById("DnsSelector").innerHTML = DnsSelectorInnerHTML;
-      document.getElementById("alidns").checked = true;
-    </script>
 
-    <script>
-      let elemValue = {};
-      let elemCheck = {};
-      let elemRadio = {};
-      let index = -1;
-      let dnsConf = [];
-      const defaultConf = {
-        DnsName: "alidns",
-        DnsID: "",
-        DnsSecret: "",
-        TTL: "",
-        Ipv4Enable: "on",
-        Ipv4GetType: "url",
-        Ipv4Url: isZH
-          ? "https://myip4.ipip.net, https://ddns.oray.com/checkip, https://ip.3322.net, https://4.ipw.cn"
-          : "https://api.ipify.org, https://ddns.oray.com/checkip, https://ip.3322.net, https://4.ipw.cn",
-        Ipv4Cmd: "",
-        Ipv4Domains: "",
-        Ipv6Enable: "on",
-        Ipv6GetType: "netInterface",
-        Ipv6Url: isZH
-          ? "https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me, https://6.ipw.cn"
-          : "https://api64.ipify.org, https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me, https://6.ipw.cn",
-        Ipv6Cmd: "",
-        IPv6Reg: "",
-        Ipv6Domains: "",
-      };
+  </body>
 
-      window.addEventListener("load", () => {
-        elemValue = {
-          DnsID: document.getElementById("DnsID"),
-          DnsSecret: document.getElementById("DnsSecret"),
-          TTL: document.getElementById("ttl"),
-          Ipv4Url: document.getElementById("ipv4_url"),
-          Ipv4NetInterface: document.getElementById("ipv4_netInterface_select"),
-          Ipv4Cmd: document.getElementById("ipv4_cmd"),
-          Ipv4Domains: document.getElementById("ipv4_domains"),
-          Ipv6Url: document.getElementById("ipv6_url"),
-          Ipv6NetInterface: document.getElementById("ipv6_netInterface_select"),
-          Ipv6Cmd: document.getElementById("ipv6_cmd"),
-          IPv6Reg: document.getElementById("IPv6Reg"),
-          Ipv6Domains: document.getElementById("ipv6_domains"),
-        };
-        elemCheck = {
-          Ipv4Enable: document.getElementById("ipv4_enable"),
-          Ipv6Enable: document.getElementById("ipv6_enable"),
-        };
-        elemRadio = {
-          DnsName: {
-            alidns: document.getElementById("alidns"),
-            tencentcloud: document.getElementById("tencentcloud"),
-            dnspod: document.getElementById("dnspod"),
-            cloudflare: document.getElementById("cloudflare"),
-            huaweicloud: document.getElementById("huaweicloud"),
-            callback: document.getElementById("callback"),
-            baiducloud: document.getElementById("baiducloud"),
-            porkbun: document.getElementById("porkbun"),
-            godaddy: document.getElementById("godaddy"),
-            googledomain: document.getElementById("googledomain"),
-            namecheap: document.getElementById("namecheap"),
-            namesilo: document.getElementById("namesilo"),
-          },
-          Ipv4GetType: {
-            url: document.getElementById("urlRadioIpv4"),
-            netInterface: document.getElementById("netInterfaceRadioIpv4"),
-            cmd: document.getElementById("cmdRadioIpv4"),
-          },
-          Ipv6GetType: {
-            url: document.getElementById("urlRadioIpv6"),
-            netInterface: document.getElementById("netInterfaceRadioIpv6"),
-            cmd: document.getElementById("cmdRadioIpv6"),
-          },
-        };
+  <!-- 全局变量 -->
+  <script>
+    let configIndex = -1;
+    let dnsConf = [];
+    const globalConf = {
+      NotAllowWanAccess: document.getElementById("NotAllowWanAccess").checked,
+      Username: document.getElementById("Username").value,
+      Password: document.getElementById("Password").value,
+      WebhookURL: document.getElementById("WebhookURL").value,
+      WebhookRequestBody: document.getElementById("WebhookRequestBody").value,
+      WebhookHeaders: document.getElementById("WebhookHeaders").value,
+    };
+    const defaultDnsConf = {
+      DnsID: "",
+      DnsName: "alidns",
+      DnsSecret: "",
+      Ipv4Cmd: "",
+      Ipv4Domains: "",
+      Ipv4Enable: true,
+      Ipv4GetType: "url",
+      Ipv4NetInterface: "",
+      Ipv4Url: i18n({
+        "en": "https://api.ipify.org, https://ddns.oray.com/checkip, https://ip.3322.net, https://4.ipw.cn",
+        "zh-cn": "https://myip4.ipip.net, https://ddns.oray.com/checkip, https://ip.3322.net, https://4.ipw.cn",
+      }),
+      Ipv6Cmd: "",
+      Ipv6Domains: "",
+      Ipv6Enable: true,
+      Ipv6GetType: "netInterface",
+      Ipv6NetInterface: "",
+      Ipv6Reg: "",
+      Ipv6Url: i18n({
+        "en": "https://api64.ipify.org, https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me, https://6.ipw.cn",
+        "zh-cn": "https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me, https://6.ipw.cn",
+      }),
+      TTL: "",
+    };
+  </script>
+  
+  <!-- 表单相关 -->
+  <script>
+    // 生成DNS选择项
+    for (const key in DNS_PROVIDERS){
+      const value = DNS_PROVIDERS[key];
+      const $selector = document.getElementById("DnsSelector");
+      const $el = html2Element(`
+        <div class="form-check form-check-inline col-form-label">
+          <input
+            class="form-check-input"
+            type="radio"
+            name="DnsName"
+            id="${key}"
+            value="${key}"
+          />
+          <label class="form-check-label" for="${key}">${i18n(value.name)}</label>
+        </div>
+      `);
+      $selector.appendChild($el);
+    }
 
-        document.getElementById("NotAllowWanAccess").checked =
-          "{{.NotAllowWanAccess}}" == "on";
-        document.getElementById("Username").value = "{{.Username}}";
-        document.getElementById("Password").value = "{{.Password}}";
-        document.getElementById("WebhookURL").value = "{{.WebhookURL}}";
-        document.getElementById("WebhookRequestBody").value =
-          "{{.WebhookRequestBody}}";
-        document.getElementById("WebhookHeaders").value = "{{.WebhookHeaders}}";
+    // Dns名称被点击
+    document.querySelectorAll("input[name=DnsName]").forEach($input => {
+      $input.addEventListener('click', e => {
+        const dnsInfo = DNS_PROVIDERS[e.target.value];
+        const $dnsID = document.getElementById("DnsID");
+        // idLabel 为空时隐藏 DnsID
+        if (dnsInfo.idLabel) {
+          $dnsID.style.display = "block";
+        } else {
+          $dnsID.style.display = "none";
+        }
+        document.getElementById("dnsIdLabel").innerHTML = dnsInfo.idLabel;
+        document.getElementById("dnsSecretLabel").innerHTML = dnsInfo.secretLabel;
+        document.getElementById("dnsHelp").innerHTML = i18n(dnsInfo.helpHtml);
+        document.getElementById("index_" + configIndex).innerHTML = `${configIndex + 1} - ${e.target.value}`;
+        dnsConf[configIndex].DnsName = e.target.value;
       });
+    });
 
-      let beforeDnsID = "";
+    // formDnsConf中的表单项值改变时，更新dnsConf
+    document.querySelectorAll("#formDnsConf [name]").forEach($e => {
+      const name = $e.getAttribute("name");
+      // 判断对应input的类型
+      switch ($e.getAttribute("type")) {
+        case "checkbox":
+          $e.addEventListener('change', e => {
+            dnsConf[configIndex][name] = e.target.checked;
+          });
+          break;
+        // 如果是其它类型的input或者不是input（如textarea、select），都可以使用input事件监听
+        default:
+          $e.addEventListener('input', e => {
+            dnsConf[configIndex][name] = e.target.value;
+          });
+          break;
+      }
+    });
 
-      window.addEventListener("load", () => {
-        // add btn
-        document.getElementById("addBtn").addEventListener("click", (e) => {
-          e.preventDefault();
-          // 先保存之前的
-          saveConf(index);
-          index = dnsConf.length;
-          dnsConf[index] = defaultConf;
-          // 创建新的option
-          const opt = document.createElement("option");
-          opt.id = "index_" + index;
-          opt.value = index;
-          opt.text = index;
-          document.getElementById("index").appendChild(opt);
-          document.getElementById("index").value = index;
-          showConf(index);
-        });
+    // formGlobal中的表单项值改变时，更新globalConf
+    document.querySelectorAll("#formGlobal [name]").forEach($e => {
+      const name = $e.getAttribute("name");
+      // 判断对应input的类型
+      switch ($e.getAttribute("type")) {
+        case "checkbox":
+          $e.addEventListener('change', e => {
+            globalConf[name] = e.target.checked;
+          });
+          break;
+        // 如果是其它类型的input或者不是input（如textarea、select），都可以使用input事件监听
+        default:
+          $e.addEventListener('input', e => {
+            globalConf[name] = e.target.value;
+          });
+          break;
+      }
+    });
 
-        // del btn
-        document.getElementById("delBtn").addEventListener("click", (e) => {
-          e.preventDefault();
-          document.getElementById("index_" + index).disabled = true;
-          document.getElementById("index_" + index).text =
-            index + 1 + " - Deleted";
-          dnsConf[index] = null;
-          index = dnsConf.length - 1;
-          for (; dnsConf[index] == null && index >= 0; index--) {}
-          if (index >= 0) {
-            document.getElementById("index").value = index;
-            showConf(index);
-          } else {
-            document.getElementById("addBtn").click();
-          }
+    // 处理切换IP获取方式时的UI变化
+    document.querySelectorAll('[name=Ipv4GetType], [name=Ipv6GetType]').forEach($input => {
+      $input.addEventListener('click', e => {
+        const $target = e.target;
+        const $group = $target.closest('.form-group');
+        const $card = $target.closest('.portlet__body');
+        $card.querySelectorAll('[data-visible]').forEach($el => {
+          $el.style.display = "none";
         });
-
-        // 点击加载Dns名称
-        document.getElementsByName("DnsName").forEach((e) =>
-          e.addEventListener("click", (e) => {
-            const dnsInfo = dnsProviders.find((d) => d.id == e.target.value);
-            const dnsIDElem = document.getElementById("DnsID");
-
-            // idLabel 为空时隐藏 DnsID
-            dnsIDElem.hidden = !dnsInfo.idLabel;
-
-            if (dnsInfo.idLabel) {
-              dnsIDElem.value ||= beforeDnsID;
-            } else {
-              beforeDnsID = dnsIDElem.value;
-              dnsIDElem.value = "";
-            }
-            document.getElementById("dnsIdLabel").innerHTML = dnsInfo.idLabel;
-            document.getElementById("dnsSecretLabel").innerHTML =
-              dnsInfo.secretLabel;
-            document.getElementById("dns_help").innerHTML = dnsInfo.helpHtml;
-            document.getElementById("index_" + index).text =
-              index + 1 + " - " + e.target.value;
-          })
-        );
-
-        // 初始化DnsConf
-        reloadConf("{{.DnsConf}}");
+        $card.querySelectorAll(`[data-visible=${$target.value}]`).forEach($el => {
+          $el.style.display = "";
+        });
+        // 修改label的for属性
+        const $curInput = $group.querySelector(`[data-visible=${$target.value}]`);
+        $group.querySelector('[data-i18n="Get IP method"]').setAttribute('for', $curInput.id);
       });
+    });
+  </script>
 
-      function showConf(idx) {
-        const conf = dnsConf[idx] ?? {};
-        for (const k in elemValue) {
-          elemValue[k].value = conf[k] ?? "";
-        }
-        for (const k in elemCheck) {
-          elemCheck[k].checked = conf[k] === "on";
-        }
-        for (const k in elemRadio) {
-          elemRadio[k][conf[k]]?.click();
+  <!-- 配置项 -->
+  <script>
+    // 把dnsConf中的值填充到表单中
+    function showConf(idx) {
+      const conf = dnsConf[idx] ?? {};
+      for (const name in conf) {
+        const $e = document.querySelector(`[name=${name}]`);
+        // 判断对应input的类型
+        switch ($e.getAttribute("type")) {
+          case "checkbox":
+            $e.checked = conf[name];
+            break;
+          case "radio":
+            document.querySelector(`[name=${name}][value=${conf[name]}]`).click();
+            break;
+          default:
+            //特殊处理select类型，要保证option存在，否则取第一个option
+            if ($e.tagName === "SELECT" &&
+              $e.querySelector(`option[value="${conf[name]}]`) === null) {
+              $e.value = $e.querySelector("option")?.value;
+              conf[name] = $e.value||"";
+            }
+            // 如果是其它类型的input或者不是input（如textarea），都使用value赋值
+            $e.value = conf[name];
+            break;
         }
       }
+    }
 
-      function saveConf(idx) {
-        const formDnsConf = new FormData(
-          document.getElementById("formDnsConf")
-        );
-        if (idx >= 0) {
-          dnsConf[idx] = Object.fromEntries(formDnsConf.entries());
+    // 从json中重新加载配置
+    function reloadConf(jsonConf) {
+      try {
+        dnsConf = JSON.parse(jsonConf);
+        if (dnsConf.length === 0) {
+          console.warn("dnsConf is empty, add defaultDnsConf");
+          dnsConf.push({...defaultDnsConf});
         }
+      } catch (e) {
+        alert("error: " + e.toString());
+        return;
       }
-
-      function reloadConf(jsonConf) {
-        try {
-          dnsConf = JSON.parse(jsonConf);
-        } catch (e) {
-          alert("error: " + e.toString());
-          return;
-        }
-        const selectOld = document.getElementById("index");
-        const selectNew = document.createElement("select");
-        selectNew.className = selectOld.className;
-        selectNew.style.cssText = selectOld.style.cssText;
-        selectNew.Name = selectOld.Name;
-        selectNew.id = selectOld.id;
-        for (let i = 0; i < dnsConf.length; i++) {
-          const opt = document.createElement("option");
-          opt.id = "index_" + i;
-          opt.value = i;
-          opt.text = i + 1 + " - " + dnsConf[i].DnsName;
-          selectNew.appendChild(opt);
-        }
-        selectOld.parentNode.replaceChild(selectNew, selectOld);
-        document.getElementById("index").addEventListener("change", (e) => {
-          beforeDnsID = null; // 清空之前的，排除切换配置时使用到beforeDnsID
-          saveConf(index); // 保存当前值
-          index = parseInt(e.target.value);
-          showConf(index); // 加载新选择的值
-        });
-        index =
-          index < dnsConf.length && index >= 0 ? index : dnsConf.length - 1;
-        if (dnsConf.length > 0) {
-          document.getElementById("index").value = index;
-          showConf(index);
-        } else {
-          document.getElementById("addBtn").click();
-        }
+      const $select = document.getElementById("index");
+      $select.innerHTML = "";
+      for (let i = 0; i < dnsConf.length; i++) {
+        const $option = html2Element(`
+          <option id="index_${i}" value="${i}">
+            ${i + 1} - ${dnsConf[i].DnsName}
+          </option>
+        `);
+        $select.appendChild($option);
       }
-    </script>
+      // 负数表示倒数第几个
+      if (configIndex < 0) {
+        configIndex += dnsConf.length;
+      } else {
+        configIndex = Math.min(configIndex, dnsConf.length - 1);
+      }
+      $select.value = configIndex;
+      showConf(configIndex);
+    }
 
-    <script>
-      window.addEventListener("load", () => {
-        document.querySelectorAll(".submit_btn").forEach((button) =>
-          button.addEventListener("click", (e) => {
-            // save config
-            saveConf(index);
-            let data2Save = new FormData(document.getElementById("formGlobal"));
-            data2Save.append("DnsConf", JSON.stringify(dnsConf));
-            // fetch
-            fetch("./save", {
-              method: "POST",
-              body: data2Save,
-            })
-              .then((r) => r.text())
-              .then((resp) => {
-                const respJson = JSON.parse(resp);
-                if (respJson.result !== "ok") {
-                  showMessage({
-                    content: respJson.result,
-                    type: "error",
-                    duration: 5000,
-                  });
-                } else {
-                  showMessage({
-                    content: isZH ? "保存成功" : "Successfully saved",
-                    type: "success",
-                    duration: 1500,
-                  });
-                  reloadConf(respJson.dnsConf);
-                }
-              })
-              .catch((err) => {
-                alert(`${err.toString()}`);
-              });
-          })
-        );
-      });
-    </script>
+    // 新增配置按钮被点击
+    document.getElementById("addBtn").addEventListener('click', e => {
+      e.preventDefault();
+      configIndex = dnsConf.length;
+      dnsConf[configIndex] = {...defaultDnsConf};
+      // 创建新的option
+      const $index = document.getElementById("index");
+      const $option = html2Element(`
+        <option id="index_${configIndex}" value="${configIndex}">
+          ${configIndex + 1} - ${dnsConf[configIndex].DnsName}
+        </option>
+      `);
+      $index.appendChild($option);
+      $index.value = configIndex;
+      showConf(configIndex);
+    });
 
-    <script>
-      function getLogs(loop = false) {
-        fetch("./logs")
-          .then((res) => res.text())
-          .then((result) => {
-            const logsList = JSON.parse(result);
-            const logsDom = document.getElementById("logs");
-            // 判断滚动条是否在底部
-            const isBottom =
-              logsDom.scrollHeight - logsDom.scrollTop - logsDom.clientHeight <
-              10;
-            logsDom.value = logsList.join("");
-            // 如果滚动条原先在底部，滚动到底部
-            if (isBottom) {
-              logsDom.scrollTop = logsDom.scrollHeight;
-            }
-            const oldLogItem = localStorage.getItem("logItem") || "";
-            localStorage.setItem(
-              "logItem",
-              logsList[logsList.length - 1] || ""
-            );
-            // 计算日志更新部分
-            const newLogsList = logsList.slice(
-              // Add 1 to get the log index after the last old log.
-              // If oldLogItem appears more than once, using indexOf will get the index of the first time, which is not what we want. So we use lastIndexOf here.
-              logsList.lastIndexOf(oldLogItem) + 1
-            );
-            // 如果日志有更新且当前未读到，增加未读标记
-            if (
-              newLogsList.length &&
-              document.querySelector(".logs-panel").style.visibility ===
-                "hidden"
-            ) {
-              document.getElementById("logsBtn").classList.add("unread"); // 没有分号会导致和下面合并为同一个语句
-              // 如果新增日志行数小于等于3，则message显示新增日志，否则显示前2行并提示剩余行数
-              (async () => {
-                if (newLogsList.length <= 3) {
-                  for (const line of newLogsList) {
-                    showMessage({
-                      type: "info",
-                      content: line,
-                    });
-                    await delay(800);
-                  }
-                } else {
-                  for (const line of newLogsList.slice(0, 2)) {
-                    showMessage({
-                      type: "info",
-                      content: line,
-                    });
-                    await delay(800);
-                  }
-                  showMessage({
-                    type: "info",
-                    content: isZH
-                      ? `剩余${newLogsList.length - 2}条日志请自行查看`
-                      : `There are ${
-                          newLogsList.length - 2
-                        } logs left, please check by yourself`,
-                  });
-                }
-              })();
-            }
-          })
-          .finally(() => {
-            if (loop) {
-              setTimeout(getLogs, 5 * 1000, true);
-            }
-          });
+    // 删除配置按钮被点击
+    document.getElementById("delBtn").addEventListener('click', e => {
+      e.preventDefault();
+      const $index = document.getElementById("index");
+      $index.options[configIndex].disabled = true;
+      $index.options[configIndex].text = configIndex + 1 + " - Deleted";
+      dnsConf[configIndex] = null;
+      while (dnsConf[configIndex] === null && configIndex >= 0) {
+        configIndex--;
+      }
+      if (configIndex >= 0) {
+        $index.value = configIndex;
+        showConf(configIndex);
+      } else {
+        document.getElementById("addBtn").click();
       }
+    });
 
-      window.addEventListener("load", () => {
-        getLogs(true);
-        document
-          .getElementById("clearLogBtn")
-          .addEventListener("click", (e) => {
-            e.preventDefault();
-            fetch("./clearLog")
-              .then(() => {
-                getLogs();
-              })
-              .catch((err) => {
-                alert(err.toString());
-              });
+    // 保存配置按钮被点击
+    document.querySelectorAll(".submit_btn").forEach($el => {
+      $el.addEventListener('click', async e => {
+        e.preventDefault();
+        // 如果没有idLabel，删除DnsID
+        if (!DNS_PROVIDERS[dnsConf[configIndex].DnsName].idLabel) {
+          dnsConf[configIndex].DnsID = "";
+        }
+        try {
+          const resp = await request.post("./save", {
+            ...globalConf,
+            DnsConf: dnsConf
           });
+          if (resp.result !== "ok") {
+            showMessage({
+              content: resp.result,
+              type: "error",
+              duration: 5000,
+            });
+          } else {
+            showMessage({
+              content: i18n({
+                "en": "Successfully saved",
+                "zh-cn": "保存成功",
+              }),
+              type: "success",
+              duration: 1500,
+            });
+            reloadConf(resp.dnsConf);
+          }
+        } catch (err) {
+          alert(`${err.toString()}`);
+        }
       });
-    </script>
+    });
 
-    <script>
-      function displayElement(label, show_label) {
-        const suffixes = ["netInterface_select", "url", "cmd"];
-        for (const suffix of suffixes) {
-          document.getElementById(`${label}_${suffix}`).style.display =
-            suffix === show_label ? "block" : "none";
-        }
-      }
+    // 切换配置项
+    document.getElementById("index").addEventListener('change', e => {
+      configIndex = parseInt(e.target.value);
+      showConf(configIndex);
+    });
 
-      // 点击接口获取
-      function urlClick(label) {
-        displayElement(label, "url");
+    // 初始化dnsConf
+    reloadConf("{{.DnsConf}}");
+  </script>
 
-        if (label === "ipv4") {
-          document.getElementById("ipv4_url_help").innerText =
-            "https://myip4.ipip.net, https://ddns.oray.com/checkip, https://ip.3322.net";
-        } else {
-          document.getElementById("ipv6_url_help").innerText =
-            "https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me, https://6.ipw.cn";
-          document.getElementById("IPv6RegDiv").style.display = "none";
+  <!-- 日志相关函数和日志初始化 -->
+  <script>
+    // 获取日志
+    const getLogs = async (loop = false) => {
+      let logsList = [];
+      try {
+        const resp = await request.get("./logs");
+        // 如果不是数组，说明返回的是错误信息
+        if (!Array.isArray(resp)) {
+          throw new Error(resp);
         }
-      }
-
-      // 点击网卡获取
-      function netInterfaceClick(label) {
-        displayElement(label, "netInterface_select");
-        if (label === "ipv4") {
-          document.getElementById("ipv4_url_help").innerText = isZH
-            ? "通过网卡获取IPv4"
-            : "Get IPv4 address through network card";
-        } else {
-          document.getElementById("ipv6_url_help").innerText = isZH
-            ? "如不指定匹配正则表达式，将默认使用第一个 IPv6 地址"
-            : "If you do not specify a matching regular expression, the first IPv6 address will be used by default";
-          document.getElementById("IPv6RegDiv").removeAttribute("style");
+        logsList = resp;
+      } catch (err) {
+        showMessage({
+          content: err.toString(),
+          type: "error",
+          duration: 5000,
+        });
+        return;
+      } finally {
+        if (loop) {
+          setTimeout(getLogs, 5 * 1000, true);
         }
-
-        fetch(`./${label}NetInterface`)
-          .then((res) => res.text())
-          .then((result) => {
-            if (result) {
-              const interfaces = JSON.parse(result);
-
-              const df = new DocumentFragment();
-              for (const interface of interfaces) {
-                const option = document.createElement("option");
-                option.value = interface.Name;
-                option.innerText = `${interface.Name}(${interface.Address.join(
-                  ", "
-                )})`;
-                df.appendChild(option);
-              }
-              const selectElement = document.getElementById(
-                `${label}_netInterface_select`
-              );
-              while (selectElement.lastChild) {
-                selectElement.removeChild(selectElement.lastChild);
-              }
-              document
-                .getElementById(`${label}_netInterface_select`)
-                .appendChild(df);
-              // 选中已保存的IPv4网卡
-              if (label === "ipv4") {
-                document.getElementById(`${label}_netInterface_select`).value =
-                  dnsConf[index].Ipv4NetInterface
-                    ? dnsConf[index].Ipv4NetInterface
-                    : interfaces[0].Name;
-              }
-              // 选中已保存的IPv6网卡
-              if (label === "ipv6") {
-                document.getElementById(`${label}_netInterface_select`).value =
-                  dnsConf[index].Ipv6NetInterface
-                    ? dnsConf[index].Ipv6NetInterface
-                    : interfaces[0].Name;
-              }
-            } else {
-              document.getElementById(`${label}_url_help`).innerHTML = isZH
-                ? '<span style="color: red">没有找到可用的网卡</span>'
-                : '<span style="color: red">No available network card found</span>';
-            }
-          });
       }
-
-      // 通过命令获取
-      function cmdClick(label) {
-        displayElement(label, "cmd");
-        if (label === "ipv4") {
-          document.getElementById("ipv4_url_help").innerHTML = isZH
-            ? `<p>
-                通过命令获取IPv4, 仅使用标准输出(stdout)的第一个匹配的 IPv4 地址。如: ip -4 addr show eth1
-                <a target="blank" href="https://github.com/jeessy2/ddns-go/wiki/通过命令获取IP参考">点击参考更多</a>
-                </p>`
-            : `Get IPv4 through command, only use the first matching IPv4 address of standard output(stdout). Such as: ip -4 addr show eth1`;
-        } else {
-          document.getElementById("ipv6_url_help").innerHTML = isZH
-            ? `<p>
-                通过命令获取IPv6, 仅使用标准输出(stdout)的第一个匹配的 IPv6 地址。如: ip -6 addr show eth1
-                <a target="blank" href="https://github.com/jeessy2/ddns-go/wiki/通过命令获取IP参考">点击参考更多</a>
-                </p>`
-            : `Get IPv6 through command, only use the first matching IPv6 address of standard output(stdout). Such as: ip -6 addr show eth1`;
-          document.getElementById("IPv6RegDiv").style.display = "none";
-        }
+      const $logs = document.getElementById("logs");
+      // 判断滚动条是否在底部
+      const isBottom = $logs.scrollHeight - $logs.scrollTop - $logs.clientHeight < 10;
+      $logs.value = logsList.join("");
+      // 如果滚动条原先在底部，滚动到底部
+      if (isBottom) {
+        $logs.scrollTop = $logs.scrollHeight;
       }
-    </script>
-    <script>
-      window.addEventListener("load", () => {
-        const theme =
-          localStorage.getItem("theme") ??
-          (window.matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark"
-            : "light");
-
-        if (theme === "dark") {
-          toggleTheme();
+      const oldLogItem = localStorage.getItem("logItem") || "";
+      localStorage.setItem(
+        "logItem",
+        logsList[logsList.length - 1] || ""
+      );
+      // 计算日志更新部分
+      const newLogsList = logsList.slice(
+        // 如果oldLogItem出现多次，使用indexOf会得到第一次出现的位置导致一直判定为有新日志，所以这里使用lastIndexOf
+        logsList.lastIndexOf(oldLogItem) + 1
+      );
+      // 如果日志面板可见或者没有新增日志，则不显示
+      if (
+        !newLogsList.length ||
+        document.getElementById("logs-panel").style.visibility !== "hidden"
+      ) {
+        return;
+      }
+      document.getElementById("logsBtn").classList.add("unread");
+      // 如果新增日志行数小于等于3，则message显示新增日志，否则显示最后2行并提示剩余行数
+      if (newLogsList.length <= 3) {
+        for (const line of newLogsList) {
+          showMessage({
+            type: "info",
+            content: line,
+          });
+          await delay(800);
         }
-
-        document
-          .getElementById("webhookTestBtn")
-          .addEventListener("click", (e) => {
-            e.preventDefault();
-            const formData = new FormData();
-            formData.append("URL", document.getElementById("WebhookURL").value);
-            formData.append(
-              "RequestBody",
-              document.getElementById("WebhookRequestBody").value
-            );
-            formData.append(
-              "WebhookHeaders",
-              document.getElementById("WebhookHeaders").value
-            );
-            fetch("./webhookTest", {
-              method: "POST",
-              body: formData,
-            })
-              .then(() => {
-                const webhookTestBtnHelp = document.getElementById(
-                  "webhookTestBtn_help"
-                );
-                webhookTestBtnHelp.innerText = isZH
-                  ? "提交模拟测试成功! 数据为假数据, 只是为了测试Webhook正常与否"
-                  : "Submit simulation test successfully! The data is fake data, just to test whether the Webhook is normal or not";
-                setTimeout(() => {
-                  webhookTestBtnHelp.innerText = "";
-                }, 5000);
-              })
-              .catch((err) => {
-                alert(err.toString());
-              });
+      } else {
+        showMessage({
+          type: "info",
+          content: i18n({
+            "en": `Please check the previous ${newLogsList.length - 2} logs by yourself`,
+            "zh-cn": `前${newLogsList.length - 2}条日志请自行查看`,
+          })
+        });
+        for (const line of newLogsList.slice(-2)) {
+          showMessage({
+            type: "info",
+            content: line,
           });
-      });
-    </script>
-
-    <script>
-      function toggleTheme(write = false) {
-        const docEle = document.documentElement;
-        if (docEle.getAttribute("data-theme") === "dark") {
-          docEle.removeAttribute("data-theme");
-          write && localStorage.setItem("theme", "light");
-        } else {
-          docEle.setAttribute("data-theme", "dark");
-          write && localStorage.setItem("theme", "dark");
+          await delay(800);
         }
       }
+    }
+
+    // 清空日志
+    document.getElementById("clearLogBtn").addEventListener('click', async e => {
+      e.preventDefault();
+      try {
+        await request.get("./clearLog");
+        getLogs();
+      } catch (err) {
+        showMessage({
+          content: err.toString(),
+          type: "error",
+          duration: 5000,
+        });
+      }
+    });
 
-      function showHideLogs() {
+    // 显示/隐藏日志面板
+    document.querySelectorAll('#logsBtn, #closeLogBtn, #mask').forEach($el => {
+      $el.addEventListener('click', () => {
         // 取消未读标记
         document.getElementById("logsBtn").classList.remove("unread");
-        const logsPanel = document.querySelector(".logs-panel");
-        const maskEle = document.querySelector("#mask");
-        if (logsPanel.style.visibility === "hidden") {
-          logsPanel.style.visibility = "";
-          maskEle.style.visibility = "";
+        if (document.getElementById("logs-panel").style.visibility === "hidden") {
+          document.getElementById("logs-panel").style.visibility = "";
+          document.getElementById("mask").style.visibility = "";
         } else {
-          logsPanel.style.visibility = "hidden";
-          maskEle.style.visibility = "hidden";
+          document.getElementById("logs-panel").style.visibility = "hidden";
+          document.getElementById("mask").style.visibility = "hidden";
         }
+      });
+    });
+
+    // 页面加载完成后定时获取日志
+    document.addEventListener('DOMContentLoaded', () => getLogs(true));
+  </script>
+
+  <!-- 主题色相关的函数和初始化 -->
+  <script>
+    function toggleTheme(write = false) {
+      const docEle = document.documentElement;
+      if (docEle.getAttribute("data-theme") === "dark") {
+        docEle.removeAttribute("data-theme");
+        write && localStorage.setItem("theme", "light");
+      } else {
+        docEle.setAttribute("data-theme", "dark");
+        write && localStorage.setItem("theme", "dark");
       }
-    </script>
-    <script>
-      if (isZH) {
-        // 改写标签为中文
-        document.getElementById("dnsProvider").innerHTML = "DNS 服务商";
-        document.getElementById("ttl_help").innerHTML =
-          "如账号支持更小的 TTL, 可修改。IP 有变化时才会更新TTL";
+    }
 
-        document.getElementById("enabled_label_v4").innerText = "是否启用";
-        document.getElementById("enabled_label_v6").innerText = "是否启用";
-        document.getElementById("getIPMethod_label_v4").innerText =
-          "获取 IP 方式";
-        document.getElementById("getIPMethod_label_v6").innerText =
-          "获取 IP 方式";
-        document.getElementById("urlRadio_label_v4").innerText = "通过接口获取";
-        document.getElementById("urlRadio_label_v6").innerText = "通过接口获取";
-        document.getElementById("netInterfaceRadio_label_v4").innerText =
-          "通过网卡获取";
-        document.getElementById("netInterfaceRadio_label_v6").innerText =
-          "通过网卡获取";
-        document.getElementById("cmdRadio_label_v4").innerText = "通过命令获取";
-        document.getElementById("cmdRadio_label_v6").innerText = "通过命令获取";
-        document.getElementById("ipv4_domains_help").innerHTML = `
-          <p>
-          一行一个域名, 可使用冒号分隔根域名(example.cn.eu.org)与子域名(www), 填写为：<b>www:example.cn.eu.org</b>
-          <a target="blank" href="https://github.com/jeessy2/ddns-go/wiki/传递自定义参数">支持传递自定义参数</a>
-          </p>
-        `;
-        document.getElementById("ipv6_domains_help").innerHTML =
-          document.getElementById("ipv4_domains_help").innerHTML;
+    const theme = localStorage.getItem("theme") ??
+      (window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light");
+        
+    if (theme === "dark") {
+      toggleTheme();
+    }
 
-        document.getElementById("IPv6RegDivLabel").innerText = "匹配正则表达式";
-        document.getElementById("IPv6Reg_label").innerText =
-          "可使用 @1 指定第一个IPv6地址, @2 指定第二个IPv6地址... 也可使用正则表达式匹配指定的IPv6地址, 留空不启用";
-        document.getElementById("NotAllowWanAccess_label").innerText =
-          "禁止公网访问";
-        document.getElementById("NotAllowWanAccess_help").innerText =
-          "默认启用，可禁止从公网访问本页面";
-        document.getElementById("UsernameLabel").innerText = "用户名";
-        document.getElementById("PasswordLabel").innerText = "密码";
-        document.getElementById("Username_help").innerText =
-          "为保护你的信息安全，建议输入";
-        document.getElementById("password_help").innerText =
-          "为保护你的信息安全，建议输入";
+    // 主题切换
+    document.getElementById("themeButton").addEventListener('click', () => toggleTheme(true));
+  </script>
 
-        document.getElementById("WebhookURL_help").innerHTML = `
-          <a target="blank" href="https://github.com/jeessy2/ddns-go#webhook">点击参考官方 Webhook 说明</a>
-          <br />
-          支持的变量 #{ipv4Addr}, #{ipv4Result}, #{ipv4Domains}, #{ipv6Addr}, #{ipv6Result}, #{ipv6Domains}
-        `;
-        document.getElementById("WebhookRequestBody_help").innerText =
-          "如 RequestBody 为空则为 GET 请求，否则为 POST 请求。支持的变量同上";
-        document.getElementById("WebhookHeaders_help").innerText =
-          "一行一个Header, 如: Authorization: Bearer API_KEY";
-        document.getElementById("webhookTestBtn").innerText = "模拟测试Webhook";
+  <!-- 测试相关 -->
+  <script>
+    // 模拟测试webhook
+    document.getElementById("webhookTestBtn").addEventListener('click', async e => {
+      e.preventDefault();
+      try {
+        await request.post("./webhookTest", {
+          URL: globalConf.WebhookURL,
+          RequestBody: globalConf.WebhookRequestBody,
+          Headers: globalConf.WebhookHeaders,
+        });
+        showMessage({
+          content: i18n({
+            "en": "Submit simulation test successfully! The data is fake data, just to test whether the Webhook is normal or not",
+            "zh-cn": "提交模拟测试成功! 数据为假数据, 只是为了测试Webhook正常与否",
+          }),
+          type: "success",
+        });
+      } catch (err) {
+        showMessage({
+          content: err.toString(),
+          type: "error",
+          duration: 5000,
+        });
       }
-    </script>
-  </body>
+    });
+  </script>
 </html>