peterstockings/DokkuStatus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add apps tile so you dont need to scroll to particular app in admin section

Browse Source
This commit is contained in:
Peter Stockings
2025-12-24 09:58:33 +11:00
parent b95962e22c
commit ab75c61ec7
1 changed files with 120 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
templates/admin.html
View File

@@ -14,6 +14,7 @@
<style>
* {
box-sizing: border-box;
scroll-behavior: smooth;
}
@keyframes scanline {
@@ -172,12 +173,89 @@
box-shadow: 0 0 10px rgba(255, 85, 85, 0.4) !important;
}
/* Navigation Grid */
.nav-grid-container {
background: #161b22;
border: 2px solid #30363d;
padding: 20px;
margin-bottom: 40px;
position: relative;
}
.nav-grid-container::before {
content: '[ NAVIGATION_CONTROL_CENTER ]';
position: absolute;
top: -12px;
left: 20px;
background: #161b22;
padding: 0 10px;
color: #00d9ff;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
}
.nav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.nav-tile {
background: #0d1117;
border: 1px solid #30363d;
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.nav-tile:hover {
border-color: #00d9ff;
background: rgba(0, 217, 255, 0.05);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.led {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.led-on {
background: #00ff88;
box-shadow: 0 0 8px #00ff88;
}
.led-off {
background: #ff5555;
box-shadow: 0 0 8px #ff5555;
}
.nav-tile-name {
font-size: 11px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
}
/* App Stations */
.station {
background: #161b22;
border: 2px solid #30363d;
margin-bottom: 40px;
margin-bottom: 60px;
position: relative;
padding: 24px;
scroll-margin-top: 40px;
}
.station::before {
@@ -193,14 +271,35 @@
letter-spacing: 2px;
}
.station-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
h2 {
font-size: 18px;
color: #00ff88;
margin: 0 0 20px 0;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.back-to-top {
font-size: 10px;
color: #8b949e;
text-decoration: none;
border: 1px solid #30363d;
padding: 4px 8px;
text-transform: uppercase;
}
.back-to-top:hover {
color: #00d9ff;
border-color: #00d9ff;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -341,7 +440,7 @@
</style>
</head>
<body>
<body id="top">
<div class="container">
<div class="header-terminal">
<div class="terminal-title">
@@ -355,9 +454,25 @@
</div>
</div>
<!-- Navigation Grid -->
<div class="nav-grid-container">
<div class="nav-grid">
{% for r in data.apps %}
<a href="#station-{{ loop.index }}" class="nav-tile">
<div class="led {% if r.detail.state.running %}led-on{% else %}led-off{% endif %}"></div>
<span class="nav-tile-name">{{ r.app }}</span>
</a>
{% endfor %}
</div>
</div>
{% for r in data.apps %}
<section class="station" data-label="[ STATION: {{ " %02d"|format(loop.index) }} ]">
<h2>{{ r.app }}</h2>
<section id="station-{{ loop.index }}" class="station" data-label="[ STATION: {{ " %02d"|format(loop.index) }}
]">
<div class="station-header">
<h2>{{ r.app }}</h2>
<a href="#top" class="back-to-top">[^ BACK_TO_TOP]</a>
</div>
<div class="grid">
<!-- Metadata Panel -->