Testing the push

app.js

@@ -0,0 +1,110 @@
+/**
+ * DCOS.NET Framework Logic
+ * Handles UI Injections, System Stats, and Terminal Simulation
+ */
+
+async function injectSharedUI() {
+    try {
+        // 1. Load Header Fragment
+        const hRes = await fetch('header.html');
+        document.getElementById('header-shared').innerHTML = await hRes.text();
+
+        // 2. Load Footer Fragment
+        const fRes = await fetch('footer.html');
+        document.getElementById('footer-shared').innerHTML = await fRes.text();
+
+        // 3. Trigger Post-Load Functions
+        fetchStats();
+        fetchTerm();
+    } catch (e) {
+        console.error("UI Fragment Load Failed:", e);
+    }
+}
+
+// Global System Stats (Geo & Git Metadata)
+
+async function fetchStats() {
+    // 1. Give the DOM a split second to breathe after fragment injection
+    setTimeout(async () => {
+        try {
+            // Fetch Version Metadata (Git Push Info)
+            const vRes = await fetch('version.json?t=' + Date.now());
+            if (vRes.ok) {
+                const vData = await vRes.json();
+                const pushElem = document.getElementById('last-push');
+                if (pushElem) pushElem.innerText = vData.last_deploy;
+            }
+
+            // Fetch Geo-Location (HTTPS IS REQUIRED)
+            const gRes = await fetch('https://ipapi.co/json/');
+            if (gRes.ok) {
+                const gData = await gRes.json();
+                const tickerElem = document.getElementById('visitor-ticker');
+                if (tickerElem) {
+                    // Using a formatted string: "City, Country Code"
+                    tickerElem.innerText = `${gData.city}, ${gData.country_code}`;
+                }
+            }
+        } catch (e) {
+            console.warn("DCOS_MONITOR: Stats satellite uplink failed.", e);
+            const tickerElem = document.getElementById('visitor-ticker');
+            if (tickerElem) tickerElem.innerText = "VPN_ENCRYPTED / ANONYMOUS";
+        }
+    }, 100); // 100ms delay ensures footer.html is rendered
+}
+
+// Terminal Simulation
+function fetchTerm() {
+    const logs = [
+        "> dcosnet --init --ai",
+        "> [OK] Kernel 7.0rc4 optimized",
+        "> [OK] libvirtd/LXC Containers active",
+        "> [OK] Caddy Reverse Proxy active",
+        "> [OK] Current project: Compiling...",
+        "> [READY] Systems stable since 1999"
+    ];
+
+    const container = document.getElementById('term-content');
+    if (!container) return; 
+
+    container.innerHTML = ''; // Clear any existing content
+    let i = 0;
+
+    function typeLog() {
+        if (i < logs.length) {
+            const line = document.createElement('div');
+            line.className = 'term-line';
+
+            // Re-applying the primary brand color to the success message
+            if (i === logs.length - 1) {
+                line.style.color = 'var(--primary)'; 
+                line.style.fontWeight = 'bold';
+            } else {
+                line.style.color = '#888';
+            }
+
+            container.appendChild(line);
+
+            let charIdx = 0;
+            const text = logs[i];
+
+            function char() {
+                if (charIdx < text.length) {
+                    line.textContent += text.charAt(charIdx);
+                    charIdx++;
+                    // SPEED TWEAK: 20ms is "high-speed" terminal style
+                    setTimeout(char, 20); 
+                } else {
+                    i++;
+                    // DELAY BETWEEN LINES: 300ms feels snappier than 600ms
+                    setTimeout(typeLog, 300); 
+                }
+            }
+            char();
+        }
+    }
+    typeLog();
+}
+
+// Initialize on page load
+window.onload = injectSharedUI;

footer.html

@@ -0,0 +1,23 @@
+<div class="status-terminal">
+    <div class="term-header">
+        <span style="background: #ff5f56; border: 1px solid #e0443e;"></span>
+        <span style="background: #ffbd2e; border: 1px solid #dea123;"></span>
+        <span style="background: #27c93f; border: 1px solid #1aab29;"></span>
+        <div style="margin-left: 5px; font-size: 0.6rem; color: #666; font-family: var(--font-mono);">dcos_monitor.sys</div>
+    </div>
+    <div class="term-body" id="term-content"></div>
+</div>
+<footer class="site-footer">
+    <div class="footer-grid">
+        <div>
+            <span class="stat-label">GIT:</span> <span class="status-pulse">●</span> <span id="live-status">OPERATIONAL</span>
+        </div>
+        <div>
+            <span class="stat-label">LAST_PUSH:</span> <span id="last-push">--:--</span>
+        </div>
+        <div>
+            <span class="stat-label">LAST_VISITOR:</span> <span id="visitor-ticker">...</span>
+        </div>
+        <div style="color: #333;">1998-2026 Copyright Jeremy Anderson (info@dcos.net)</div>
+    </div>
+</footer>

header.html

@@ -0,0 +1,6 @@
+<nav>
+    <a href="index.html" class="logo">DCOS.NET</a>
+    <div class="nav-links">
+        <a href="https://git.dcos.net">PROJECTS</a>
+    </div>
+</nav>

index.html

@@ -3,180 +3,50 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>DCOS.NET | Deep-Rooted Systems & Full Stack</title>
+    <title>DCOS.NET | Systems & Full Stack</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <style>
+    <link rel="stylesheet" href="style.css">
-        :root {
-            --primary: #FF5200;
-            --bg: #0f0f0f;
-            --card-bg: #1a1a1a;
-            --text: #e0e0e0;
-            --text-dim: #999;
-            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
-            --font-mono: 'JetBrains Mono', monospace;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { background: var(--bg); color: var(--text); font-family: var(--font-main); line-height: 1.6; }
-
-        /* --- Navigation --- */
-        nav {
-            position: fixed; top: 0; width: 100%; padding: 1.5rem 2rem;
-            display: flex; justify-content: space-between; align-items: center;
-            background: rgba(15, 15, 15, 0.8); backdrop-filter: blur(10px);
-            z-index: 100; border-bottom: 1px solid #333;
-        }
-        .logo { font-weight: 800; font-size: 1.4rem; color: var(--primary); font-family: var(--font-mono); }
-
-        /* --- Hero --- */
-        .hero {
-            height: 85vh; display: flex; flex-direction: column;
-            justify-content: center; align-items: center; text-align: center;
-            padding: 0 1rem; background: radial-gradient(circle at center, #221100 0%, #0f0f0f 70%);
-        }
-        .hero h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.1; margin-bottom: 1rem; font-weight: 800; }
-        .hero p { color: var(--text-dim); font-size: 1.2rem; max-width: 700px; margin-bottom: 2.5rem; }
-        .hero strong { color: var(--primary); font-family: var(--font-mono); font-weight: normal; }
-
-        /* --- Bento Grid --- */
-        .container { max-width: 1100px; margin: 0 auto; padding: 6rem 2rem; }
-        .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
-        .bento-item { 
-            background: var(--card-bg); border: 1px solid #333; border-radius: 12px; 
-            padding: 2.5rem; transition: 0.3s ease; 
-        }
-        .bento-item:hover { border-color: var(--primary); transform: translateY(-5px); }
-        .bento-item i { color: var(--primary); font-size: 1.8rem; margin-bottom: 1.5rem; display: block; }
-        .bento-item h3 { margin-bottom: 0.75rem; font-size: 1.2rem; }
-        .bento-item p { color: var(--text-dim); font-size: 0.95rem; }
-        .large { grid-column: span 2; }
-
-        /* --- Anchor Terminal (Bottom Right) --- */
-        .status-terminal {
-            position: fixed; bottom: 20px; right: 20px;
-            width: 320px; background: #000; border: 1px solid #444;
-            border-radius: 8px; font-family: var(--font-mono); font-size: 0.75rem;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.8); z-index: 200; overflow: hidden;
-        }
-        .term-header { background: #222; padding: 6px 10px; display: flex; gap: 5px; align-items: center; }
-        .term-header span { height: 8px; width: 8px; border-radius: 50%; background: #444; }
-        .term-body { padding: 12px; min-height: 100px; color: #aaa; }
-        .term-line { margin-bottom: 4px; border-right: 2px solid var(--primary); white-space: nowrap; overflow: hidden; }
-
-        @media (max-width: 768px) {
-            .bento-grid { grid-template-columns: 1fr; }
-            .large { grid-column: span 1; }
-            .status-terminal { display: none; } /* Hide on mobile for space */
-
-
-/* Mobile Fix: Targets screens smaller than 768px */
-@media (max-width: 768px) {
-    header {
-        position: relative; /* Prevents it from floating over content */
-        width: 100%;
-    }
-
-    h1 {
-        margin-top: 4.5rem; /* Pushes the text down away from the header */
-        line-height: 1.2;    /* Prevents overlapping if the text wraps */
-        padding: 0 15px;    /* Keeps text from hitting the screen edges */
-    }
-
-    /* If your header IS fixed, use this on your main container instead: */
-    main, .content {
-        padding-top: 80px; /* Match this to your header's actual height */
-    }
-}
-
-        }
-    </style>
 </head>
 <body>
-
+    <div id="header-shared"></div>
-<nav>
+    <main class="hero">
-    <div class="logo">DCOS.NET</div>
-    <div style="font-family: var(--font-mono); font-size: 0.8rem; color: #666;">EST. 1999</div>
-</nav>
-
-<section class="hero">
     <h1>Deep-Rooted Systems Expertise <br>for the Modern Web.</h1>
     <p>Solving complex <strong>Cloud Infrastructure</strong>, <strong>Full-Stack</strong>, and <strong>AI Integration</strong> challenges with 25+ years of experience.</p>
-    <a href="mailto:info@dcos.net" class="logo" style="text-decoration: none; border: 1px solid #333; padding: 10px 20px; border-radius: 5px;">GET A QUOTE</a>
+    <a href="mailto:info@dcos.net" style="text-decoration: none; border: 1px solid var(--primary); color: var(--primary); padding: 12px 24px; border-radius: 5px; font-family: var(--font-mono); font-size: 0.9rem;">REQUEST_QOUTE</a>
-</section>
+    </main>
-
+    <div class="container">
-<div class="container">
+        <div class="bento-grid">
-    <div class="bento-grid">
         <div class="bento-item large">
             <i class="fa-solid fa-microchip"></i>
-            <h3>Kernel & Systems Optimization</h3>
+            <h3>Systems Engineering</h3>
-            <p>Low-level GNU/Linux development including custom kernel configurations, hardened initscripts, and specialized device firmwares. Built for maximum hardware performance.</p>
+            <p>Low-level GNU/Linux development including custom kernel configurations, hardened initscripts, and specialized device firmwares. Built for maximum performance and function.</p>
+            <p>Gentoo, Sourcemage, Lunar, LEDE, ALFS/CLFS, Custom ToolChains.</p>
         </div>
         <div class="bento-item">
             <i class="fa-solid fa-brain"></i>
             <h3>AI & Automation</h3>
-            <p>Integrating LLM pipelines and intelligent automation into existing business stacks to streamline operations.</p>
+            <p>Integrating LLM pipelines (Ollama/PyTorch) and intelligent automation into existing business stacks.</p>
         </div>
         <div class="bento-item">
             <i class="fa-solid fa-server"></i>
             <h3>Virtualization</h3>
-            <p>Expert administration and deployment of KVM/Qemu environments. Scaling infrastructure from bare metal to the cloud.</p>
+            <p>Expert administration of libvirt/KVM, Proxmox, Incus environments. Scaling from bare metal to distributed cloud.</p>
+        </div>
+        <div class="bento-item large">
+            <i class="fa-solid fa-server"></i>
+            <h3>DevOPS/SRE</h3>
+            <p>Observability, Systems Monitoring, Quantitive analysis and Data Visualization. for Full Stack Visibility.</p>
+            <p>Prometheus, Grafana(stack).</p>
         </div>
         <div class="bento-item large">
             <i class="fa-solid fa-layer-group"></i>
             <h3>Hardened Cloud Infrastructure</h3>
-            <p>Domain registration, VPS orchestration, and high-performance stacks (LAMP/LEMP/Caddy). Comprehensive security hardening for production environments.</p>
+            <p>Caddy/Nginx orchestration, and high-performance stacks such as LAMP or LEMP. Comprehensive security hardening for production environments.</p>
+            <p>EB/IP/Arp/NF-tables, eBPF, ACLs, grsec/pax</p>
+        </div>
         </div>
     </div>
-</div>
+    <div id="footer-shared"></div>
-
+    <script src="app.js"></script>
-<div class="status-terminal">
-    <div class="term-header">
-        <span style="background:#ff5f56"></span><span style="background:#ffbd2e"></span><span style="background:#27c93f"></span>
-        <div style="margin-left: 5px; font-size: 0.6rem; color: #666;">dcos_monitor.sys</div>
-    </div>
-    <div class="term-body" id="term-content">
-        </div>
-</div>
-
-<script>
-    const logs = [
-        "> dcosnet --init --containers --ai",
-        "> [OK] GNU/Linux Kernel 7.0rc4 optimized",
-        "> [OK] LibVirtd Virtualization online",
-        "> [OK] LXC Containers online",
-        "> [OK] AI/Ollama Workflows active",
-        "> [READY] Systems stable since 1999"
-    ];
-
-    const container = document.getElementById('term-content');
-    let i = 0;
-
-    function typeLog() {
-        if (i < logs.length) {
-            const line = document.createElement('div');
-            line.className = 'term-line';
-            line.style.color = (i === logs.length - 1) ? '#FF5200' : '#888';
-            container.appendChild(line);
-            
-            let charIdx = 0;
-            const text = logs[i];
-            
-            function char() {
-                if (charIdx < text.length) {
-                    line.textContent += text.charAt(charIdx);
-                    charIdx++;
-                    setTimeout(char, 40);
-                } else {
-                    line.style.borderRight = "none";
-                    i++;
-                    setTimeout(typeLog, 600);
-                }
-            }
-            char();
-        }
-    }
-    window.onload = typeLog;
-</script>
-
 </body>
 </html>

style.css

@@ -0,0 +1,200 @@
+/* --- Global Variables & Reset --- */
+:root {
+    --primary: #FF5200;
+    --bg: #0f0f0f;
+    --card-bg: #1a1a1a;
+    --text: #e0e0e0;
+    --text-dim: #999;
+    --font-main: 'Inter', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+    --nav-height: 80px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body { 
+    background: var(--bg); 
+    color: var(--text); 
+    font-family: var(--font-main); 
+    line-height: 1.6; 
+    overflow-x: hidden;
+}
+
+/* --- Shared Navigation --- */
+nav {
+    position: fixed; 
+    top: 0; 
+    width: 100%; 
+    height: var(--nav-height);
+    padding: 0 2rem;
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+    background: rgba(15, 15, 15, 0.8); 
+    backdrop-filter: blur(12px);
+    z-index: 1000; 
+    border-bottom: 1px solid #333;
+}
+
+.logo { 
+    font-weight: 800; 
+    font-size: 1.4rem; 
+    color: var(--primary); 
+    font-family: var(--font-mono); 
+    text-decoration: none; 
+}
+
+.nav-links a { 
+    color: var(--text-dim); 
+    text-decoration: none; 
+    font-family: var(--font-mono); 
+    font-size: 0.8rem; 
+    margin-left: 20px; 
+    transition: 0.3s; 
+}
+
+.nav-links a:hover { color: var(--primary); }
+
+strong {
+    color: var(--primary);
+    font-family: var(--font-mono); /* Optional: gives it that technical 'code' feel */
+    font-weight: 600;
+    letter-spacing: -0.5px;
+}
+
+/* --- Hero Section --- */
+.hero {
+    height: 80vh; 
+    display: flex; 
+    flex-direction: column;
+    justify-content: center; 
+    align-items: center; 
+    text-align: center;
+    padding: var(--nav-height) 1rem 0 1rem; 
+    background: radial-gradient(circle at center, #221100 0%, #0f0f0f 80%);
+}
+
+.hero h1 { 
+    font-size: clamp(2.2rem, 8vw, 4.5rem); 
+    line-height: 1.1; 
+    margin-bottom: 1.5rem; 
+    font-weight: 800; 
+}
+
+.hero p { 
+    color: var(--text-dim); 
+    font-size: 1.2rem; 
+    max-width: 750px; 
+    margin-bottom: 2.5rem; 
+}
+
+.btn {
+    text-decoration: none; 
+    border: 1px solid var(--primary); 
+    color: var(--primary); 
+    padding: 14px 28px; 
+    border-radius: 4px; 
+    font-family: var(--font-mono); 
+    font-size: 0.9rem;
+    transition: 0.3s;
+}
+
+.btn:hover { background: var(--primary); color: #000; }
+
+/* --- Bento Grid --- */
+.container { 
+    max-width: 1100px; 
+    margin: 0 auto; 
+    padding: 4rem 2rem; 
+}
+
+.bento-grid { 
+    display: grid; 
+    grid-template-columns: repeat(3, 1fr); 
+    gap: 1.5rem; 
+}
+
+.bento-item { 
+    background: var(--card-bg); 
+    border: 1px solid #333; 
+    border-radius: 12px; 
+    padding: 2.5rem; 
+    transition: 0.3s ease; 
+}
+
+.bento-item:hover { border-color: var(--primary); transform: translateY(-5px); }
+
+.bento-item i { 
+    color: var(--primary); 
+    font-size: 2rem; 
+    margin-bottom: 1.5rem; 
+    display: block; 
+}
+
+.large { grid-column: span 2; }
+
+/* --- Status Terminal --- */
+.status-terminal {
+    position: fixed; 
+    bottom: 90px; 
+    right: 20px;
+    width: 300px; 
+    background: #000; 
+    border: 1px solid #444;
+    border-radius: 8px; 
+    font-family: var(--font-mono); 
+    font-size: 0.7rem;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.9); 
+    z-index: 500; 
+    overflow: hidden;
+}
+
+.term-header { background: #222; padding: 8px 12px; display: flex; gap: 6px; align-items: center; }
+.term-header span { height: 8px; width: 8px; border-radius: 50%; background: #444; }
+.term-body { padding: 12px; min-height: 100px; color: #777; line-height: 1.4; }
+
+/* --- Shared Footer --- */
+.site-footer {
+    background: #0a0a0a; 
+    border-top: 1px solid #222; 
+    padding: 1.5rem 2rem;
+    font-family: var(--font-mono); 
+    font-size: 0.7rem; 
+    color: #444;
+}
+
+.footer-grid { 
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center;
+    max-width: 1100px; 
+    margin: 0 auto; 
+}
+
+.stat-label { color: var(--primary); font-weight: bold; margin-right: 4px; }
+.status-pulse { color: #27c93f; animation: pulse 2s infinite; }
+
+@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
+
+/* --- Mobile Fixes --- */
+@media (max-width: 768px) {
+    nav { padding: 0 1rem; }
+    .nav-links { display: none; } /* Simplified for mobile */
+    
+    .hero { 
+        height: auto; 
+        padding: 120px 1.5rem 60px 1.5rem; 
+    }
+    
+    .bento-grid { grid-template-columns: 1fr; }
+    .large { grid-column: span 1; }
+    
+    .status-terminal { display: none; } /* Keep mobile clean */
+    
+    .footer-grid { 
+        flex-direction: column; 
+        gap: 10px; 
+        text-align: left; 
+        align-items: flex-start; 
+    }
+}