mirror of
https://github.com/Buriburizaem0n/nezha_domains.git
synced 2026-02-04 12:40:07 +00:00
Merge pull request #73 from JackieSung4ev/daynight
Add new theme DayNight Co-authored-by: JackieSung4ev <24974735+JackieSung4ev@users.noreply.github.com>
This commit is contained in:
naiba
GitHub
@@ -17,6 +17,7 @@
|
||||
<option value="default"{{if eq .Conf.Site.Theme "default"}} selected="selected"{{end}}>默认主题</option>
|
||||
<option value="daynight"{{if eq .Conf.Site.Theme "daynight"}} selected="selected"{{end}}>JackieSung DayNight</option>
|
||||
<option value="hotaru"{{if eq .Conf.Site.Theme "hotaru"}} selected="selected"{{end}}>CokeMine Hotaru</option>
|
||||
<option value="daynight"{{if eq .Conf.Site.Theme "daynight"}} selected="selected"{{end}}>JackieSung DayNight</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
|
||||
202
resource/template/theme-daynight/home.html
Normal file
202
resource/template/theme-daynight/home.html
Normal file
@@ -0,0 +1,202 @@
|
||||
{{define "theme-daynight/home"}}
|
||||
<!doctype html>
|
||||
<html lang="zh-Hans">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<title>{{.Title}}</title>
|
||||
<link rel="shortcut icon" type="image/png" href="/static/theme-daynight/favicon.png" />
|
||||
|
||||
<link rel="stylesheet" href="/static/theme-daynight/main.css">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
|
||||
{{if ts .CustomCode}}
|
||||
{{.CustomCode|safe}}
|
||||
{{end}}
|
||||
</head>
|
||||
|
||||
<body data-theme="light" data-gridlist="grid">
|
||||
<header class="nav-bar clearfix"><figure class="logo"><a href="/">{{.Title}}</a></figure><div class="icon-container"><div class="row cf"><div class="three col"><div class="hamburger" id="hamburger-icon"><span class="line"></span><span class="line"></span><span class="line"></span></div></div></div></div><nav class="nav-menu"><ul><li><a href="/">首页</a></li><li><a href="/service">服务状态</a></li><li><a href="/server">服务器</a></li><li><a href="/monitor">监控</a></li><li><a href="/notification">通知</a></li><li><a href="/setting">设置</a></li>{{if .Admin}} <li><a href="#" style="padding:.8em;text-align:center;" title="您已登录">{{.Admin.Name}}</a></li>{{else}} <li><a href="/login">登录</a></li>{{end}} </ul></nav></header>
|
||||
<script>$(document).ready(function(){ $(".hamburger").click(function(){ $(this).toggleClass("is-active"); $('.nav-menu').toggleClass('active'); $('.nav-bar').toggleClass('active');});}); </script>
|
||||
<section class="toggle-container"><div class="toggle-dark-mode"><h4><i class="fas fa-sun fa-lg" title="白昼模式"></i> / <i class="fas fa-moon fa-lg" title="暗黑模式"></i></h4><input type="checkbox" name="theme" id="switch"><label for="switch">Toggle</label></div><div class="toggle-grid-mode"><h4><i class="fas fa-th fa-lg" title="网格视图"></i> / <i class="fas fa-list-ul fa-lg" title="列表视图"></i></h4><input type="checkbox" name="grid" id="grid-list"><label for="grid-list">Toggle</label></div></section>
|
||||
<div id="app"><div class="server-info-container" v-for='server in servers' :id="server.ID"><div class="info-body"><ul class="server-info-body-container"><li><div :class="'state-'+ (server.live?'online':'offline')"><p>@#server.live?'Running':'Down'#@</p></div></li><li><h3>@#server.Name#@</h3></li><li><img :src="'/static/theme-daynight/img/flag/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'" :title="server.Host.CountryCode.toUpperCase()" /></li><li>@#server.Host.Platform#@</li><li>@#server.Host.CountryCode.toUpperCase()#@</li><li>@#formatByteSize(server.State.MemUsed)#@ / @#formatByteSize(server.Host.MemTotal)#@</li><li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li><li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li><li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li><li>@#formatByteSize(server.State.NetInSpeed)#@/s</li><li>@#formatByteSize(server.State.NetOutSpeed)#@/s</li><li><div class="cpu-bar"><div><h4>CPU</h4></div><div v-if="server.State" :class="formatPercent(server.live,server.State.CPU, 100).class" :title="formatPercent(server.live,server.State.CPU,100).percent+'%'"><div class="bar td-padding" :style="formatPercent(server.live,server.State.CPU, 100).style"><p>@#formatPercent(server.live,server.State.CPU,100).percent#@%</p></div></div></div></li><li><div class="ram-bar"><div><h4>RAM</h4></div><div v-if="server.State" :class="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).class" :title="parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)+'%'"><div class="bar td-padding" :style="formatPercent(server.live,server.State.MemUsed, server.Host.MemTotal).style"><p>@#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%</p></div></div></div></li><li><div class="disk-bar"><div><h4>硬盘</h4></div><div v-if="server.State" :class="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).class" :title="parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)+'%'"><div class="bar td-padding" :style="formatPercent(server.live,server.State.DiskUsed, server.Host.DiskTotal).style"><p>@#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%</p></div></div></div></li></ul></div></div></div>
|
||||
|
||||
|
||||
|
||||
<!-- Dark mode toggle -->
|
||||
<script>
|
||||
var checkbox = document.querySelector('input[name=theme]');
|
||||
checkbox.addEventListener('change', function() {
|
||||
if(this.checked) {
|
||||
trans()
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark')
|
||||
} else {
|
||||
trans()
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'light')
|
||||
}
|
||||
})
|
||||
let trans = () => {
|
||||
document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
|
||||
window.setTimeout(() => {
|
||||
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Grid list mode toggle -->
|
||||
<script>
|
||||
var checkboxs = document.querySelector('input[name=grid]');
|
||||
checkboxs.addEventListener('change', function() {
|
||||
if(this.checked) {
|
||||
transs()
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'list')
|
||||
} else {
|
||||
transs()
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'grid')
|
||||
}
|
||||
})
|
||||
let transs = () => {
|
||||
document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
|
||||
window.setTimeout(() => {
|
||||
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Back to top button -->
|
||||
<a id="back-to-top"></a>
|
||||
<script>var btn=$('#back-to-top'); $(window).scroll(function(){ if ($(window).scrollTop() >300){ btn.addClass('show');} else{ btn.removeClass('show');}});btn.on('click', function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, '300')});</script>
|
||||
|
||||
<footer><div class="footer-container"><div><a href="https://github.com/naiba/nezha" target="_blank">Powered by 哪吒面板 · {{.Version}}</a><p>© <span id="copyright-date"><script>document.getElementById('copyright-date').appendChild(document.createTextNode(new Date().getFullYear()))</script></span> · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a></p></div></div></footer>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
||||
|
||||
<script>
|
||||
const initData = {{.Servers }};
|
||||
var statusCards = new Vue({
|
||||
el: '#app',
|
||||
delimiters: ['@#', '#@'],
|
||||
data: {
|
||||
servers: initData,
|
||||
cache: [],
|
||||
},
|
||||
mounted() {
|
||||
this.DarkMode();
|
||||
},
|
||||
methods: {
|
||||
mergeUsage(state, host) {
|
||||
if (!state) {
|
||||
return 0
|
||||
}
|
||||
if (!host) {
|
||||
return state.CPU
|
||||
}
|
||||
return (state.CPU + (state.MemUsed / host.MemTotal * 100) + (state.DiskUsed / host.DiskTotal * 100)) / 3
|
||||
},
|
||||
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'] = '#53B449'
|
||||
this.cache[percent].class.fine = true
|
||||
} else if (percent < 81) {
|
||||
this.cache[percent].style['background-color'] = '#FBB142'
|
||||
this.cache[percent].class.warning = true
|
||||
} else {
|
||||
this.cache[percent].style['background-color'] = '#F23D34'
|
||||
this.cache[percent].class.error = true
|
||||
}
|
||||
}
|
||||
return this.cache[percent]
|
||||
},
|
||||
readableBytes(bytes) {
|
||||
var i = Math.floor(Math.log(bytes) / Math.log(1024)),
|
||||
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
return (bytes / Math.pow(1024, i)).toFixed(0) + ' ' + sizes[i];
|
||||
},
|
||||
DarkMode() {
|
||||
const hour = new Date(Date.now()).getHours()
|
||||
if (hour > 17 || hour < 4) {
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
|
||||
}
|
||||
},
|
||||
secondToDate(s) {
|
||||
var d = Math.floor(s / 3600 / 24);
|
||||
if (d > 0) {
|
||||
return d + "天"
|
||||
}
|
||||
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 = this.readableBytes(bs)
|
||||
return x != "NaN undefined" ? x : '0 KB'
|
||||
}
|
||||
}
|
||||
})
|
||||
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
|
||||
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
|
||||
ws.onopen = function (evt) {
|
||||
Swal.fire({
|
||||
position: 'top',
|
||||
icon: 'success',
|
||||
title: '实时通道建立',
|
||||
showConfirmButton: false,
|
||||
timer: 1500
|
||||
});
|
||||
}
|
||||
ws.onmessage = function (evt) {
|
||||
statusCards.servers = JSON.parse(evt.data)
|
||||
const keys = Object.keys(statusCards.servers)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const ns = statusCards.servers[keys[i]];
|
||||
if (!ns.Host) ns.live = false
|
||||
else {
|
||||
const lastActive = new Date(ns.LastActive).getTime()
|
||||
if (Date.now() - lastActive > 20 * 1000) {
|
||||
ns.live = false
|
||||
} else {
|
||||
ns.live = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ws.onclose = function () {
|
||||
Swal.fire({
|
||||
position: 'top',
|
||||
icon: 'error',
|
||||
title: '实时通道断开',
|
||||
showConfirmButton: false,
|
||||
timer: 1500
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
42
resource/template/theme-daynight/service.html
Normal file
42
resource/template/theme-daynight/service.html
Normal file
@@ -0,0 +1,42 @@
|
||||
{{define "theme-daynight/service"}}
|
||||
{{template "common/header" .}}
|
||||
{{template "common/menu" .}}
|
||||
<div class="nb-container">
|
||||
<div class="ui container">
|
||||
<div class="ui segment service-status">
|
||||
{{range $service := .Services}}
|
||||
<div class="ui grid">
|
||||
<div class="three wide column">
|
||||
<p>{{$service.Monitor.Name}}</p>
|
||||
<p>30天在线率{{divU64 $service.TotalDown (addU64 $service.TotalUp $service.TotalDown)}}%</p>
|
||||
</div>
|
||||
<div class="eleven wide column">
|
||||
{{range $i,$d := $service.Delay}}
|
||||
<div class="ui icon button{{if gt (add (index $service.Up $i) (index $service.Down $i)) 0}}
|
||||
{{if gt (div (index $service.Down $i) (add (index $service.Up $i) (index $service.Down $i))) 30.0}}danger
|
||||
{{else if gt (div (index $service.Down $i) (add (index $service.Up $i) (index $service.Down $i))) 10.0}}
|
||||
warning{{else}}good{{end}}
|
||||
{{end}}" data-tooltip="{{dayBefore $i}}，平均延迟:{{$d}}ms">
|
||||
<i class="delay"></i>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="two wide column round{{if gt (addU64 $service.TotalUp $service.TotalDown) 0}}
|
||||
{{if gt (divU64 $service.TotalDown (addU64 $service.TotalUp $service.TotalDown)) 30.0}}danger{{else if gt (divU64 $service.TotalDown (addU64 $service.TotalUp $service.TotalDown)) 10.0}}warning{{else}}good{{end}}
|
||||
{{end}}">
|
||||
<i></i>
|
||||
{{if gt (addU64 $service.TotalUp $service.TotalDown) 0}}
|
||||
{{if gt (divU64 $service.TotalDown (addU64 $service.TotalUp $service.TotalDown)) 30.0}}故障
|
||||
{{else if gt (divU64 $service.TotalDown (addU64 $service.TotalUp $service.TotalDown)) 10.0}}
|
||||
低可用{{else}}良好{{end}}
|
||||
{{else}}无数据
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "common/footer" .}}
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user