tcjlj/nezha
1
0
Fork 0
mirror of https://github.com/nezhahq/nezha.git synced 2025-01-23 13:18:13 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity
db8a42e820
nezha/resource/template/theme-daynight/home.html

310 lines
14 KiB
HTML
Raw Normal View History

Add new theme DayNight
2021-01-20 09:22:17 -05:00
{{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>
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
<link rel="shortcut icon" type="image/png" href="/static/logo.png" />
Add new theme DayNight
2021-01-20 09:22:17 -05:00
<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>
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
<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>
添加流量统计
2021-01-20 23:32:52 -05:00
<li>@#formatByteSize(server.State.NetInTransfer) #@(@#formatByteSize(server.State.NetInSpeed)#@/s)</li>
<li>@#formatByteSize(server.State.NetOutTransfer) #@(@#formatByteSize(server.State.NetOutSpeed)#@/s)</li>
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
<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>
Add new theme DayNight
2021-01-20 09:22:17 -05:00
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
<!-- Dark mode toggle -->
Add new theme DayNight
2021-01-20 09:22:17 -05:00
<script>
var checkbox = document.querySelector('input[name=theme]');
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
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')
}
})
Add new theme DayNight
2021-01-20 09:22:17 -05:00
let trans = () => {
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
window.setTimeout(() => {
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
}, 1000)
}
Add new theme DayNight
2021-01-20 09:22:17 -05:00
</script>
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
<!-- Grid list mode toggle -->
Add new theme DayNight
2021-01-20 09:22:17 -05:00
<script>
var checkboxs = document.querySelector('input[name=grid]');
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
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')
}
})
Add new theme DayNight
2021-01-20 09:22:17 -05:00
let transs = () => {
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
window.setTimeout(() => {
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
}, 1000)
}
Add new theme DayNight
2021-01-20 09:22:17 -05:00
</script>
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
<!-- 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>&copy; <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>
Add new theme DayNight
2021-01-20 09:22:17 -05:00
<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>
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
Add new theme DayNight
2021-01-20 09:22:17 -05:00
<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');
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
ws.onopen = function (evt) {
Swal.fire({
position: 'top',
icon: 'success',
title: '实时通道建立',
showConfirmButton: false,
timer: 1500
});
}
Add new theme DayNight
2021-01-20 09:22:17 -05:00
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 () {
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
Swal.fire({
position: 'top',
icon: 'error',
title: '实时通道断开',
showConfirmButton: false,
timer: 1500
});
Add new theme DayNight
2021-01-20 09:22:17 -05:00
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
}
Add new theme DayNight
2021-01-20 09:22:17 -05:00
</script>
💄 dashboard v0.3.5(daynight): reformat and set brand
2021-01-20 20:39:03 -05:00
</body>
Add new theme DayNight
2021-01-20 09:22:17 -05:00
</html>
添加流量统计
2021-01-20 23:32:52 -05:00
{{end}}
Reference in New Issue Copy Permalink