Adding an theme
This commit is contained in:
adminsama
parent
0f44075910
commit
a46ef02709
24
resource/template/theme-AngelKanade/footer.html
vendored
Normal file
24
resource/template/theme-AngelKanade/footer.html
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{{define "theme-AngelKanade/footer"}}
|
||||||
|
<div class="ui inverted vertical footer segment">
|
||||||
|
<div class="ui center aligned is-size-7 container">
|
||||||
|
<b>© <a style="color: white;" href="/">{{.Conf.Site.Brand}}</a></b> |
|
||||||
|
Powered by <a style="color: white;" href="https://github.com/naiba/nezha"><st>{{tr "NezhaMonitoring"}}<{{.Version}}></st></a> | Theme designed
|
||||||
|
<small>by.<a
|
||||||
|
href="https://yujie.pro" style="color: white;" target="_blank">夜灭</a>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
|
||||||
|
<script src="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.js"></script>
|
||||||
|
<script src="/static/semantic-ui-alerts.min.js"></script>
|
||||||
|
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
|
||||||
|
<script src="/static/main.js?v20220930"></script>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
updateLang({{.LANG }});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
{{end}}
|
||||||
24
resource/template/theme-AngelKanade/header.html
vendored
Normal file
24
resource/template/theme-AngelKanade/header.html
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{{define "theme-AngelKanade/header"}}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="{{.Conf.Language}}">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<meta content="telephone=no" name="format-detection">
|
||||||
|
<title>{{.Title}}</title>
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
|
href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css">
|
||||||
|
<link href="https://cdn.staticfile.org/font-logos/0.17/font-logos.min.css" type="text/css"
|
||||||
|
rel="stylesheet" />
|
||||||
|
<link href="https://cdn.staticfile.org/bootstrap-icons/1.10.3/font/bootstrap-icons.css" type="text/css"
|
||||||
|
rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/main.css?v2022042314">
|
||||||
|
<link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />
|
||||||
|
<link href="https://cdn-tokyo.sou.ma/css/ktz.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
{{end}}
|
||||||
368
resource/template/theme-AngelKanade/home.html
vendored
Normal file
368
resource/template/theme-AngelKanade/home.html
vendored
Normal file
@ -0,0 +1,368 @@
|
|||||||
|
{{define "theme-AngelKanade/home"}}
|
||||||
|
{{template "theme-AngelKanade/header" .}}
|
||||||
|
{{if ts .CustomCode}} {{.CustomCode|safe}} {{end}}
|
||||||
|
{{template "theme-AngelKanade/menu" .}}
|
||||||
|
<div class="nb-container">
|
||||||
|
<div class="ui container">
|
||||||
|
<div id="app">
|
||||||
|
<div class="ui styled fluid accordion" v-for="group in groups">
|
||||||
|
<div class="active title">
|
||||||
|
<i class="dropdown icon"></i>
|
||||||
|
@#(group.Tag!==''?group.Tag:'{{tr "Default"}}')#@
|
||||||
|
</div>
|
||||||
|
<div class="active content">
|
||||||
|
<div class="ui four stackable status cards">
|
||||||
|
<div v-for="server in group.data" :id="server.ID" class="ui card">
|
||||||
|
<div class="content" v-if="server.Host" style="margin-top: 10px; padding-bottom: 5px">
|
||||||
|
<div class="header">
|
||||||
|
<img v-if="server.Host.CountryCode" style="border-radius: 50%;box-shadow:-1px -1px 2px #eee, 1px 1px 2px #000;width:19px;" :src="'https://cdn.staticfile.org/flag-icon-css/6.6.5/flags/1x1/'+server.Host.CountryCode + '.svg'" alt="国家"/> <i v-if='server.Host.Platform == "darwin"'
|
||||||
|
class="apple icon"></i><i v-else-if='isWindowsPlatform(server.Host.Platform)'
|
||||||
|
class="windows icon"></i><i v-else :class="'fl-' + getFontLogoClass(server.Host.Platform)"></i>
|
||||||
|
@#server.Name + (server.live?'':'[{{tr "Offline"}}]')#@
|
||||||
|
<i class="nezha-secondary-font info circle icon" style="height: 28px"></i>
|
||||||
|
<div class="ui content popup" style="margin-bottom: 0">
|
||||||
|
{{tr "Platform"}}: @#server.Host.Platform#@-@#server.Host.PlatformVersion#@
|
||||||
|
[<span
|
||||||
|
v-if="server.Host.Virtualization">@#server.Host.Virtualization#@:</span>@#server.Host.Arch#@]<br />
|
||||||
|
CPU: @#server.Host.CPU#@<br />
|
||||||
|
{{tr "DiskUsed"}}:
|
||||||
|
@#formatByteSize(server.State.DiskUsed)#@/@#formatByteSize(server.Host.DiskTotal)#@<br />
|
||||||
|
{{tr "MemUsed"}}:
|
||||||
|
@#formatByteSize(server.State.MemUsed)#@/@#formatByteSize(server.Host.MemTotal)#@<br />
|
||||||
|
{{tr "SwapUsed"}}:
|
||||||
|
@#formatByteSize(server.State.SwapUsed)#@/@#formatByteSize(server.Host.SwapTotal)#@<br />
|
||||||
|
{{tr "NetTransfer"}}: <i
|
||||||
|
class="arrow alternate circle down outline icon"></i>@#formatByteSize(server.State.NetInTransfer)#@<i
|
||||||
|
class="arrow alternate circle up outline icon"></i>@#formatByteSize(server.State.NetOutTransfer)#@<br />
|
||||||
|
{{tr "Load"}}: @# toFixed2(server.State.Load1) #@/@# toFixed2(server.State.Load5) #@/@#
|
||||||
|
toFixed2(server.State.Load15) #@<br />
|
||||||
|
{{tr "ProcessCount"}}: @# server.State.ProcessCount #@<br />
|
||||||
|
{{tr "ConnCount"}}: TCP @# server.State.TcpConnCount #@ / UDP @# server.State.UdpConnCount #@<br />
|
||||||
|
{{tr "BootTime"}}: @# formatTimestamp(server.Host.BootTime) #@<br />
|
||||||
|
{{tr "LastActive"}}: @# new Date(server.LastActive).toLocaleString() #@<br />
|
||||||
|
{{tr "Version"}}: @#server.Host.Version#@<br />
|
||||||
|
</div>
|
||||||
|
<div class="ui divider" style="margin-bottom: 5px"></div>
|
||||||
|
</div>
|
||||||
|
<div class="description">
|
||||||
|
<div class="ui grid">
|
||||||
|
<div class="three wide column">CPU</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<div :class="formatPercent(server.live,server.State.CPU, 100).class">
|
||||||
|
<div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
|
||||||
|
<small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">{{tr "MemUsed"}}</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<div :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class">
|
||||||
|
<div class="bar"
|
||||||
|
:style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style">
|
||||||
|
<small>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">{{tr "SwapUsed"}}</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<div :class="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).class">
|
||||||
|
<div class="bar"
|
||||||
|
:style="formatPercent(server.live,server.State.SwapUsed, server.Host.SwapTotal).style">
|
||||||
|
<small>@#parseInt(server.State?server.State.SwapUsed/server.Host.SwapTotal*100:0)#@%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">{{tr "NetSpeed"}}</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<i class="arrow alternate circle down outline icon"></i>
|
||||||
|
@#formatByteSize(server.State.NetInSpeed)#@/s
|
||||||
|
<i class="arrow alternate circle up outline icon"></i>
|
||||||
|
@#formatByteSize(server.State.NetOutSpeed)#@/s
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">流量</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<i class="arrow circle down icon"></i>
|
||||||
|
@#formatByteSize(server.State.NetInTransfer)#@
|
||||||
|
|
||||||
|
<i class="arrow circle up icon"></i>
|
||||||
|
@#formatByteSize(server.State.NetOutTransfer)#@
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">{{tr "DiskUsed"}}</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<div :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class">
|
||||||
|
<div class="bar"
|
||||||
|
:style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style">
|
||||||
|
<small>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">信息</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<i class="bi bi-cpu-fill" style="font-size: 1.1rem; color: #4a86e8;"></i> @#getCoreAndGHz(server.Host.CPU)#@
|
||||||
|
|
||||||
|
<i class="bi bi-memory" style="font-size: 1.1rem; color: #00ac0d;"></i> @#getK2Gb(server.Host.MemTotal)#@
|
||||||
|
|
||||||
|
<i class="bi bi-hdd-rack-fill" style="font-size: 1.1rem; color: #980000"></i> @#getK2Gb(server.Host.DiskTotal)#@
|
||||||
|
</div>
|
||||||
|
<div class="three wide column">{{tr "Uptime"}}</div>
|
||||||
|
<div class="thirteen wide column">
|
||||||
|
<i class="clock icon"></i>@#secondToDate(server.State.Uptime)#@
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content" v-else>
|
||||||
|
<p>@#server.Name#@</p>
|
||||||
|
<p>{{tr "ServerIsOffline"}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{template "theme-AngelKanade/footer" .}}
|
||||||
|
<script>
|
||||||
|
const initData = JSON.parse('{{.Servers}}').servers;
|
||||||
|
var statusCards = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
delimiters: ['@#', '#@'],
|
||||||
|
data: {
|
||||||
|
data: initData,
|
||||||
|
groups: [],
|
||||||
|
cache: [],
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.group()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
$('.nezha-secondary-font.info.icon').popup({
|
||||||
|
popup: '.ui.content.popup',
|
||||||
|
exclusive: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toFixed2(f) {
|
||||||
|
return f.toFixed(2)
|
||||||
|
},
|
||||||
|
isWindowsPlatform(str) {
|
||||||
|
return str.includes('Windows')
|
||||||
|
},
|
||||||
|
getFontLogoClass(str) {
|
||||||
|
if (["almalinux",
|
||||||
|
"alpine",
|
||||||
|
"aosc",
|
||||||
|
"apple",
|
||||||
|
"archlinux",
|
||||||
|
"archlabs",
|
||||||
|
"artix",
|
||||||
|
"budgie",
|
||||||
|
"centos",
|
||||||
|
"coreos",
|
||||||
|
"debian",
|
||||||
|
"deepin",
|
||||||
|
"devuan",
|
||||||
|
"docker",
|
||||||
|
"elementary",
|
||||||
|
"fedora",
|
||||||
|
"ferris",
|
||||||
|
"flathub",
|
||||||
|
"freebsd",
|
||||||
|
"gentoo",
|
||||||
|
"gnu-guix",
|
||||||
|
"illumos",
|
||||||
|
"kali-linux",
|
||||||
|
"linuxmint",
|
||||||
|
"mageia",
|
||||||
|
"mandriva",
|
||||||
|
"manjaro",
|
||||||
|
"nixos",
|
||||||
|
"openbsd",
|
||||||
|
"opensuse",
|
||||||
|
"pop-os",
|
||||||
|
"raspberry-pi",
|
||||||
|
"redhat",
|
||||||
|
"rocky-linux",
|
||||||
|
"sabayon",
|
||||||
|
"slackware",
|
||||||
|
"snappy",
|
||||||
|
"solus",
|
||||||
|
"tux",
|
||||||
|
"ubuntu",
|
||||||
|
"void",
|
||||||
|
"zorin"].indexOf(str)
|
||||||
|
> -1) {
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
if (['openwrt','linux'].indexOf(str) > -1) {
|
||||||
|
return 'tux';
|
||||||
|
}
|
||||||
|
if (str == 'amazon') {
|
||||||
|
return 'redhat';
|
||||||
|
}
|
||||||
|
if (str == 'arch') {
|
||||||
|
return 'archlinux';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
group() {
|
||||||
|
this.groups = groupingData(this.data, "Tag")
|
||||||
|
},
|
||||||
|
formatPercent(live, used, total) {
|
||||||
|
const percent = live ? (parseInt(used / total * 100) || 0) : -1
|
||||||
|
if (!this.cache[percent]) {
|
||||||
|
this.cache[percent] = {
|
||||||
|
class: {
|
||||||
|
ui: true,
|
||||||
|
progress: true,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
'transition-duration': '300ms',
|
||||||
|
'min-width': 'unset',
|
||||||
|
width: percent + '% !important',
|
||||||
|
},
|
||||||
|
percent,
|
||||||
|
}
|
||||||
|
if (percent < 0) {
|
||||||
|
this.cache[percent].style['background-color'] = 'slategray'
|
||||||
|
this.cache[percent].class.offline = true
|
||||||
|
} else if (percent < 51) {
|
||||||
|
this.cache[percent].style['background-color'] = '#0a94f2'
|
||||||
|
this.cache[percent].class.fine = true
|
||||||
|
} else if (percent < 81) {
|
||||||
|
this.cache[percent].style['background-color'] = 'orange'
|
||||||
|
this.cache[percent].class.warning = true
|
||||||
|
} else {
|
||||||
|
this.cache[percent].style['background-color'] = 'crimson'
|
||||||
|
this.cache[percent].class.error = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.cache[percent]
|
||||||
|
},
|
||||||
|
secondToDate(s) {
|
||||||
|
var d = Math.floor(s / 3600 / 24);
|
||||||
|
if (d > 0) {
|
||||||
|
return d + " {{tr "Day"}}"
|
||||||
|
}
|
||||||
|
var h = Math.floor(s / 3600 % 24);
|
||||||
|
var m = Math.floor(s / 60 % 60);
|
||||||
|
var s = Math.floor(s % 60);
|
||||||
|
return h + ":" + ("0" + m).slice(-2) + ":" + ("0" + s).slice(-2);
|
||||||
|
},
|
||||||
|
formatTimestamp(t) {
|
||||||
|
return new Date(t * 1000).toLocaleString()
|
||||||
|
},
|
||||||
|
formatByteSize(bs) {
|
||||||
|
const x = readableBytes(bs)
|
||||||
|
return x != "NaN undefined" ? x : '0B'
|
||||||
|
},
|
||||||
|
getCoreAndGHz(str){
|
||||||
|
if((str || []).hasOwnProperty(0) === false){
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
str = str[0];
|
||||||
|
let GHz = str.match(/(\d|\.)+GHz/g);
|
||||||
|
let Core = str.match(/(\d|\.)+ Physical/g);
|
||||||
|
GHz = GHz!==null?GHz.hasOwnProperty(0)===false?'':GHz[0]:''
|
||||||
|
Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?'
|
||||||
|
if(Core === '?'){
|
||||||
|
let Core = str.match(/(\d|\.)+ Virtual/g);
|
||||||
|
Core = Core!==null?Core.hasOwnProperty(0)===false?'?':Core[0]:'?'
|
||||||
|
return Core.replace('Virtual','Core')
|
||||||
|
}
|
||||||
|
return Core.replace('Physical','Core');
|
||||||
|
|
||||||
|
},
|
||||||
|
getK2Gb(bs){
|
||||||
|
bs = bs / 1024 /1024 /1024;
|
||||||
|
return Math.ceil(bs.toFixed(2)) + 'GB';
|
||||||
|
},
|
||||||
|
listTipsMouseenter(obj,strs,tipsNum=1){
|
||||||
|
this.layerIndex = layer.tips(strs, '#'+obj,{tips: [tipsNum, 'rgb(0 0 0 / 85%)'],time:0});
|
||||||
|
$('#'+obj).attr('layerIndex',this.layerIndex)
|
||||||
|
},
|
||||||
|
listTipsMouseleave(obj){
|
||||||
|
layer.close(this.layerIndex)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function groupingData(data, field) {
|
||||||
|
let map = {};
|
||||||
|
let dest = [];
|
||||||
|
data.forEach(item => {
|
||||||
|
if (!map[item[field]]) {
|
||||||
|
dest.push({
|
||||||
|
[field]: item[field],
|
||||||
|
data: [item]
|
||||||
|
});
|
||||||
|
map[item[field]] = item;
|
||||||
|
} else {
|
||||||
|
dest.forEach(dItem => {
|
||||||
|
if (dItem[field] == item[field]) {
|
||||||
|
dItem.data.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return dest;
|
||||||
|
}
|
||||||
|
|
||||||
|
let canShowError = true;
|
||||||
|
function connect() {
|
||||||
|
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
||||||
|
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
||||||
|
ws.onopen = function (evt) {
|
||||||
|
canShowError = true;
|
||||||
|
$.suiAlert({
|
||||||
|
title: '{{tr "RealtimeChannelEstablished"}}',
|
||||||
|
description: '{{tr "GetTheLatestMonitoringDataInRealTime"}}',
|
||||||
|
type: 'success',
|
||||||
|
time: '2',
|
||||||
|
position: 'top-center',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
ws.onmessage = function (evt) {
|
||||||
|
const oldServers = statusCards.servers
|
||||||
|
const data = JSON.parse(evt.data)
|
||||||
|
statusCards.servers = data.servers
|
||||||
|
for (let i = 0; i < statusCards.servers.length; i++) {
|
||||||
|
const ns = statusCards.servers[i];
|
||||||
|
if (!ns.Host) ns.live = false
|
||||||
|
else {
|
||||||
|
const lastActive = new Date(ns.LastActive).getTime()
|
||||||
|
if (data.now - lastActive > 10 * 1000) {
|
||||||
|
ns.live = false
|
||||||
|
} else {
|
||||||
|
ns.live = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
statusCards.groups = groupingData(statusCards.servers, "Tag")
|
||||||
|
}
|
||||||
|
ws.onclose = function () {
|
||||||
|
if (canShowError) {
|
||||||
|
canShowError = false;
|
||||||
|
$.suiAlert({
|
||||||
|
title: '{{tr "RealtimeChannelDisconnect"}}',
|
||||||
|
description: '{{tr "CanNotGetTheLatestMonitoringDataInRealTime"}}',
|
||||||
|
type: 'warning',
|
||||||
|
time: '2',
|
||||||
|
position: 'top-center',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
connect()
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
ws.onerror = function () {
|
||||||
|
ws.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
connect();
|
||||||
|
|
||||||
|
$('.ui.accordion').accordion({ "exclusive": false });
|
||||||
|
</script>
|
||||||
|
{{end}}
|
||||||
54
resource/template/theme-AngelKanade/menu.html
vendored
Normal file
54
resource/template/theme-AngelKanade/menu.html
vendored
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
{{define "theme-AngelKanade/menu"}}
|
||||||
|
<div class="ui large top fixed menu nb-menu">
|
||||||
|
<div class="ui container">
|
||||||
|
<div class="item" style=""><i class="server blue icon"></i></div>
|
||||||
|
<a class="item" href="/">
|
||||||
|
<img src="/static/logo.svg?v20210804">
|
||||||
|
</a>
|
||||||
|
{{if .IsAdminPage}}
|
||||||
|
<a class='item{{if eq .MatchedPath "/server"}} active{{end}}' href="/server"><i class="server icon"></i>{{tr "Server"}}</a>
|
||||||
|
<a class='item{{if eq .MatchedPath "/monitor"}} active{{end}}' href="/monitor"><i class="rss icon"></i>{{tr "Services"}}</a>
|
||||||
|
<a class='item{{if eq .MatchedPath "/cron"}} active{{end}}' href="/cron"><i class="clock icon"></i>{{tr "Task"}}</a>
|
||||||
|
<a class='item{{if eq .MatchedPath "/notification"}} active{{end}}' href="/notification"><i class="bell icon"></i>{{tr "Notification"}}</a>
|
||||||
|
<a class='item{{if eq .MatchedPath "/setting"}} active{{end}}' href="/setting">
|
||||||
|
<i class="settings icon"></i>{{tr "Settings"}}
|
||||||
|
</a>
|
||||||
|
{{else}}
|
||||||
|
<a class='item{{if eq .MatchedPath "/"}} active{{end}}' href="/"><i class="home icon"></i>{{tr "Home"}}</a>
|
||||||
|
<a class='item{{if eq .MatchedPath "/service"}} active{{end}}' href="/service"><i class="rss icon"></i>{{tr "Services"}}</a>
|
||||||
|
{{end}}
|
||||||
|
<div class="right menu">
|
||||||
|
<div class="item">
|
||||||
|
{{if .Admin}}
|
||||||
|
<div class="ui simple dropdown">
|
||||||
|
<div class="text">
|
||||||
|
<img class="ui avatar image" src="{{.Admin.AvatarURL}}"> {{.Admin.Name}}
|
||||||
|
</div>
|
||||||
|
<i class="dropdown icon"></i>
|
||||||
|
<div class="menu">
|
||||||
|
{{if .IsAdminPage}}
|
||||||
|
<a class="item" href="/">
|
||||||
|
<i class="chart area icon"></i>{{tr "BackToHomepage"}}
|
||||||
|
</a>
|
||||||
|
<a class="item" href="/api">
|
||||||
|
<i class="chart key icon"></i>API Token
|
||||||
|
</a>
|
||||||
|
{{else}}
|
||||||
|
<a class="item" href="/server">
|
||||||
|
<i class="terminal icon"></i>{{tr "AdminPanel"}}
|
||||||
|
</a>
|
||||||
|
{{end}}
|
||||||
|
<button class="item" onclick="showConfirm('{{tr "ConfirmLogout"}}','{{tr "AfterLoggingOutYouHaveToLoginAgain"}}',logout,{{.Admin.ID}})">
|
||||||
|
<i class="logout icon"></i>{{tr "Logout"}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{else}}
|
||||||
|
<a href="/login" class="ui large positive nezha-primary-btn button"><i class="sign-in icon"></i>{{tr "Login"}}</a>
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{template "component/confirm" .}}
|
||||||
|
{{end}}
|
||||||
BIN
resource/template/theme-AngelKanade/screenshot.png
vendored
Normal file
BIN
resource/template/theme-AngelKanade/screenshot.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
85
resource/template/theme-AngelKanade/service.html
vendored
Normal file
85
resource/template/theme-AngelKanade/service.html
vendored
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
{{define "theme-AngelKanade/service"}}
|
||||||
|
{{template "theme-AngelKanade/header" .}}
|
||||||
|
{{if ts .CustomCode}}
|
||||||
|
{{.CustomCode|safe}}
|
||||||
|
{{end}}
|
||||||
|
{{template "theme-AngelKanade/menu" .}}
|
||||||
|
<div class="nb-container">
|
||||||
|
<div class="ui container">
|
||||||
|
<div class="service-status">
|
||||||
|
<table class="ui celled table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="ui center aligned">{{tr "Name"}}</th>
|
||||||
|
<th class="ui center aligned">{{tr "30DaysOnline"}}</th>
|
||||||
|
<th class="ui center aligned">{{tr "Details"}}</th>
|
||||||
|
<th class="ui center aligned">{{tr "Status"}}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{{range $service := .Services}}
|
||||||
|
<tr>
|
||||||
|
<td class="ui center aligned">{{$service.Monitor.Name}}</td>
|
||||||
|
<td class="ui center aligned">
|
||||||
|
{{$service.TotalUptime|float32f}}%
|
||||||
|
</td>
|
||||||
|
<td class="ui center aligned">{{range $i,$d := $service.Delay}}
|
||||||
|
<div class="ui icon button {{className (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}"
|
||||||
|
data-tooltip="{{dayBefore $i}}，{{tr "Availability"}}:{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%，{{tr "AverageLatency"}}:{{float32f $d}}ms">
|
||||||
|
</div> {{end}}
|
||||||
|
</td>
|
||||||
|
<td class="ui center aligned delay-today">
|
||||||
|
<i
|
||||||
|
class="delay-today {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></i>
|
||||||
|
{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}
|
||||||
|
</td>
|
||||||
|
</tr> {{end}}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{{if .CycleTransferStats}}
|
||||||
|
|
||||||
|
<h2 style="text-align: center;">{{tr "CycleTransferStats"}}</h2>
|
||||||
|
|
||||||
|
<table class="ui celled table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="ui center aligned">ID</th>
|
||||||
|
<th class="ui center aligned">{{tr "Rules"}}</th>
|
||||||
|
<th class="ui center aligned">{{tr "Server"}}</th>
|
||||||
|
<th class="ui center aligned">{{tr "From"}}</th>
|
||||||
|
<th class="ui center aligned">{{tr "To"}}</th>
|
||||||
|
<th class="ui center aligned">MAX</th>
|
||||||
|
<th class="ui center aligned">MIN</th>
|
||||||
|
<th class="ui center aligned">{{tr "NextCheck"}}</th>
|
||||||
|
<th class="ui center aligned">{{tr "CurrentUsage"}}</th>
|
||||||
|
<th class='ui center aligned' style='padding: 0px 31px 0px 31px;'>{{tr "Transleft"}}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{{range $id, $stats := .CycleTransferStats}}
|
||||||
|
{{range $innerId, $transfer := $stats.Transfer}}
|
||||||
|
{{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
|
||||||
|
<tr>
|
||||||
|
<td class="ui center aligned">{{$id}}</td>
|
||||||
|
<td class="ui center aligned">{{$stats.Name}}</td>
|
||||||
|
<td class="ui center aligned">{{index $stats.ServerName $innerId}}</td>
|
||||||
|
<td class="ui center aligned">{{$stats.From|tf}}</td>
|
||||||
|
<td class="ui center aligned">{{$stats.To|tf}}</td>
|
||||||
|
<td class="ui center aligned">{{$stats.Max|bf}}</td>
|
||||||
|
<td class="ui center aligned">{{$stats.Min|bf}}</td>
|
||||||
|
<td class="ui center aligned">{{(index $stats.NextUpdate $innerId)|sft}}</td>
|
||||||
|
<td class="ui center aligned">{{$transfer|bf}}</td>
|
||||||
|
<td class="ui center aligned" style="padding: 14px 0px 0px 0px; position: relative;"><div class="thirteen wide column"><div class="ui progress {{TransClassName $TransLeftPercent}}" style=" background: rgba(0,0,0,.1); background-color: rgba(0,0,0,.1)!important; height: 25px;"><div class="bar" style="transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: {{$TransLeftPercent}}% !important;"></div><small style="position: relative; top: -2em;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small></div></div></td>
|
||||||
|
</tr>
|
||||||
|
{{end}}
|
||||||
|
{{end}}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{{end}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{template "theme-AngelKanade/footer" .}}
|
||||||
|
{{end}}
|
||||||
25
resource/template/theme-AngelKanade/viewpassword.html
vendored
Normal file
25
resource/template/theme-AngelKanade/viewpassword.html
vendored
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{{define "theme-AngelKanade/viewpassword"}}
|
||||||
|
{{template "theme-AngelKanade/header" .}}
|
||||||
|
{{if ts .CustomCode}}
|
||||||
|
{{.CustomCode|safe}}
|
||||||
|
{{end}}
|
||||||
|
<div class="login nb-container">
|
||||||
|
<div class="ui center aligned grid">
|
||||||
|
<div class="column">
|
||||||
|
<h2 class="ui image header">
|
||||||
|
<img src="static/logo.svg?v20210804" class="image">
|
||||||
|
<div class="content">
|
||||||
|
{{tr "VerifyPassword"}}
|
||||||
|
</div>
|
||||||
|
</h2>
|
||||||
|
<form action="/view-password" method="POST" class="ui form">
|
||||||
|
<div class="field">
|
||||||
|
<input type="password" name="Password">
|
||||||
|
</div>
|
||||||
|
<button class="ui nezha-primary-btn button" type="submit">{{tr "Confirm"}}</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{template "theme-AngelKanade/footer" .}}
|
||||||
|
{{end}}
|
||||||
Loading…
x
Reference in New Issue
Block a user