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 {
|
.container {
|
||||||
max-width: 900px; margin: 0 auto;
|
max-width: 900px; margin: 0 auto;
|
||||||
background: white; padding: 40px;
|
background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||||
border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
padding: 40px 40px 0 40px;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
color: #333; text-align: center; margin-bottom: 10px;
|
color: #333; text-align: center; margin-bottom: 10px;
|
||||||
font-size: 2.5em; font-weight: 300;
|
font-size: 2.5em; font-weight: 300;
|
||||||
}
|
}
|
||||||
.subtitle {
|
.subtitle {
|
||||||
text-align: center; color: #666; margin-bottom: 40px;
|
text-align: center; color: #666; margin-bottom: 30px;
|
||||||
font-size: 1.1em;
|
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 {
|
.services {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
@@ -36,7 +66,7 @@
|
|||||||
color: white; padding: 30px; border-radius: 8px;
|
color: white; padding: 30px; border-radius: 8px;
|
||||||
text-decoration: none; text-center;
|
text-decoration: none; text-center;
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
border: none;
|
border: none; display: block;
|
||||||
}
|
}
|
||||||
.service:hover {
|
.service:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
@@ -54,6 +84,9 @@
|
|||||||
.service.cloud {
|
.service.cloud {
|
||||||
background: linear-gradient(135deg, #0082c9 0%, #30b455 100%);
|
background: linear-gradient(135deg, #0082c9 0%, #30b455 100%);
|
||||||
}
|
}
|
||||||
|
.service.admin {
|
||||||
|
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
||||||
|
}
|
||||||
.service i {
|
.service i {
|
||||||
font-size: 3em; margin-bottom: 15px; display: block;
|
font-size: 3em; margin-bottom: 15px; display: block;
|
||||||
}
|
}
|
||||||
@@ -67,42 +100,113 @@
|
|||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
.footer {
|
.footer {
|
||||||
text-align: center; margin-top: 40px; color: #888;
|
text-align: center; padding: 0 40px 40px 40px; color: #888;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.admin-services {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 25px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Homelab Services</h1>
|
<div class="header">
|
||||||
<p class="subtitle">Self-hosted applications and services</p>
|
<h1>Homelab Services</h1>
|
||||||
|
<p class="subtitle">Self-hosted applications and services</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="services">
|
<div class="tab-nav">
|
||||||
<a href="/gitea/" class="service">
|
<button class="tab-button active" onclick="showTab('home', this)">
|
||||||
<i class="fas fa-code-branch"></i>
|
<i class="fas fa-home"></i> Home
|
||||||
<h3>Gitea</h3>
|
</button>
|
||||||
<p>Git Repository Server</p>
|
<button class="tab-button" onclick="showTab('admin', this)">
|
||||||
</a>
|
<i class="fas fa-cogs"></i> Admin
|
||||||
<a href="/files/" class="service">
|
</button>
|
||||||
<i class="fas fa-folder-open"></i>
|
</div>
|
||||||
<h3>File Server</h3>
|
|
||||||
<p>Upload & Download Files</p>
|
<div id="home-tab" class="tab-content active">
|
||||||
</a>
|
<div class="services">
|
||||||
<a href="#" class="service disabled" onclick="return false;">
|
<a href="/gitea/" class="service">
|
||||||
<i class="fas fa-cloud"></i>
|
<i class="fas fa-code-branch"></i>
|
||||||
<h3>Nextcloud</h3>
|
<h3>Gitea</h3>
|
||||||
<p>Temporarily Disabled</p>
|
<p>Git Repository Server</p>
|
||||||
</a>
|
</a>
|
||||||
<a href="/media/" class="service">
|
<a href="/files/" class="service">
|
||||||
<i class="fas fa-play-circle"></i>
|
<i class="fas fa-folder-open"></i>
|
||||||
<h3>Media Server</h3>
|
<h3>Copyparty</h3>
|
||||||
<p>Movies, Music & TV Shows</p>
|
<p>File Server & WebDAV</p>
|
||||||
</a>
|
</a>
|
||||||
|
<a href="#" class="service disabled" onclick="return false;">
|
||||||
|
<i class="fas fa-cloud"></i>
|
||||||
|
<h3>Nextcloud</h3>
|
||||||
|
<p>Temporarily Disabled</p>
|
||||||
|
</a>
|
||||||
|
<a href="/media/" class="service">
|
||||||
|
<i class="fas fa-play-circle"></i>
|
||||||
|
<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>
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<p><i class="fa fa-home"></i> Powered by ak-homelab.duckdns.org</p>
|
<p><i class="fa fa-home"></i> Powered by ak-homelab.duckdns.org</p>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user