Arpad Krejczinger
5c4d959ed8
- 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
213 lines
7.5 KiB
HTML
213 lines
7.5 KiB
HTML
<!-- DEPLOYMENT LOCATION: /var/www/homelab/index.html -->
|
|
<!-- Deploy with: sudo cp config/www/index.html /var/www/homelab/ -->
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Homelab Services</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
margin: 0; padding: 40px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
}
|
|
.container {
|
|
max-width: 900px; margin: 0 auto;
|
|
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: 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));
|
|
gap: 25px;
|
|
}
|
|
.service {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white; padding: 30px; border-radius: 8px;
|
|
text-decoration: none; text-center;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
border: none; display: block;
|
|
}
|
|
.service:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
|
|
}
|
|
.service.disabled {
|
|
background: linear-gradient(135deg, #999 0%, #666 100%);
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
.service.disabled:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
.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;
|
|
}
|
|
.service h3 {
|
|
margin: 15px 0 10px 0; font-size: 1.4em; font-weight: 600;
|
|
}
|
|
.service p {
|
|
margin: 0; opacity: 0.9; font-size: 1em;
|
|
}
|
|
.service.disabled p {
|
|
opacity: 0.7;
|
|
}
|
|
.footer {
|
|
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>
|
|
<h3>Gitea</h3>
|
|
<p>Git Repository Server</p>
|
|
</a>
|
|
<a href="/files/" class="service">
|
|
<i class="fas fa-folder-open"></i>
|
|
<h3>Copyparty</h3>
|
|
<p>File Server & WebDAV</p>
|
|
</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 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>
|