190 lines
8.5 KiB
HTML
190 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LaForceIT | Infrastructure Dashboard</title>
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="Live monitoring dashboard for LaForceIT infrastructure lab. View real-time metrics, system status, and infrastructure performance.">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%230f172a%22></rect><path fill=%22%233b82f6%22 d=%22M30 40L50 20L70 40L50 60L30 40Z%22></path><path fill=%22%233b82f6%22 d=%22M50 60L70 40L70 70L50 90L30 70L30 40L50 60Z%22 fill-opacity=%220.6%22></path></svg>">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
|
|
<!-- Your existing CSS file -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Top Links -->
|
|
<div class="top-links">
|
|
<a href="https://laforceit.com" class="laforceit-link">
|
|
<span class="logo-text-glow">LaForceIT</span><span class="logo-dot-glow">.com</span>
|
|
</a>
|
|
<a href="#" class="signin-button">
|
|
<i class="fas fa-sign-in-alt"></i>
|
|
<span>Sign In</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Offline Notice -->
|
|
<div class="offline-notice" id="offline-notice" style="display: block; margin-top: 5rem;">
|
|
<div class="offline-notice-icon">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div class="offline-notice-text">
|
|
<h3>Dashboard is Currently in Simulation Mode</h3>
|
|
<p>The live dashboard is currently showing simulated data. You can explore the interface, but real-time data is not available. Select "Refresh" to generate new random metrics.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Bar -->
|
|
<nav class="navbar" style="top: 2.5rem;">
|
|
<div class="container">
|
|
<div class="logo">
|
|
<a href="index.html">
|
|
<span class="logo-text-glow">LaForceIT</span><span class="logo-dot-glow">.com</span>
|
|
</a>
|
|
</div>
|
|
<div class="nav-menu">
|
|
<a href="index.html" class="nav-link">Home</a>
|
|
<a href="index.html#portfolio" class="nav-link">Portfolio</a>
|
|
<a href="index.html#services" class="nav-link">Services</a>
|
|
<a href="https://www.argobox.com/blog" class="nav-link" target="_blank">Blog</a>
|
|
<a href="index.html#lab" class="nav-link">Live Lab</a>
|
|
<a href="resume.html" class="nav-link">Resume</a>
|
|
</div>
|
|
<div class="nav-buttons">
|
|
<a href="#" class="dashboard-link active">
|
|
<span class="live-indicator offline"></span>
|
|
<span>Live Dashboard</span>
|
|
</a>
|
|
<button class="menu-toggle" aria-label="Toggle menu">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Dashboard Container -->
|
|
<div class="dashboard-container">
|
|
<div class="container">
|
|
<div class="dashboard-header">
|
|
<div class="dashboard-title">
|
|
<h1>Infrastructure Dashboard</h1>
|
|
<div class="live-indicator-label offline">
|
|
<span class="live-dot"></span>
|
|
<span>Simulation Mode</span>
|
|
</div>
|
|
<div class="simulation-toggle">
|
|
<span class="toggle-label">Simulation Mode:</span>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="simulation-toggle" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
<span class="toggle-status">Active</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-actions">
|
|
<button class="dashboard-btn" id="refresh-btn">
|
|
<i class="fas fa-sync-alt"></i>
|
|
<span>Refresh</span>
|
|
</button>
|
|
<button class="dashboard-btn" id="alerts-btn">
|
|
<i class="fas fa-bell"></i>
|
|
<span>Alerts</span>
|
|
</button>
|
|
<button class="dashboard-btn" id="settings-btn">
|
|
<i class="fas fa-cog"></i>
|
|
<span>Settings</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Your dashboard content goes here -->
|
|
<!-- Overview Cards, Charts, Services Status, and Logs sections -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-info">
|
|
<div class="footer-logo">
|
|
<span class="logo-text-glow">LaForceIT</span>
|
|
<span class="logo-dot-glow">.com</span>
|
|
</div>
|
|
<p class="footer-description">
|
|
Enterprise-grade home lab environment for DevOps experimentation, infrastructure automation, and containerized application deployment.
|
|
</p>
|
|
<div class="footer-evolution">
|
|
<i class="fas fa-code-branch evolution-icon"></i>
|
|
<span>Continuously evolving since 2011</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-links">
|
|
<div class="footer-links-column">
|
|
<h3 class="footer-heading">Platforms</h3>
|
|
<a href="#" class="footer-link">Dashboard</a>
|
|
<a href="#" class="footer-link">Ansible Sandbox</a>
|
|
<a href="#" class="footer-link">Gitea</a>
|
|
<a href="#" class="footer-link">OpenWebUI</a>
|
|
</div>
|
|
|
|
<div class="footer-links-column">
|
|
<h3 class="footer-heading">Documentation</h3>
|
|
<a href="#" class="footer-link">Architecture</a>
|
|
<a href="#" class="footer-link">Kubernetes</a>
|
|
<a href="#" class="footer-link">Ansible</a>
|
|
<a href="#" class="footer-link">Network</a>
|
|
</div>
|
|
|
|
<div class="footer-links-column">
|
|
<h3 class="footer-heading">Resources</h3>
|
|
<a href="#" class="footer-link">Ansible Playbooks</a>
|
|
<a href="#" class="footer-link">K8s Manifests</a>
|
|
<a href="#" class="footer-link">Shell Scripts</a>
|
|
<a href="#" class="footer-link">Configuration Files</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-bottom">
|
|
<p>© <span id="current-year">2025</span> All rights reserved. LaForce LLC</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Settings & Alerts Popups (if needed) -->
|
|
<!-- Add your popup HTML structures here -->
|
|
|
|
<!-- Your JavaScript comes here -->
|
|
<script>
|
|
// Set current year in footer
|
|
document.getElementById('current-year').textContent = new Date().getFullYear();
|
|
|
|
// Mobile menu toggle
|
|
const menuToggle = document.querySelector('.menu-toggle');
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
|
|
if (menuToggle && navMenu) {
|
|
menuToggle.addEventListener('click', function() {
|
|
navMenu.classList.toggle('active');
|
|
});
|
|
}
|
|
|
|
// Add any other JavaScript functionality you need
|
|
</script>
|
|
</body>
|
|
</html> |