feat: add dashboard, sandbox pages and related assets
This commit is contained in:
parent
e2193b0c9e
commit
eb55bde50d
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,190 @@
|
|||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 584 KiB |
|
|
@ -493,7 +493,7 @@
|
|||
<span class="btn-icon"><i class="fas fa-arrow-right"></i></span>
|
||||
</a>
|
||||
|
||||
<a href="https://www.argobox.com" class="btn btn-outline" target="_blank">
|
||||
<a href="https://www.argobox.com/homelab" class="btn btn-outline" target="_blank">
|
||||
<span class="btn-text">Explore My Lab</span>
|
||||
<span class="btn-icon"><i class="fas fa-server"></i></span>
|
||||
</a>
|
||||
|
|
@ -854,7 +854,7 @@
|
|||
<!-- Dedicated Server & Hypervisor Management -->
|
||||
<div class="project-card" data-categories="servers infrastructure sysadmin linux">
|
||||
<div class="project-image">
|
||||
<img src="images/data-center/cages.jpeg" alt="Dedicated Server Management"> <!-- Relevant image -->
|
||||
<img src="images/dedi/dedi.jpeg" alt="Dedicated Server Management"> <!-- Relevant image -->
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3 class="project-title">Dedicated Server & Hypervisor Management</h3>
|
||||
|
|
@ -934,7 +934,7 @@
|
|||
<span class="skill-tag">SEO</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="https://blog.laforceit.com" class="project-link" target="_blank">View Example <i class="fas fa-external-link-alt"></i></a>
|
||||
<a href="https://argobox.com/blog" class="project-link" target="_blank">View Example <i class="fas fa-external-link-alt"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue