website first launch
This commit is contained in:
commit
f4f79fbfe3
|
|
@ -0,0 +1,182 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-gb">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>DCOS.NET | Deep-Rooted 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>
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue