Add apps tile so you dont need to scroll to particular app in admin section
This commit is contained in:
Peter Stockings
@@ -14,6 +14,7 @@
|
|||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scanline {
|
@keyframes scanline {
|
||||||
@@ -172,12 +173,89 @@
|
|||||||
box-shadow: 0 0 10px rgba(255, 85, 85, 0.4) !important;
|
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 {
|
.station {
|
||||||
background: #161b22;
|
background: #161b22;
|
||||||
border: 2px solid #30363d;
|
border: 2px solid #30363d;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 60px;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
scroll-margin-top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.station::before {
|
.station::before {
|
||||||
@@ -193,14 +271,35 @@
|
|||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.station-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #00ff88;
|
color: #00ff88;
|
||||||
margin: 0 0 20px 0;
|
margin: 0;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
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 {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
@@ -341,7 +440,7 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body id="top">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header-terminal">
|
<div class="header-terminal">
|
||||||
<div class="terminal-title">
|
<div class="terminal-title">
|
||||||
@@ -355,9 +454,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</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 %}
|
{% for r in data.apps %}
|
||||||
<section class="station" data-label="[ STATION: {{ " %02d"|format(loop.index) }} ]">
|
<section id="station-{{ loop.index }}" class="station" data-label="[ STATION: {{ " %02d"|format(loop.index) }}
|
||||||
<h2>{{ r.app }}</h2>
|
]">
|
||||||
|
<div class="station-header">
|
||||||
|
<h2>{{ r.app }}</h2>
|
||||||
|
<a href="#top" class="back-to-top">[^ BACK_TO_TOP]</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<!-- Metadata Panel -->
|
<!-- Metadata Panel -->
|
||||||
|
|||||||
Reference in New Issue
Block a user