Add tabbed admin interface with organized service sections
- Add tabbed navigation with Home and Admin tabs - Organize Admin tab into Server Administration and Local Network sections - Update service names to actual application names (Copyparty, Jellyfin) - Add NAS Storage link for network management - Improve service descriptions and icons - Implement responsive design with Font Awesome icons
This commit is contained in:
@@ -15,17 +15,47 @@
|
||||
}
|
||||
.container {
|
||||
max-width: 900px; margin: 0 auto;
|
||||
background: white; padding: 40px;
|
||||
border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
padding: 40px 40px 0 40px;
|
||||
}
|
||||
h1 {
|
||||
color: #333; text-align: center; margin-bottom: 10px;
|
||||
font-size: 2.5em; font-weight: 300;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center; color: #666; margin-bottom: 40px;
|
||||
text-align: center; color: #666; margin-bottom: 30px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Tab Styles */
|
||||
.tab-nav {
|
||||
display: flex; justify-content: center; margin-bottom: 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
.tab-button {
|
||||
background: none; border: none; padding: 15px 30px;
|
||||
font-size: 1.1em; cursor: pointer; color: #666;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.tab-button.active {
|
||||
color: #667eea; border-bottom-color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tab-button:hover {
|
||||
color: #667eea; background: #f8f9fa;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none; padding: 40px;
|
||||
}
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.services {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
@@ -36,7 +66,7 @@
|
||||
color: white; padding: 30px; border-radius: 8px;
|
||||
text-decoration: none; text-center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: none;
|
||||
border: none; display: block;
|
||||
}
|
||||
.service:hover {
|
||||
transform: translateY(-5px);
|
||||
@@ -54,6 +84,9 @@
|
||||
.service.cloud {
|
||||
background: linear-gradient(135deg, #0082c9 0%, #30b455 100%);
|
||||
}
|
||||
.service.admin {
|
||||
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
||||
}
|
||||
.service i {
|
||||
font-size: 3em; margin-bottom: 15px; display: block;
|
||||
}
|
||||
@@ -67,16 +100,35 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
.footer {
|
||||
text-align: center; margin-top: 40px; color: #888;
|
||||
text-align: center; padding: 0 40px 40px 40px; color: #888;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.admin-services {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 25px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Homelab Services</h1>
|
||||
<p class="subtitle">Self-hosted applications and services</p>
|
||||
</div>
|
||||
|
||||
<div class="tab-nav">
|
||||
<button class="tab-button active" onclick="showTab('home', this)">
|
||||
<i class="fas fa-home"></i> Home
|
||||
</button>
|
||||
<button class="tab-button" onclick="showTab('admin', this)">
|
||||
<i class="fas fa-cogs"></i> Admin
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="home-tab" class="tab-content active">
|
||||
<div class="services">
|
||||
<a href="/gitea/" class="service">
|
||||
<i class="fas fa-code-branch"></i>
|
||||
@@ -85,8 +137,8 @@
|
||||
</a>
|
||||
<a href="/files/" class="service">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
<h3>File Server</h3>
|
||||
<p>Upload & Download Files</p>
|
||||
<h3>Copyparty</h3>
|
||||
<p>File Server & WebDAV</p>
|
||||
</a>
|
||||
<a href="#" class="service disabled" onclick="return false;">
|
||||
<i class="fas fa-cloud"></i>
|
||||
@@ -95,14 +147,66 @@
|
||||
</a>
|
||||
<a href="/media/" class="service">
|
||||
<i class="fas fa-play-circle"></i>
|
||||
<h3>Media Server</h3>
|
||||
<h3>Jellyfin</h3>
|
||||
<p>Movies, Music & TV Shows</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="admin-tab" class="tab-content">
|
||||
<h2 style="color: #333; margin-bottom: 20px;">Server Administration</h2>
|
||||
<div class="admin-services">
|
||||
<a href="/glances/" class="service admin" target="_blank">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
<h3>Glances</h3>
|
||||
<p>System Monitoring</p>
|
||||
</a>
|
||||
<a href="/netdata/" class="service admin" target="_blank">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
<h3>Netdata</h3>
|
||||
<p>Real-time Monitoring</p>
|
||||
</a>
|
||||
<a href="/portainer/" class="service admin" target="_blank">
|
||||
<i class="fab fa-docker"></i>
|
||||
<h3>Portainer</h3>
|
||||
<p>Docker Management</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2 style="color: #333; margin-bottom: 20px; margin-top: 40px;">Local Network</h2>
|
||||
<div class="admin-services">
|
||||
<a href="http://192.168.0.101:5000/" class="service admin" target="_blank">
|
||||
<i class="fas fa-hdd"></i>
|
||||
<h3>NAS Storage</h3>
|
||||
<p>Network Attached Storage</p>
|
||||
</a>
|
||||
<a href="http://192.168.0.1" class="service admin" target="_blank">
|
||||
<i class="fas fa-network-wired"></i>
|
||||
<h3>Router</h3>
|
||||
<p>Network Configuration</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p><i class="fa fa-home"></i> Powered by ak-homelab.duckdns.org</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showTab(tabName, buttonElement) {
|
||||
// Hide all tab contents
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
tabContents.forEach(tab => tab.classList.remove('active'));
|
||||
|
||||
// Remove active class from all buttons
|
||||
const tabButtons = document.querySelectorAll('.tab-button');
|
||||
tabButtons.forEach(button => button.classList.remove('active'));
|
||||
|
||||
// Show selected tab and mark button as active
|
||||
document.getElementById(tabName + '-tab').classList.add('active');
|
||||
buttonElement.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user