Initial commit: konn3kt docs

assets/nav.js

@@ -0,0 +1,73 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Add Favicon
+    const favicon = document.createElement('link');
+    favicon.rel = 'icon';
+    favicon.href = 'https://konn3kt.teallvbs.xyz/logo.jpeg';
+    document.head.appendChild(favicon);
+
+    // Generate Sidebar HTML
+    const sidebarHtml = `
+        <div class="sidebar-header">
+            <div class="sidebar-logo"><img src="https://konn3kt.teallvbs.xyz/logo.jpeg" alt="k"></div>
+            <div class="sidebar-title">konn3kt</div>
+        </div>
+        <nav class="sidebar-nav">
+            <a href="index.html" class="nav-item" data-page="index">Introduction</a>
+            <a href="getting-started.html" class="nav-item" data-page="getting-started">Getting Started</a>
+            <a href="pairing.html" class="nav-item" data-page="pairing">Pairing Your Device</a>
+            <a href="dashboard.html" class="nav-item" data-page="dashboard">Dashboard Overview</a>
+            <a href="device-overview.html" class="nav-item" data-page="device-overview">Device Overview</a>
+            <a href="drive-playback.html" class="nav-item" data-page="drive-playback">Drive Playback</a>
+            <a href="files-view.html" class="nav-item" data-page="files-view">Files & Data</a>
+            <a href="live-view.html" class="nav-item" data-page="live-view">Live View & Tools</a>
+            <a href="mobile-interface.html" class="nav-item" data-page="mobile-interface">Mobile Interface</a>
+            <a href="settings.html" class="nav-item" data-page="settings">Device Settings</a>
+        </nav>
+    `;
+
+    const sidebar = document.createElement('aside');
+    sidebar.className = 'sidebar';
+    sidebar.innerHTML = sidebarHtml;
+    document.querySelector('.layout').insertBefore(sidebar, document.querySelector('.main-content'));
+
+    // Highlight active link
+    const path = window.location.pathname.split('/').pop();
+    const currentPage = path.replace('.html', '') || 'index';
+    const activeLink = document.querySelector(`.nav-item[data-page="${currentPage}"]`);
+    if (activeLink) {
+        activeLink.classList.add('active');
+    }
+
+    // Add Footer
+    const footer = document.createElement('footer');
+    footer.innerHTML = `
+        <div class="footer-top">
+            <div class="footer-logo">
+                <img src="https://konn3kt.teallvbs.xyz/logo.jpeg" alt="konn3kt logo" class="footer-logo-img">
+                <span class="footer-logo-text">Konn3kt</span>
+            </div>
+            <p class="footer-tagline">Join today, we are live! Built for the community with <span style="color: #ef4444;">&hearts;</span></p>
+            <a href="https://discord.konn3kt.com" class="footer-link">discord.konn3kt.com</a>
+        </div>
+        <div class="footer-divider"></div>
+        <div class="footer-bottom">
+            <div class="footer-copyright">
+                <p>Copyright 2026 Teal Lvbs Inc. All rights reserved.</p>
+                <p class="footer-disclaimer">IQ.Pilot is a trademark of Teal Lvbs Inc. Konn3kt is a third-party service and is not affiliated with, endorsed by, or associated with comma.ai. "openpilot" is a trademark of comma.ai. All other trademarks are the property of their respective owners.</p>
+            </div>
+            <div class="footer-links">
+                <a href="https://konn3kt.com/privacy">Privacy</a>
+                <a href="https://konn3kt.com/tos">Terms</a>
+                <a href="https://konn3kt.com/tos">Cookies</a>
+            </div>
+        </div>
+    `;
+    document.querySelector('.main-content').appendChild(footer);
+
+    // Mobile toggle
+    const toggleBtn = document.createElement('button');
+    toggleBtn.className = 'mobile-toggle';
+    toggleBtn.innerHTML = 'Menu';
+    document.body.appendChild(toggleBtn);
+    toggleBtn.addEventListener('click', () => sidebar.classList.toggle('open'));
+});

assets/style.css

@@ -0,0 +1,430 @@
+@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --bg-main: #020203;
+    --bg-card: #0c0c0e;
+    --bg-card-hover: #121214;
+    --text-main: #ffffff;
+    --text-muted: #a1a1aa; /* zinc-400 */
+    --text-darker: #71717a; /* zinc-500 */
+    --accent: #10b981; /* emerald-500 */
+    --accent-glow: rgba(16, 185, 129, 0.4);
+    --border-color: rgba(255, 255, 255, 0.05);
+    --border-color-hover: rgba(255, 255, 255, 0.1);
+    --font-family: 'Oxanium', system-ui, -apple-system, sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: var(--bg-main);
+    color: var(--text-main);
+    font-family: var(--font-family);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
+}
+
+/* Layout */
+.layout {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar Navigation */
+.sidebar {
+    width: 280px;
+    background-color: rgba(12, 12, 14, 0.8);
+    backdrop-filter: blur(20px);
+    border-right: 1px solid var(--border-color);
+    position: fixed;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+}
+
+.sidebar-header {
+    padding: 2.5rem 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.sidebar-logo {
+    width: 42px;
+    height: 42px;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 0 20px var(--accent-glow);
+}
+
+.sidebar-logo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.sidebar-title {
+    font-size: 1.4rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    background: linear-gradient(to bottom right, #fff, #a1a1aa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.sidebar-nav {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.nav-item {
+    padding: 0.85rem 1rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    border-radius: 12px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    font-weight: 500;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.nav-item:hover {
+    background-color: rgba(255, 255, 255, 0.03);
+    color: var(--text-main);
+}
+
+.nav-item.active {
+    background-color: rgba(255, 255, 255, 0.05);
+    color: var(--accent);
+    font-weight: 600;
+}
+
+/* Mobile toggle button */
+.mobile-toggle {
+    display: none;
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1000;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    margin-left: 280px;
+    padding: 4rem 5rem;
+    max-width: 1200px;
+    display: flex;
+    flex-direction: column;
+}
+
+.page-header {
+    margin-bottom: 4rem;
+}
+
+.page-title {
+    font-size: 3.5rem;
+    font-weight: 900;
+    letter-spacing: -0.05em;
+    margin-bottom: 0.75rem;
+    background: linear-gradient(to bottom right, #fff, #71717a);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.page-subtitle {
+    color: var(--text-muted);
+    font-size: 1.25rem;
+    max-width: 600px;
+}
+
+/* Typography */
+h2 {
+    font-size: 2rem;
+    margin: 4rem 0 1.5rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    color: #fff;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+h3 {
+    font-size: 1.4rem;
+    margin: 2.5rem 0 1rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+p {
+    margin-bottom: 1.5rem;
+    color: var(--text-muted);
+    font-size: 1.05rem;
+}
+
+/* UI Components */
+.button-desc {
+    background: #0f0f11;
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.btn-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 99px;
+    font-size: 0.85rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: #18181b;
+    border: 1px solid rgba(255,255,255,0.1);
+    color: #fff;
+    width: fit-content;
+}
+
+.btn-pill.accent {
+    background: var(--accent);
+    color: #000;
+    border: none;
+    box-shadow: 0 0 15px var(--accent-glow);
+}
+
+.callout {
+    background: linear-gradient(145deg, rgba(16, 185, 129, 0.05), rgba(0, 0, 0, 0));
+    border: 1px solid rgba(16, 185, 129, 0.1);
+    border-left: 4px solid var(--accent);
+    padding: 1.5rem 2rem;
+    border-radius: 16px;
+    margin: 2rem 0;
+}
+
+.callout strong {
+    color: var(--text-main);
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 1.1rem;
+}
+
+/* Steps */
+.step-list {
+    counter-reset: step;
+    list-style: none;
+}
+
+.step-list > li {
+    position: relative;
+    padding-left: 4rem;
+    margin-bottom: 2.5rem;
+}
+
+.step-list > li::before {
+    counter-increment: step;
+    content: counter(step);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 42px;
+    height: 42px;
+    background: #18181b;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    color: var(--accent);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+}
+
+/* Code Blocks */
+pre {
+    background: #000;
+    border: 1px solid var(--border-color);
+    padding: 1.5rem;
+    border-radius: 16px;
+    overflow-x: auto;
+    margin: 2rem 0;
+    color: #e4e4e7;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.95rem;
+}
+
+code {
+    background: rgba(255,255,255,0.05);
+    padding: 0.2rem 0.4rem;
+    border-radius: 6px;
+    font-family: inherit;
+    font-size: 0.9em;
+}
+
+/* Footer */
+footer {
+    margin-top: auto;
+    padding-top: 4rem;
+    padding-bottom: 3rem;
+    color: var(--text-darker);
+    font-size: 0.9rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.footer-top {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.footer-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 800;
+    color: #fff;
+}
+
+.footer-logo-img {
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    object-fit: cover;
+}
+
+.footer-tagline {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    margin: 0;
+}
+
+.footer-link {
+    color: var(--accent);
+    font-weight: 500;
+    text-decoration: none;
+    font-size: 0.95rem;
+}
+
+.footer-link:hover {
+    text-decoration: underline;
+}
+
+.footer-divider {
+    height: 1px;
+    background: var(--border-color);
+    width: 100%;
+}
+
+.footer-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 2rem;
+}
+
+.footer-copyright {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 800px;
+}
+
+.footer-copyright p {
+    margin: 0;
+    font-size: 0.85rem;
+    color: var(--text-darker);
+}
+
+.footer-disclaimer {
+    font-size: 0.75rem !important;
+    line-height: 1.4;
+}
+
+.footer-links {
+    display: flex;
+    gap: 1.5rem;
+}
+
+.footer-links a {
+    color: var(--text-darker);
+    text-decoration: none;
+    font-size: 0.85rem;
+    transition: color 0.2s;
+}
+
+.footer-links a:hover {
+    color: var(--text-muted);
+}
+
+@media (max-width: 768px) {
+    .footer-bottom {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1.5rem;
+    }
+}
+
+/* Grid */
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+    margin: 2.5rem 0;
+}
+
+.card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    padding: 2rem;
+    border-radius: 20px;
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    border-color: var(--accent);
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+}
+
+@media (max-width: 1024px) {
+    .main-content {
+        margin-left: 0;
+        padding: 3rem 2rem;
+    }
+    .sidebar {
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+    }
+    .sidebar.open {
+        transform: translateX(0);
+    }
+    .mobile-toggle {
+        display: block;
+    }
+}