Compare commits
2 Commits
f4f79fbfe3
...
b3ca852906
| Author | SHA1 | Date |
|---|---|---|
 Jeremy Anderson
|
b3ca852906 | |
|
Jeremy Anderson
|
2f27825dd5 |
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
178
index.html
178
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>
|
||||
: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>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<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">
|
||||
<div id="header-shared"></div>
|
||||
<main 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>
|
||||
</section>
|
||||
|
||||
<div class="container">
|
||||
<div class="bento-grid">
|
||||
<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>
|
||||
</main>
|
||||
<div class="container">
|
||||
<div class="bento-grid">
|
||||
<div class="bento-item large">
|
||||
<i class="fa-solid fa-microchip"></i>
|
||||
<h3>Kernel & Systems Optimization</h3>
|
||||
<p>Low-level GNU/Linux development including custom kernel configurations, hardened initscripts, and specialized device firmwares. Built for maximum hardware performance.</p>
|
||||
<h3>Systems Engineering</h3>
|
||||
<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 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>
|
||||
|
||||
<div id="footer-shared"></div>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue