frozenleaves/ddns-go
1
0
Fork 0
mirror of https://github.com/jeessy2/ddns-go.git synced 2025-10-20 15:33:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode (#471)

Browse Source
This commit is contained in:
YueYue
2022-12-23 19:59:57 +08:00
committed by GitHub
parent 966d3187c2
commit 98326b3988
5 changed files with 694 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
static/common-dark.css Normal file
View File

@ -0,0 +1,123 @@
body {
background-color: #22272e !important;
color: #adbac7 !important;
}
.form-control {
background-color: #1c2128 !important;
border-color: #444c56 !important;
color: #adbac7 !important;
}
.button-container {
display: flex;
flex-direction: row;
}
.theme-button {
background-color: transparent;
border: none;
color: #adbac7;
cursor: pointer;
font-size: 15px;
margin-left: auto;
margin-right: 25px;
}
.row {
background-color: #22272e;
color: #adbac7;
}
.portlet {
display: -webkit-box;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
background-color: #32353b;
color: #adbac7;
margin-bottom: 20px;
border: 2px solid #444c56;
border-radius: 5px;
}
.portlet .portlet__head {
display: flex;
-webkit-box-align: stretch;
-webkit-box-pack: justify;
justify-content: space-between;
position: relative;
padding: 0 20px;
margin: 0;
border-bottom: 1px solid #444c56;
min-height: 60px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
align-items: center;
font-size: 1.2rem;
font-weight: 540;
background-color: #2d333b !important;
color: #adbac7;
}
.portlet .portlet__body {
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
border-radius: 4px;
background-color: #22272e !important;
}
.navbar {
/* background-color: #202225; */
background-image: linear-gradient(#2d333b, #22272e) !important;
color: #adbac7;
}
.badge {
/* background-color: #7289DA; */
background-color: transparent;
color: #adbac7;
}
.form {
background-color: #1c2128 !important;
color: #adbac7 !important;
border-radius: 5px !important;
border-color: #444c56 !important;
}
.form-group {
background-color: transparent !important;
}
.save-button {
display: block;
border: none;
color: #adbac7;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
text-align: center;
}
.theme-button:hover {
box-shadow: 0px 0px 15px #0d0d0d;
}
.theme-button:active {
transform: scale(0.98);
}
.logs {
color: #adbac7 !important;
}

68
static/common-light.css Normal file
View File

@ -0,0 +1,68 @@
body {
background-color: #f2f3f8 !important;
}
.portlet {
display: -webkit-box;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-shadow: 0px 0px 13px 3px rgba(82, 63, 105, 0.05);
background-color: #ffffff;
margin-bottom: 20px;
border-radius: 4px;
}
.portlet .portlet__head {
display: flex;
-webkit-box-align: stretch;
-webkit-box-pack: justify;
justify-content: space-between;
position: relative;
padding: 0 20px;
margin: 0;
border-bottom: 1px solid #ebedf2;
min-height: 60px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
align-items: center;
font-size: 1.2rem;
font-weight: 540;
color: #48465b;
}
.portlet .portlet__body {
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
border-radius: 4px;
}
.theme-button {
background-color: transparent;
border: none;
color: #adbac7;
cursor: pointer;
font-size: 15px;
margin-left: auto;
margin-right: 25px;
}
.theme-button:hover {
box-shadow: 0px 0px 15px #0d0d0d;
}
.theme-button:active {
transform: scale(0.98);
}
.logs {
color: #48465b !important;
}

301
static/common.css
View File

@ -1,46 +1,267 @@
body {
background-color: #f2f3f8;
@media (prefers-color-scheme: light) {
body {
background-color: #f2f3f8 !important;
}
.portlet {
display: -webkit-box;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-shadow: 0px 0px 13px 3px rgba(82, 63, 105, 0.05);
background-color: #ffffff;
margin-bottom: 20px;
border-radius: 4px;
}
.portlet .portlet__head {
display: flex;
-webkit-box-align: stretch;
-webkit-box-pack: justify;
justify-content: space-between;
position: relative;
padding: 0 20px;
margin: 0;
border-bottom: 1px solid #ebedf2;
min-height: 60px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
align-items: center;
font-size: 1.2rem;
font-weight: 540;
color: #48465b;
}
.portlet .portlet__body {
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
border-radius: 4px;
}
.theme-button {
background-color: transparent;
border: none;
color: #adbac7;
cursor: pointer;
font-size: 15px;
margin-left: auto;
margin-right: 25px;
}
.theme-button:hover {
box-shadow: 0px 0px 15px #0d0d0d;
}
.theme-button:active {
transform: scale(0.98);
}
.logs {
color: #48465b !important;
}
}
.portlet {
display: -webkit-box;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-shadow: 0px 0px 13px 3px rgba(82, 63, 105, 0.05);
background-color: #ffffff;
margin-bottom: 20px;
border-radius: 4px;
@media (prefers-color-scheme: dark) {
body {
background-color: #22272e !important;
color: #adbac7 !important;
}
.form-control {
background-color: #1c2128 !important;
border-color: #444c56 !important;
color: #adbac7 !important;
}
.button-container {
display: flex;
flex-direction: row;
}
.theme-button {
background-color: transparent;
border: none;
color: #adbac7;
cursor: pointer;
font-size: 15px;
margin-left: auto;
margin-right: 25px;
}
.row {
background-color: #22272e;
color: #adbac7;
}
.portlet {
display: -webkit-box;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
background-color: #32353b;
color: #adbac7;
margin-bottom: 20px;
border: 2px solid #444c56;
border-radius: 5px;
}
.portlet .portlet__head {
display: flex;
-webkit-box-align: stretch;
-webkit-box-pack: justify;
justify-content: space-between;
position: relative;
padding: 0 20px;
margin: 0;
border-bottom: 1px solid #444c56;
min-height: 60px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
align-items: center;
font-size: 1.2rem;
font-weight: 540;
background-color: #2d333b !important;
color: #adbac7;
}
.portlet .portlet__body {
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
border-radius: 4px;
background-color: #22272e !important;
}
.navbar {
/* background-color: #202225; */
background-image: linear-gradient(#2d333b, #22272e) !important;
color: #adbac7;
}
.badge {
/* background-color: #7289DA; */
background-color: transparent;
color: #adbac7;
}
.form {
background-color: #1c2128 !important;
color: #adbac7 !important;
border-radius: 5px !important;
border-color: #444c56 !important;
}
.form-group {
background-color: transparent !important;
}
.save-button {
display: block;
border: none;
color: #adbac7;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
text-align: center;
}
.theme-button:hover {
box-shadow: 0px 0px 15px #0d0d0d;
}
.theme-button:active {
transform: scale(0.98);
}
.logs {
color: #adbac7 !important;
}
}
.portlet .portlet__head {
display: flex;
-webkit-box-align: stretch;
-webkit-box-pack: justify;
justify-content: space-between;
position: relative;
padding: 0 20px;
margin: 0;
border-bottom: 1px solid #ebedf2;
min-height: 60px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
align-items: center;
font-size: 1.2rem;
font-weight: 540;
color: #48465b;
}
@media (prefers-color-scheme: no-preference) {
body {
background-color: #f2f3f8 !important;
}
.portlet .portlet__body {
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
border-radius: 4px;
.portlet {
display: -webkit-box;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
box-shadow: 0px 0px 13px 3px rgba(82, 63, 105, 0.05);
background-color: #ffffff;
margin-bottom: 20px;
border-radius: 4px;
}
.portlet .portlet__head {
display: flex;
-webkit-box-align: stretch;
-webkit-box-pack: justify;
justify-content: space-between;
position: relative;
padding: 0 20px;
margin: 0;
border-bottom: 1px solid #ebedf2;
min-height: 60px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
align-items: center;
font-size: 1.2rem;
font-weight: 540;
color: #48465b;
}
.portlet .portlet__body {
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
border-radius: 4px;
}
.theme-button {
background-color: transparent;
border: none;
color: #adbac7;
cursor: pointer;
font-size: 15px;
margin-left: auto;
margin-right: 25px;
}
.theme-button:hover {
box-shadow: 0px 0px 15px #0d0d0d;
}
.theme-button:active {
transform: scale(0.98);
}
.logs {
color: #48465b !important;
}
}

42
static/theme-button.css Normal file
View File

@ -0,0 +1,42 @@
/* From https://css.gg */
.gg-dark-mode {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs, 1));
border: 2px solid;
border-radius: 100px;
width: 20px;
height: 20px
}
.gg-dark-mode::after,
.gg-dark-mode::before {
content: "";
box-sizing: border-box;
position: absolute;
display: block
}
.gg-dark-mode::before {
border: 5px solid;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
border-right: 0;
width: 9px;
height: 18px;
top: -1px;
left: -1px
}
.gg-dark-mode::after {
border: 4px solid;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-left: 0;
width: 4px;
height: 8px;
right: 4px;
top: 4px
}

354
web/writing.html
View File

@ -1,34 +1,36 @@
<html lang="zh">
<head>
<link class="theme" rel="stylesheet" type="text/css" href="./static/common.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="jeessy2">
<title>DDNS-GO</title>
<link rel="stylesheet" href="./static/bootstrap.min.css">
<link rel="stylesheet" href="./static/theme-button.css">
<script src="./static/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="./static/common.css">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<div class="button-container container d-flex justify-content-between">
<a target="blank" href="https://github.com/jeessy2/ddns-go" class="navbar-brand d-flex align-items-center">
<strong>DDNS-GO</strong>
</a>
<button class="theme-button gg-dark-mode" onclick="toggleTheme()"></button>
<span class="badge badge-secondary">{{.Version}}</span>
</div>
</div>
</header>
<main role="main" style="margin-top: 15px; overflow: hidden;">
<main role="main" style=" overflow: hidden;">
<div class="row">
<div class="col-md-6 offset-md-3">
<form>
<button class="btn btn-primary submit_btn" style="margin-bottom: 15px;">Save</button>
<button class="btn btn-primary submit_btn" style="margin-top: 15px; margin-bottom: 15px;">Save</button>
<div class="alert alert-success" style="display: none;">
<strong id="resultMsg"></strong>
@ -42,55 +44,64 @@
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<div class="form-check form-check-inline col-form-label">
<input class="form-check-input" type="radio" name="DnsName" id="alidns" value="alidns" onclick="alidnsCheckedFun()" {{if eq $.DNS.Name "alidns"}}checked{{end}}>
<input class="form-check-input" type="radio" name="DnsName" id="alidns" value="alidns"
onclick="alidnsCheckedFun()" {{if eq $.DNS.Name "alidns" }}checked{{end}}>
<label class="form-check-label" for="alidns">
Alidns(阿里云)
</label>
</div>
<div class="form-check form-check-inline col-form-label">
<input class="form-check-input" type="radio" name="DnsName" id="dnspod" value="dnspod" onclick="dnspodCheckedFun()" {{if eq $.DNS.Name "dnspod"}}checked{{end}}>
<input class="form-check-input" type="radio" name="DnsName" id="dnspod" value="dnspod"
onclick="dnspodCheckedFun()" {{if eq $.DNS.Name "dnspod" }}checked{{end}}>
<label class="form-check-label" for="dnspod">
Dnspod(腾讯云)
</label>
</div>
<div class="form-check form-check-inline col-form-label">
<input class="form-check-input" type="radio" name="DnsName" id="cloudflare" value="cloudflare" onclick="cloudflareCheckedFun()" {{if eq $.DNS.Name "cloudflare"}}checked{{end}}>
<input class="form-check-input" type="radio" name="DnsName" id="cloudflare" value="cloudflare"
onclick="cloudflareCheckedFun()" {{if eq $.DNS.Name "cloudflare" }}checked{{end}}>
<label class="form-check-label" for="cloudflare">
Cloudflare
</label>
</div>
<div class="form-check form-check-inline col-form-label">
<input class="form-check-input" type="radio" name="DnsName" id="huaweicloud" value="huaweicloud" onclick="huaweicloudCheckedFun()" {{if eq $.DNS.Name "huaweicloud"}}checked{{end}}>
<input class="form-check-input" type="radio" name="DnsName" id="huaweicloud" value="huaweicloud"
onclick="huaweicloudCheckedFun()" {{if eq $.DNS.Name "huaweicloud" }}checked{{end}}>
<label class="form-check-label" for="huaweicloud">
华为云
</label>
</div>
<div class="form-check form-check-inline col-form-label">
<input class="form-check-input" type="radio" name="DnsName" id="callback" value="callback" onclick="callbackCheckedFun()" {{if eq $.DNS.Name "callback"}}checked{{end}}>
<input class="form-check-input" type="radio" name="DnsName" id="callback" value="callback"
onclick="callbackCheckedFun()" {{if eq $.DNS.Name "callback" }}checked{{end}}>
<label class="form-check-label" for="callback">
Callback
</label>
</div>
<div class="form-check form-check-inline col-form-label">
<input class="form-check-input" type="radio" name="DnsName" id="baiducloud" value="baiducloud" onclick="baiducloudCheckedFun()" {{if eq $.DNS.Name "baiducloud"}}checked{{end}}>
<input class="form-check-input" type="radio" name="DnsName" id="baiducloud" value="baiducloud"
onclick="baiducloudCheckedFun()" {{if eq $.DNS.Name "baiducloud" }}checked{{end}}>
<label class="form-check-label" for="baiducloud">
百度云
</label>
</div>
<div class="form-check form-check-inline col-form-label">
<input class="form-check-input" type="radio" name="DnsName" id="porkbun" value="porkbun" onclick="porkbunCheckedFun()" {{if eq $.DNS.Name "porkbun"}}checked{{end}}>
<input class="form-check-input" type="radio" name="DnsName" id="porkbun" value="porkbun"
onclick="porkbunCheckedFun()" {{if eq $.DNS.Name "porkbun" }}checked{{end}}>
<label class="form-check-label" for="porkbun">
porkbun
</label>
</div>
<div class="form-check form-check-inline col-form-label">
<input class="form-check-input" type="radio" name="DnsName" id="godaddy" value="godaddy" onclick="godaddyCheckedFun()" {{if eq $.DNS.Name "godaddy"}}checked{{end}}>
<input class="form-check-input" type="radio" name="DnsName" id="godaddy" value="godaddy"
onclick="godaddyCheckedFun()" {{if eq $.DNS.Name "godaddy" }}checked{{end}}>
<label class="form-check-label" for="godaddy">
GoDaddy
</label>
</div>
<div class="form-check form-check-inline col-form-label">
<input class="form-check-input" type="radio" name="DnsName" id="googledomain" value="googledomain" onclick="googleDomainCheckedFun()" {{if eq $.DNS.Name "googledomain"}}checked{{end}}>
<input class="form-check-input" type="radio" name="DnsName" id="googledomain" value="googledomain"
onclick="googleDomainCheckedFun()" {{if eq $.DNS.Name "googledomain" }}checked{{end}}>
<label class="form-check-label" for="googledomain">
Google Domain
</label>
@ -103,14 +114,14 @@
<div class="form-group row">
<label for="DnsID" id="dnsIdLabel" class="col-sm-2 col-form-label">ID</label>
<div class="col-sm-10">
<input class="form-control" name="DnsID" id="DnsID" value="{{.DNS.ID}}">
<input class="form-control form" name="DnsID" id="DnsID" value="{{.DNS.ID}}">
</div>
</div>
<div class="form-group row">
<label for="DnsSecret" id="dnsSecretLabel" class="col-sm-2 col-form-label">Secret</label>
<div class="col-sm-10">
<input class="form-control" name="DnsSecret" id="DnsSecret" value="{{.DNS.Secret}}">
<input class="form-control form" name="DnsSecret" id="DnsSecret" value="{{.DNS.Secret}}">
</div>
</div>
@ -124,7 +135,8 @@
<div class="form-group row">
<label for="ipv4_enable" class="col-sm-2">是否启用</label>
<div class="col-sm-10">
<input type="checkbox" class="form-check-inline" style="margin-top: 5px;" id="ipv4_enable" name="Ipv4Enable" {{if eq $.Ipv4.Enable true}}checked{{end}}>
<input type="checkbox" class="form-check-inline" style="margin-top: 5px;" id="ipv4_enable"
name="Ipv4Enable" {{if eq $.Ipv4.Enable true}}checked{{end}}>
</div>
</div>
@ -132,14 +144,18 @@
<label for="ipv4_url" class="col-sm-2 col-form-label">获取 IP 方式</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="Ipv4GetType" id="urlRadioIpv4" value="url" {{if ne .Ipv4.GetType "netInterface"}}checked{{end}} onclick="urlClick('ipv4')">
<input class="form-check-input" type="radio" name="Ipv4GetType" id="urlRadioIpv4" value="url" {{if
ne .Ipv4.GetType "netInterface" }}checked{{end}} onclick="urlClick('ipv4')">
<label class="form-check-label" for="urlRadioIpv4">通过接口获取</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="Ipv4GetType" id="netInterfaceRadioIpv4" value="netInterface" {{if eq .Ipv4.GetType "netInterface"}}checked{{end}} onclick="netInterfaceClick('ipv4')">
<input class="form-check-input" type="radio" name="Ipv4GetType" id="netInterfaceRadioIpv4"
value="netInterface" {{if eq .Ipv4.GetType "netInterface" }}checked{{end}}
onclick="netInterfaceClick('ipv4')">
<label class="form-check-label" for="netInterfaceRadioIpv4">通过网卡获取</label>
</div>
<input type="url" class="form-control" name="Ipv4Url" id="ipv4_url" aria-describedby="ipv4_url_help" value="{{.Ipv4.URL}}">
<input type="url" class="form-control form" name="Ipv4Url" id="ipv4_url"
aria-describedby="ipv4_url_help" value="{{.Ipv4.URL}}">
<select class="form-control" id="ipv4_netInterface_select" name="Ipv4NetInterface"></select>
<small id="ipv4_url_help" class="form-text text-muted"></small>
</div>
@ -148,13 +164,15 @@
<div class="form-group row">
<label for="ipv4_domains" class="col-sm-2 col-form-label">Domains</label>
<div class="col-sm-10">
<textarea class="form-control" id="ipv4_domains" name="Ipv4Domains" rows="3" aria-describedby="ipv4_domains_help">
<textarea class="form-control form" id="ipv4_domains" name="Ipv4Domains" rows="3"
aria-describedby="ipv4_domains_help">
{{- range $i, $v := .Ipv4.Domains}}
{{$v}}
{{- end -}}
</textarea>
<small id="ipv4_domains_help" class="form-text text-muted">
一行一个域名, 可使用冒号手动分隔主机记录, 如：ddns:example.com.cn <a target="blank" href="https://github.com/jeessy2/ddns-go/issues/336">支持传递自定义参数</a>
一行一个域名, 可使用冒号手动分隔主机记录, 如：ddns:example.com.cn <a target="blank"
href="https://github.com/jeessy2/ddns-go/issues/336">支持传递自定义参数</a>
</small>
</div>
</div>
@ -169,7 +187,8 @@
<div class="form-group row">
<label for="ipv6_enable" class="col-sm-2">是否启用</label>
<div class="col-sm-10">
<input type="checkbox" class="form-check-inline" style="margin-top: 5px;" id="ipv6_enable" name="Ipv6Enable" {{if eq $.Ipv6.Enable true}}checked{{end}}>
<input type="checkbox" class="form-check-inline" style="margin-top: 5px;" id="ipv6_enable"
name="Ipv6Enable" {{if eq $.Ipv6.Enable true}}checked{{end}}>
</div>
</div>
@ -177,14 +196,18 @@
<label for="ipv6_url" class="col-sm-2 col-form-label">获取 IP 方式</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="Ipv6GetType" id="urlRadioIpv6" value="url" {{if ne .Ipv6.GetType "netInterface"}}checked{{end}} onclick="urlClick('ipv6')">
<input class="form-check-input" type="radio" name="Ipv6GetType" id="urlRadioIpv6" value="url" {{if
ne .Ipv6.GetType "netInterface" }}checked{{end}} onclick="urlClick('ipv6')">
<label class="form-check-label" for="urlRadioIpv6">通过接口获取</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="Ipv6GetType" id="netInterfaceRadioIpv6" value="netInterface" {{if eq .Ipv6.GetType "netInterface"}}checked{{end}} onclick="netInterfaceClick('ipv6')">
<input class="form-check-input" type="radio" name="Ipv6GetType" id="netInterfaceRadioIpv6"
value="netInterface" {{if eq .Ipv6.GetType "netInterface" }}checked{{end}}
onclick="netInterfaceClick('ipv6')">
<label class="form-check-label" for="netInterfaceRadioIpv6">通过网卡获取</label>
</div>
<input type="url" class="form-control" id="ipv6_url" name="Ipv6Url" aria-describedby="ipv6_url_help" value="{{.Ipv6.URL}}">
<input type="url" class="form-control form" id="ipv6_url" name="Ipv6Url"
aria-describedby="ipv6_url_help" value="{{.Ipv6.URL}}">
<select class="form-control" id="ipv6_netInterface_select" name="Ipv6NetInterface"></select>
<small id="ipv6_url_help" class="form-text text-muted"></small>
</div>
@ -193,21 +216,25 @@
<div class="form-group row" id="IPv6RegDiv">
<label for="IPv6Reg" class="col-sm-2 col-form-label">匹配正则表达式</label>
<div class="col-sm-10">
<input class="form-control" name="IPv6Reg" id="IPv6Reg" value="{{.Ipv6.IPv6Reg}}" aria-describedby="IPv6Reg_help">
<small id="IPv6Reg_help" class="form-text text-muted">可使用 @1 指定第一个IPv6地址, @2 指定第二个IPv6地址... 也可使用正则表达式匹配指定的IPv6地址, 留空不启用</small>
<input class="form-control form" name="IPv6Reg" id="IPv6Reg" value="{{.Ipv6.IPv6Reg}}"
aria-describedby="IPv6Reg_help">
<small id="IPv6Reg_help" class="form-text text-muted">可使用 @1 指定第一个IPv6地址, @2 指定第二个IPv6地址...
也可使用正则表达式匹配指定的IPv6地址, 留空不启用</small>
</div>
</div>
<div class="form-group row">
<label for="ipv6_domains" class="col-sm-2 col-form-label">Domains</label>
<div class="col-sm-10">
<textarea class="form-control" id="ipv6_domains" name="Ipv6Domains" rows="3" aria-describedby="ipv6_domains_help">
<textarea class="form-control form" id="ipv6_domains" name="Ipv6Domains" rows="3"
aria-describedby="ipv6_domains_help">
{{- range $i, $v := .Ipv6.Domains}}
{{$v}}
{{- end -}}
</textarea>
<small id="ipv6_domains_help" class="form-text text-muted">
一行一个域名, 可使用冒号手动分隔主机记录, 如：ddns:example.com.cn <a target="blank" href="https://github.com/jeessy2/ddns-go/issues/336">支持传递自定义参数</a>
一行一个域名, 可使用冒号手动分隔主机记录, 如：ddns:example.com.cn <a target="blank"
href="https://github.com/jeessy2/ddns-go/issues/336">支持传递自定义参数</a>
</small>
</div>
</div>
@ -222,7 +249,8 @@
<div class="form-group row">
<label for="NotAllowWanAccess" class="col-sm-2 col-form-label">禁止公网访问</label>
<div class="col-sm-10">
<input type="checkbox" class="form-check-inline" style="margin-top: 5px;" id="NotAllowWanAccess" name="NotAllowWanAccess" {{if eq $.NotAllowWanAccess true}}checked{{end}}>
<input type="checkbox" class="form-check-inline" style="margin-top: 5px;" id="NotAllowWanAccess"
name="NotAllowWanAccess" {{if eq $.NotAllowWanAccess true}}checked{{end}}>
<small id="NotAllowWanAccess_help" class="form-text text-muted">默认启用, 可禁止从公网访问本页面</small>
</div>
</div>
@ -230,7 +258,8 @@
<div class="form-group row">
<label for="Username" class="col-sm-2 col-form-label">登录用户名</label>
<div class="col-sm-10">
<input class="form-control" name="Username" id="Username" value="{{.Username}}" aria-describedby="Username_help">
<input class="form-control form" name="Username" id="Username" value="{{.Username}}"
aria-describedby="Username_help">
<small id="Username_help" class="form-text text-muted">为保护你的信息安全, 建议输入</small>
</div>
</div>
@ -238,7 +267,8 @@
<div class="form-group row">
<label for="Password" class="col-sm-2 col-form-label">登录密码</label>
<div class="col-sm-10">
<input class="form-control" type="password" name="Password" id="Password" value="{{.Password}}" aria-describedby="password_help">
<input class="form-control form" type="password" name="Password" id="Password"
value="{{.Password}}" aria-describedby="password_help">
<small id="password_help" class="form-text text-muted">为保护你的信息安全, 建议输入</small>
</div>
</div>
@ -246,16 +276,16 @@
<div class="form-group row">
<label class="col-sm-2 col-form-label">TTL</label>
<div class="col-sm-10">
<select class="form-control" name="TTL" value="{{.TTL}}">
<option value="" {{if eq .TTL ""}}selected{{end}}>自动</option>
<option value="1" {{if eq .TTL "1"}}selected{{end}}>1秒</option>
<option value="5" {{if eq .TTL "5"}}selected{{end}}>5秒</option>
<option value="10" {{if eq .TTL "10"}}selected{{end}}>10秒</option>
<option value="60" {{if eq .TTL "60"}}selected{{end}}>1分钟</option>
<option value="120" {{if eq .TTL "120"}}selected{{end}}>2分钟</option>
<option value="600" {{if eq .TTL "600"}}selected{{end}}>10分钟</option>
<option value="1800" {{if eq .TTL "1800"}}selected{{end}}>30分钟</option>
<option value="3600" {{if eq .TTL "3600"}}selected{{end}}>1小时</option>
<select class="form-control form" name="TTL" value="{{.TTL}}">
<option value="" {{if eq .TTL "" }}selected{{end}}>自动</option>
<option value="1" {{if eq .TTL "1" }}selected{{end}}>1秒</option>
<option value="5" {{if eq .TTL "5" }}selected{{end}}>5秒</option>
<option value="10" {{if eq .TTL "10" }}selected{{end}}>10秒</option>
<option value="60" {{if eq .TTL "60" }}selected{{end}}>1分钟</option>
<option value="120" {{if eq .TTL "120" }}selected{{end}}>2分钟</option>
<option value="600" {{if eq .TTL "600" }}selected{{end}}>10分钟</option>
<option value="1800" {{if eq .TTL "1800" }}selected{{end}}>30分钟</option>
<option value="3600" {{if eq .TTL "3600" }}selected{{end}}>1小时</option>
</select>
<small id="ttl_help" class="form-text text-muted">如账号支持更小的 TTL , 可修改。 IP 有变化时才会更新 TTL</small>
</div>
@ -271,9 +301,10 @@
<div class="form-group row">
<label for="WebhookURL" class="col-sm-2 col-form-label">URL</label>
<div class="col-sm-10">
<input class="form-control" name="WebhookURL" id="WebhookURL" value="{{.WebhookURL}}" aria-describedby="WebhookURL_help">
<input class="form-control form" name="WebhookURL" id="WebhookURL" value="{{.WebhookURL}}"
aria-describedby="WebhookURL_help">
<small id="WebhookURL_help" class="form-text text-muted">
<a target="blank" href="https://github.com/jeessy2/ddns-go#webhook">点击参考官方 Webhook 说明</a><br/>
<a target="blank" href="https://github.com/jeessy2/ddns-go#webhook">点击参考官方 Webhook 说明</a><br />
支持的变量 #{ipv4Addr}, #{ipv4Result}, #{ipv4Domains}, #{ipv6Addr}, #{ipv6Result}, #{ipv6Domains}
</small>
</div>
@ -282,7 +313,8 @@
<div class="form-group row">
<label for="WebhookRequestBody" class="col-sm-2 col-form-label">RequestBody</label>
<div class="col-sm-10">
<textarea class="form-control" id="WebhookRequestBody" name="WebhookRequestBody" rows="3" aria-describedby="WebhookRequestBody_help">
<textarea class="form-control form" id="WebhookRequestBody" name="WebhookRequestBody" rows="3"
aria-describedby="WebhookRequestBody_help">
{{- .WebhookRequestBody -}}
</textarea>
<small id="WebhookRequestBody_help" class="form-text text-muted">
@ -294,7 +326,8 @@
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<button class="btn btn-primary btn-sm" id="webhookTestBtn" aria-describedby="webhookTestBtn_help">模拟测试Webhook</button>
<button class="webhook-button btn btn-primary btn-sm" id="webhookTestBtn"
aria-describedby="webhookTestBtn_help">模拟测试Webhook</button>
<small id="webhookTestBtn_help" class="form-text text-muted"></small>
</div>
</div>
@ -302,20 +335,21 @@
</div>
</div>
<button class="btn btn-primary submit_btn" style="margin-bottom: 15px;">Save</button>
<button class="save-button btn btn-primary submit_btn" style="margin-bottom: 15px;">Save</button>
</form>
</div>
<div class="col-md-3">
<p class="font-weight-light text-break" style="margin-top: 115px;font-size: 13px;" id="logs"></p>
<button type="button" class="btn btn-outline-primary btn-sm" id="clearLogBtn">清空日志</button>
<button type="button" class="btn btn-outline-primary btn-sm" style="margin-top: 68px;"
id="clearLogBtn">清空日志</button>
<p class="logs font-weight-light text-break" style="margin-top: 20px;font-size: 13px;" id="logs"></p>
</div>
</div>
</main>
<script>
$(function(){
$(".submit_btn").on('click',function(e) {
$(function () {
$(".submit_btn").on('click', function (e) {
e.preventDefault();
$('body').animate({ scrollTop: 0 }, 300);
$.ajax({
@ -331,12 +365,12 @@
// ok
$('.alert').addClass("alert-success").removeClass("alert-danger")
$('#resultMsg').html("保存成功")
setTimeout(function(){
setTimeout(function () {
$('.alert').css("display", "none");
}, 3000)
}
},
error: function(jqXHR) {
error: function (jqXHR) {
alert(jqXHR.statusText);
}
})
@ -344,12 +378,12 @@
})
let beforeDnsID=""
let beforeDnsID = ""
function alidnsCheckedFun() {
document.getElementById("DnsID").disabled= false
document.getElementById("DnsID").disabled = false
if (beforeDnsID)
document.getElementById("DnsID").value= beforeDnsID
document.getElementById("DnsID").value = beforeDnsID
document.getElementById("dnsIdLabel").innerHTML = "AccessKey ID"
document.getElementById("dnsSecretLabel").innerHTML = "AccessKey Secret"
@ -357,9 +391,9 @@
}
function dnspodCheckedFun() {
document.getElementById("DnsID").disabled= false
document.getElementById("DnsID").disabled = false
if (beforeDnsID)
document.getElementById("DnsID").value= beforeDnsID
document.getElementById("DnsID").value = beforeDnsID
document.getElementById("dnsIdLabel").innerHTML = "ID"
document.getElementById("dnsSecretLabel").innerHTML = "Token"
@ -369,16 +403,16 @@
function cloudflareCheckedFun() {
document.getElementById("dnsIdLabel").innerHTML = ""
beforeDnsID = document.getElementById("DnsID").value
document.getElementById("DnsID").disabled= true
document.getElementById("DnsID").value= ""
document.getElementById("DnsID").disabled = true
document.getElementById("DnsID").value = ""
document.getElementById("dnsSecretLabel").innerHTML = "Token"
document.getElementById("dns_help").innerHTML = "<a target='_blank' href='https://dash.cloudflare.com/profile/api-tokens'>创建令牌->编辑区域 DNS (使用模板)</a>"
}
function huaweicloudCheckedFun() {
document.getElementById("DnsID").disabled= false
document.getElementById("DnsID").disabled = false
if (beforeDnsID)
document.getElementById("DnsID").value= beforeDnsID
document.getElementById("DnsID").value = beforeDnsID
document.getElementById("dnsIdLabel").innerHTML = "Access Key Id"
document.getElementById("dnsSecretLabel").innerHTML = "Secret Access Key"
@ -386,9 +420,9 @@
}
function callbackCheckedFun() {
document.getElementById("DnsID").disabled= false
document.getElementById("DnsID").disabled = false
if (beforeDnsID)
document.getElementById("DnsID").value= beforeDnsID
document.getElementById("DnsID").value = beforeDnsID
document.getElementById("dnsIdLabel").innerHTML = "URL"
document.getElementById("dnsSecretLabel").innerHTML = "RequestBody"
@ -396,27 +430,27 @@
}
function baiducloudCheckedFun() {
document.getElementById("DnsID").disabled= false
document.getElementById("DnsID").disabled = false
if (beforeDnsID)
document.getElementById("DnsID").value= beforeDnsID
document.getElementById("DnsID").value = beforeDnsID
document.getElementById("dnsIdLabel").innerHTML = "AccessKey ID"
document.getElementById("dnsSecretLabel").innerHTML = "AccessKey Secret"
document.getElementById("dns_help").innerHTML = "<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 仅对申请用户开放，使用前请先提交工单申请。"
}
function porkbunCheckedFun() {
document.getElementById("DnsID").disabled= false
document.getElementById("DnsID").disabled = false
if (beforeDnsID)
document.getElementById("DnsID").value= beforeDnsID
document.getElementById("DnsID").value = beforeDnsID
document.getElementById("dnsIdLabel").innerHTML = "API Key"
document.getElementById("dnsSecretLabel").innerHTML = "Secret Key"
document.getElementById("dns_help").innerHTML = "<a target='_blank' href='https://porkbun.com/account/api'>创建 Access</a>"
}
function godaddyCheckedFun() {
document.getElementById("DnsID").disabled= false
document.getElementById("DnsID").disabled = false
if (beforeDnsID)
document.getElementById("DnsID").value= beforeDnsID
document.getElementById("DnsID").value = beforeDnsID
document.getElementById("dnsIdLabel").innerHTML = "Key"
document.getElementById("dnsSecretLabel").innerHTML = "Secret"
@ -424,9 +458,9 @@
}
function googleDomainCheckedFun() {
document.getElementById("DnsID").disabled= false
document.getElementById("DnsID").disabled = false
if (beforeDnsID)
document.getElementById("DnsID").value= beforeDnsID
document.getElementById("DnsID").value = beforeDnsID
document.getElementById("dnsIdLabel").innerHTML = "Username"
document.getElementById("dnsSecretLabel").innerHTML = "Password"
document.getElementById("dns_help").innerHTML = "<a target='_blank' href='https://support.google.com/domains/answer/6147083?hl=zh-Hans'>新建动态域名解析记录</a>"
@ -450,110 +484,122 @@
checkedFun();
</script>
<script>
function getLogs() {
$.get("./logs", function(result){
$("#logs").html(result)
})
}
getLogs()
setInterval(getLogs, 5 * 1000)
$(function(){
$("#clearLogBtn").on("click", function(e) {
e.preventDefault();
$.ajax({
<script>
function getLogs() {
$.get("./logs", function (result) {
$("#logs").html(result)
})
}
getLogs()
setInterval(getLogs, 5 * 1000)
$(function () {
$("#clearLogBtn").on("click", function (e) {
e.preventDefault();
$.ajax({
method: "GET",
url: "./clearLog",
success: function() {
success: function () {
getLogs()
},
error: function(jqXHR) {
error: function (jqXHR) {
alert(jqXHR.statusText);
}
})
})
})
})
</script>
</script>
<script>
var ipv4GetType = '{{$.Ipv4.GetType}}'
var ipv6GetType = '{{$.Ipv6.GetType}}'
if (ipv4GetType === "netInterface") {
netInterfaceClick("ipv4")
} else {
urlClick("ipv4")
}
if (ipv6GetType === "netInterface") {
netInterfaceClick("ipv6")
} else {
urlClick("ipv6")
}
// 点击接口获取
function urlClick(label) {
$("#"+label+"_netInterface_select").css("display", "none")
$("#"+label+"_url").css("display", "block")
if (label === "ipv4") {
$("#ipv4_url_help").html("支持多个接口, 使用半角逗号分隔。如： https://myip4.ipip.net, https://ddns.oray.com/checkip, https://ip.3322.net")
<script>
var ipv4GetType = '{{$.Ipv4.GetType}}'
var ipv6GetType = '{{$.Ipv6.GetType}}'
if (ipv4GetType === "netInterface") {
netInterfaceClick("ipv4")
} else {
$("#ipv6_url_help").html("支持多个接口, 使用半角逗号分隔。如： https://myip6.ipip.net, https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me")
$("#IPv6RegDiv").css("display", "none")
}
}
// 点击网卡获取
function netInterfaceClick(label) {
$("#"+label+"_url").css("display", "none")
$("#"+label+"_netInterface_select").css("display", "block")
if (label === "ipv4") {
$("#ipv4_url_help").html("通过网卡获取 IP , 建议在多宽带的路由器中使用")
} else {
$("#ipv6_url_help").html("通过网卡获取 IP , 如不指定匹配正则表达式, 将默认使用第一个 IPv6 地址")
$("#IPv6RegDiv").removeAttr("style")
urlClick("ipv4")
}
$.get("./"+label+"NetInterface", function(result) {
$("#"+label+"_netInterface_select").empty()
if(result) {
var resultJson = JSON.parse(result)
for (var i=0; i<resultJson.length; i++) {
$("#"+label+"_netInterface_select").append(
`<option value='${resultJson[i].Name}'>
if (ipv6GetType === "netInterface") {
netInterfaceClick("ipv6")
} else {
urlClick("ipv6")
}
// 点击接口获取
function urlClick(label) {
$("#" + label + "_netInterface_select").css("display", "none")
$("#" + label + "_url").css("display", "block")
if (label === "ipv4") {
$("#ipv4_url_help").html("支持多个接口, 使用半角逗号分隔。如： https://myip4.ipip.net, https://ddns.oray.com/checkip, https://ip.3322.net")
} else {
$("#ipv6_url_help").html("支持多个接口, 使用半角逗号分隔。如： https://myip6.ipip.net, https://speed.neu6.edu.cn/getIP.php, https://v6.ident.me")
$("#IPv6RegDiv").css("display", "none")
}
}
// 点击网卡获取
function netInterfaceClick(label) {
$("#" + label + "_url").css("display", "none")
$("#" + label + "_netInterface_select").css("display", "block")
if (label === "ipv4") {
$("#ipv4_url_help").html("通过网卡获取 IP , 建议在多宽带的路由器中使用")
} else {
$("#ipv6_url_help").html("通过网卡获取 IP , 如不指定匹配正则表达式, 将默认使用第一个 IPv6 地址")
$("#IPv6RegDiv").removeAttr("style")
}
$.get("./" + label + "NetInterface", function (result) {
$("#" + label + "_netInterface_select").empty()
if (result) {
var resultJson = JSON.parse(result)
for (var i = 0; i < resultJson.length; i++) {
$("#" + label + "_netInterface_select").append(
`<option value='${resultJson[i].Name}'>
${resultJson[i].Name}(${resultJson[i].Address.join(" , ")})
</option>`
);
);
}
// 选中
if ("{{$.Ipv4.NetInterface}}" !== "") {
$("#" + label + "_netInterface_select").val("{{$.Ipv4.NetInterface}}")
}
} else {
$("#" + label + "_url_help").html("<span style='color: red'>没有找到可用的网卡</span>")
}
// 选中
if ("{{$.Ipv4.NetInterface}}" !== "") {
$("#"+label+"_netInterface_select").val("{{$.Ipv4.NetInterface}}")
}
} else {
$("#"+label+"_url_help").html("<span style='color: red'>没有找到可用的网卡</span>")
}
})
}
</script>
<script>
$(function(){
$("#webhookTestBtn").on("click", function(e) {
e.preventDefault();
$.ajax({
})
}
</script>
<script>
$(function () {
$("#webhookTestBtn").on("click", function (e) {
e.preventDefault();
$.ajax({
method: "POST",
url: "./webhookTest",
data: {"URL": $("#WebhookURL").val(), "RequestBody": $("#WebhookRequestBody").val()},
success: function() {
data: { "URL": $("#WebhookURL").val(), "RequestBody": $("#WebhookRequestBody").val() },
success: function () {
$("#webhookTestBtn_help").text("提交模拟测试成功! 数据为假数据, 只是为了测试Webhook正常与否")
setTimeout(function(){
setTimeout(function () {
$("#webhookTestBtn_help").text("")
}, 5000)
},
error: function(jqXHR) {
error: function (jqXHR) {
alert(jqXHR.statusText);
}
})
})
})
})
</script>
</html>
</script>
<script>
function toggleTheme() {
var theme = document.getElementsByTagName('link')[0];
if (theme.getAttribute('href') == './static/common-light.css') {
theme.setAttribute('href', './static/common-dark.css');
} else {
theme.setAttribute('href', './static/common-light.css');
}
}
</script>
</html>