Initial commit: konn3kt docs

Dockerfile

@@ -0,0 +1,7 @@
+FROM nginx:alpine
+
+# Copy the static documentation files into the Nginx default html directory
+COPY . /usr/share/nginx/html
+
+# Expose port 80 inside the container
+EXPOSE 80

README.md

@@ -0,0 +1,21 @@
+# konn3kt Documentation
+
+This folder contains the complete, standalone HTML/CSS/JS documentation website for end-users of the konn3kt web frontend.
+
+## Structure
+- `index.html`: Landing page / Introduction
+- `getting-started.html`: Account creation and login
+- `pairing.html`: Device pairing flows (QR and Manual)
+- `dashboard.html`: Navigating the main view
+- `devices.html`: Device management and live telemetry
+- `trips.html`: Route playback and history
+- `settings.html`: User preferences
+- `troubleshooting.html`: Common device issues
+- `faq.html`: Glossary and the konn3kt STANDARD plan details
+- `assets/`: Shared styles (`style.css`) and navigation logic (`nav.js`)
+
+## Usage
+Simply open `index.html` in any modern web browser to view the documentation. No local web server is required, as all links and assets are relative.
+
+## Design
+The site was designed to perfectly match the dark-themed, glassmorphic aesthetic of the konn3kt platform, utilizing CSS variables for easy theming and maintaining brand consistency.

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;
+    }
+}

dashboard.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard Overview - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Dashboard Overview</h1>
+                <p class="page-subtitle">Manage all your IQ.Pilot devices from one place.</p>
+            </header>
+
+            <section>
+                <h2>The Device Grid</h2>
+                <p>The Dashboard is designed for high-density information display. Each card in the grid represents an IQ.Pilot device paired to your account.</p>
+                
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>Device Identity</h3>
+                        <p>Shows the <strong>Alias</strong> (which you can change in settings) and the unique 16-character <strong>Dongle ID</strong>.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Live Status</h3>
+                        <p>An <strong>Online/Offline</strong> badge pulses when the device is active. You can also see the current <strong>IQ.Pilot version</strong> and hardware <strong>Maker</strong> (for example, Comma or other supported clone hardware).</p>
+                    </div>
+                    <div class="card">
+                        <h3>Location Snapshot</h3>
+                        <p>If GPS data is available, a mini-map shows the device's last known location with a precise timestamp.</p>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>Quick Actions</h2>
+                <ul class="step-list">
+                    <li><strong>Enter Device:</strong> Click anywhere on a device card to open its full <strong>Device Overview</strong>.</li>
+                    <li><strong>Add Device:</strong> Use the <strong>+ Pair Device</strong> button to link new hardware.</li>
+                    <li><strong>Search:</strong> Use the search bar (if available) to filter your devices by name or Dongle ID.</li>
+                </ul>
+
+                <div class="callout">
+                    <strong>📱 Mobile Users:</strong> The dashboard experience is heavily optimized for your phone. Check out the <a href="mobile-interface.html">Mobile Interface Guide</a> to see how the Home screen acts as your mobile command center.
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

device-overview.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Device Overview - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Device Overview</h1>
+                <p class="page-subtitle">Real-time health, statistics, and activity tracking for your IQ.Pilot device.</p>
+            </header>
+
+            <section>
+                <h2>Real-Time Metrics</h2>
+                <p>The Overview dashboard provides a high-fidelity look at your vehicle's current state and your hardware's health.</p>
+                
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>Fuel / Energy</h3>
+                        <p>A live gauge of your fuel tank or EV battery. It displays the remaining volume (e.g., "5 Liters") and status (e.g., "Offroad").</p>
+                    </div>
+                    <div class="card">
+                        <h3>Car Battery</h3>
+                        <p>Displays the voltage of your vehicle's 12V system. If the car is off, it may show "USB Power" or a standby voltage (e.g., "5.0V").</p>
+                    </div>
+                    <div class="card">
+                        <h3>Hardware Temp</h3>
+                        <p>Monitor the CPU temperature (e.g., "44°C") to ensure optimal performance and prevent hardware throttling.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Storage & Network</h3>
+                        <p>Track "Free Space" (e.g., "11%") and your current connection type (e.g., "WiFi Connected").</p>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>Performance Stats</h2>
+                <div class="card-grid">
+                    <div class="card">
+                        <h3 style="color: #10b981;">Total Miles</h3>
+                        <p style="font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 0;">10,356</p>
+                    </div>
+                    <div class="card">
+                        <h3 style="color: #3b82f6;">Total Drives</h3>
+                        <p style="font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 0;">589</p>
+                    </div>
+                    <div class="card">
+                        <h3 style="color: #a855f7;">Total Hours</h3>
+                        <p style="font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 0;">294</p>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>Weekly Activity</h2>
+                <p>The <strong>Weekly Activity</strong> chart visualizes your driving frequency. It maps "Miles Driven" across the week, helping you understand your vehicle's usage trends at a glance.</p>
+            </section>
+
+            <section>
+                <h2>The Drives List</h2>
+                <p>All recorded trips are listed at the bottom of the overview. Each entry is a self-contained summary of a drive.</p>
+                
+                <div class="button-desc">
+                    <div class="btn-pill">START / END</div>
+                    <p>Displays the date and time of the drive, the distance covered, and the duration. The icon on the left indicates if the route has GPS data.</p>
+                </div>
+
+                <div class="button-desc">
+                    <div class="btn-pill">Arrow Icon (>)</div>
+                    <p>Located on the far right of each drive entry. Click this to transition into the <strong>Drive Playback</strong> view for deep analysis of that specific route.</p>
+                </div>
+
+                <div class="callout">
+                    <strong>Filtering:</strong> Use the tabs above the list to filter by <strong>All</strong>, <strong>Preserved</strong> (trips you've starred), or <strong>Has Video</strong>.
+                </div>
+
+                <div class="callout">
+                    <strong>📱 Mobile Users:</strong> Need to check your stats on the go? See how the <a href="mobile-interface.html">Mobile Device Stats</a> view breaks down this exact data for your phone.
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

devices.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Device Management - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Device Management</h1>
+                <p class="page-subtitle">Deep dive into your device's telemetry, status, and features.</p>
+            </header>
+
+            <section>
+                <h2>Device Detail View</h2>
+                <p>Clicking on a device from the Dashboard takes you to its detailed view. Here, you get access to an array of live and historical information about your vehicle and openpilot hardware.</p>
+            </section>
+
+            <section>
+                <h2>Live Telemetry & Status</h2>
+                <p>When your device is online, konn3kt pulls live metrics directly from it. Depending on your hardware and vehicle type, you may see:</p>
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>Hardware Health</h3>
+                        <p>Monitor CPU temperatures, GPU temperatures, memory usage, and available storage space to ensure your device isn't overheating or running out of room for logs.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Battery & Power</h3>
+                        <p>Check the device's battery percentage and status, as well as the 12V car battery voltage to detect potential low-voltage issues.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Vehicle Specifics</h3>
+                        <p>For compatible vehicles, view fuel tank levels, EV battery percentage, charging status, and even EV battery temperatures.</p>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>Remote Controls (Live View)</h2>
+                <p>If your vehicle supports remote commands (such as specific Tesla or VW PQ platforms), you can access the <strong>Live View</strong> section to issue commands securely over the air. Available commands may include:</p>
+                <ul>
+                    <li>Locking and unlocking doors</li>
+                    <li>Flashing headlights or honking the horn</li>
+                    <li>Opening/closing charge ports, trunks, or frunks</li>
+                    <li>Controlling climate or window venting</li>
+                </ul>
+                <div class="callout warning">
+                    <strong>Safety First:</strong> Always ensure it is safe to issue remote commands. Never trigger actions like opening a trunk if the vehicle is in an unsafe location or moving.
+                </div>
+            </section>
+
+            <section>
+                <h2>File Browser & Screen Recordings</h2>
+                <p>konn3kt gives you direct access to the files stored on your openpilot device:</p>
+                <ul>
+                    <li><strong>File Browser:</strong> Navigate the internal storage of your device remotely. You can view, download, or manage raw logs and video files directly from the web interface.</li>
+                    <li><strong>Screen Recordings:</strong> Access on-device screen recordings captured during drives.</li>
+                </ul>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3.8'
+
+services:
+  docs:
+    image: nginx:alpine
+    container_name: konn3kt_docs
+    ports:
+      - "8708:80"
+    volumes:
+      - .:/usr/share/nginx/html:ro
+    restart: unless-stopped

drive-playback.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Drive Playback - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Drive Playback</h1>
+                <p class="page-subtitle">Deep analysis of your journeys with high-fidelity telemetry and video.</p>
+            </header>
+
+            <section>
+                <h2>The Playback Command Center</h2>
+                <p>Clicking into a drive opens a synchronized replay environment. This view reconstructs your trip using all available sensors and camera feeds.</p>
+            </section>
+
+            <section>
+                <h2>Interface Components</h2>
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>Synchronized Video</h3>
+                        <p>Toggle between road-facing and wide-angle cameras. The video player is frame-locked to the GPS map and the event timeline.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Interactive Route Map</h3>
+                        <p>View your exact path traced in your signature accent color. Interactive markers show where system events occurred.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Event Timeline</h3>
+                        <p>A chronologically sorted list of alerts, disengagements, and flags. Clicking an event instantly "seeks" the video and map to that moment.</p>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>Event Types</h2>
+                <p>IQ.Pilot captures specific categories of data during your drive:</p>
+                <ul>
+                    <li><strong style="color: #10b981;">Engage:</strong> Successful activation of IQ.Pilot systems.</li>
+                    <li><strong style="color: #ef4444;">Disengage:</strong> When manual steering or braking was detected.</li>
+                    <li><strong style="color: #f59e0b;">Alerts:</strong> Critical system warnings (e.g., "Steer Saturated" or "Take Control").</li>
+                    <li><strong style="color: #3b82f6;">Flags:</strong> Moments you manually marked for review.</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Route Management</h2>
+                <p>Use the toolbar buttons to manage the current route:</p>
+                <div class="button-desc">
+                    <div class="btn-pill">Preserve (Star)</div>
+                    <p>Mark the route to prevent it from being automatically deleted during device storage cleanup.</p>
+                </div>
+                <div class="button-desc">
+                    <div class="btn-pill">Share</div>
+                    <p>Generate a secure, expiring link to share this specific drive with others.</p>
+                </div>
+                <div class="button-desc">
+                    <div class="btn-pill accent">Public</div>
+                    <p>Toggle whether this route can be viewed by anyone with the link or remains private to your account.</p>
+                </div>
+
+                <div class="callout">
+                    <strong>📱 Mobile Users:</strong> The entire playback suite works flawlessly on your phone. You can scrub the timeline, view the interactive map, and read events all from the <a href="mobile-interface.html">Mobile Route Playback</a> view.
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

faq.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FAQ & Glossary - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">FAQ & Glossary</h1>
+                <p class="page-subtitle">Common questions and ecosystem terminology.</p>
+            </header>
+
+            <section>
+                <h2>The konn3kt STANDARD Plan</h2>
+                <p>The Standard plan provides every user with a comprehensive set of tools to manage their hardware:</p>
+                <ul>
+                    <li><strong>Full History:</strong> Unlimited route browsing and playback.</li>
+                    <li><strong>Remote Tools:</strong> Live snapshots, terminal access, and vehicle controls.</li>
+                    <li><strong>Secure Storage:</strong> Cloud storage for your preserved routes and clips.</li>
+                    <li><strong>Unified View:</strong> Manage Comma devices and clones from a single interface.</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Glossary</h2>
+                <div class="callout">
+                    <strong>IQ.Pilot</strong>
+                    <p>The advanced vehicle control software that powers your device. konn3kt is built to work exclusively with the IQ.Pilot ecosystem.</p>
+                </div>
+                <div class="callout">
+                    <strong>Dongle ID</strong>
+                    <p>A unique 16-character hexadecimal identifier for your device. This ID is <strong>preserved</strong> even if you switch between different management platforms.</p>
+                </div>
+                <div class="callout">
+                    <strong>Self-Hosted Node</strong>
+                    <p>An optional storage server you can run yourself. konn3kt can manage these nodes, allowing your device to upload data directly to your own hardware while still using the konn3kt dashboard for viewing.</p>
+                </div>
+                <div class="callout">
+                    <strong>Athena</strong>
+                    <p>The secure communication protocol used for live status updates and remote commands between konn3kt and your IQ.Pilot device.</p>
+                </div>
+                <div class="callout">
+                    <strong>User Flag</strong>
+                    <p>A marker created while driving (usually by tapping the device screen). These flags appear on your playback timeline so you can easily find interesting moments.</p>
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

files-view.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Files & Data - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Files & Data</h1>
+                <p class="page-subtitle">Understanding how konn3kt handles your drive data and uploads.</p>
+            </header>
+
+            <section>
+                <h2>Upload Logic</h2>
+                <p>konn3kt is designed to balance data usage with visibility. The system follows these specific rules for uploading your drive data:</p>
+                <div class="callout">
+                    <strong>Dashcam Streaming:</strong> konn3kt <strong>ONLY</strong> uploads dashcam video while you are <strong>onroad</strong> if your device has an active internet connection and you have enabled "Cellular Uploads" in the Device Settings.
+                </div>
+                <p>When the drive is complete or a connection is established, konn3kt uploads all relevant logs and video files to ensure a complete record of your journey:</p>
+                <ul>
+                    <li><strong>fcam / ecam:</strong> Full-resolution road and wide camera feeds.</li>
+                    <li><strong>dcam:</strong> Driver camera feed. <em>(Note: dcam is <strong>always encrypted at rest</strong> for your privacy.)</em></li>
+                    <li><strong>qcam:</strong> Quantized dashcam video for fast web previews.</li>
+                    <li><strong>qlog:</strong> Quantized system logs for quick timeline and telemetry generation.</li>
+                    <li><strong>rlog:</strong> Raw, high-resolution system logs.</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Managing Segments</h2>
+                <p>The Files view displays every data segment captured by your IQ.Pilot device. You can interact with these segments using the following tools:</p>
+
+                <div class="button-desc">
+                    <div class="btn-pill">File Browser</div>
+                    <p><strong>Use when:</strong> You need to perform deep file management. This tool opens a remote window into the device's internal folder structure (e.g., <code>/data/media</code>), allowing you to browse and download specific files directly.</p>
+                </div>
+
+                <div class="button-desc">
+                    <div class="btn-pill">Request RLogs</div>
+                    <p><strong>Use when:</strong> You need the full raw logs for debugging or advanced analysis. This command instructs the device to prioritize the upload of <code>rlog</code> files for the selected segment.</p>
+                </div>
+
+                <div class="button-desc">
+                    <div class="btn-pill accent">Request Missing Files</div>
+                    <p><strong>Use when:</strong> You notice a trip is missing video or log data. This command tells the device to re-scan its internal storage and upload any data fragments that were missed during the initial transfer.</p>
+                </div>
+
+                <div class="callout">
+                    <strong>📱 Mobile Users:</strong> You can download individual segment files (like <code>qcamera.ts</code>) directly to your camera roll or navigate the entire filesystem via the <a href="mobile-interface.html">Mobile File Browser</a>.
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

getting-started.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Getting Started - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Getting Started</h1>
+                <p class="page-subtitle">Creating an account and accessing konn3kt.</p>
+            </header>
+
+            <section>
+                <h2>How to Sign Up</h2>
+                <p>Registration for konn3kt is managed through the official <strong>konn3kt Discord</strong>. This ensures a secure and community-focused environment for all users.</p>
+                
+                <ol class="step-list">
+                    <li>Join the <a href="https://discord.konn3kt.com">konn3kt Discord</a>.</li>
+                    <li>Follow the instructions in the Discord to obtain access to our applications and the konn3kt platform.</li>
+                    <li>Once registered, you can sign in at <a href="https://konn3kt.teallvbs.xyz">konn3kt.teallvbs.xyz</a>.</li>
+                </ol>
+            </section>
+
+            <section>
+                <h2>Signing In</h2>
+                <p>konn3kt supports several secure sign-in providers. You should use the account linked during your Discord registration process.</p>
+                <ul>
+                    <li><strong>Sign in with GitHub</strong> (Preferred for developers and community members)</li>
+                    <li><strong>Sign in with Google</strong></li>
+                    <li><strong>Sign in with Apple</strong></li>
+                </ul>
+                <div class="callout">
+                    <strong>Note:</strong> Your account acts as a unified portal for all your paired IQ.Pilot devices and any self-hosted storage nodes you choose to deploy.
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

index.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Introduction - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">konn3kt</h1>
+                <p class="page-subtitle">Unified management for the IQ.Pilot ecosystem.</p>
+            </header>
+
+            <section>
+                <h2>What is konn3kt?</h2>
+                <p><strong>konn3kt</strong> is the official web frontend for the IQ.Pilot ecosystem, providing a professional-grade command center for your <strong>IQ.Pilot</strong> devices. It allows you to monitor telemetry, review drive history, and control your vehicle remotely via a secure, high-performance interface at <a href="https://konn3kt.teallvbs.xyz">konn3kt.teallvbs.xyz</a>.</p>
+                
+                <p>Designed to work exclusively with IQ.Pilot, konn3kt supports genuine Comma hardware (3x, 4) alongside supported community clone hardware such as Mr One devices and other IQ.Pilot-compatible builds.</p>
+            </section>
+
+            <section>
+                <h2>Quick Links</h2>
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>Official Discord</h3>
+                        <p>Join our community to get access to our apps and sign up for konn3kt access.</p>
+                        <a href="https://discord.konn3kt.com">Join Discord</a>
+                    </div>
+                    <div class="card">
+                        <h3>IQ.Pilot Wiki</h3>
+                        <p>Read the official installation guide to get IQ.Pilot running on your device.</p>
+                        <a href="https://iqlvbs.com/wiki/iqpilot">Installation Guide</a>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>Standard Features</h2>
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>Advanced Telemetry</h3>
+                        <p>Real-time tracking of hardware health, car battery voltage, and fuel/EV levels.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Secure Data</h3>
+                        <p>All data is encrypted at rest, with specific layers of protection for sensitive streams like dcam (Driver Camera).</p>
+                    </div>
+                    <div class="card">
+                        <h3>Remote Access</h3>
+                        <p>Issue vehicle commands, access a web terminal (SSH), and capture snapshots over-the-air.</p>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

live-view.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Live View & Tools - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Live View & Tools</h1>
+                <p class="page-subtitle">Real-time remote interaction with your IQ.Pilot device.</p>
+            </header>
+
+            <section>
+                <h2>Live Connectivity</h2>
+                <p>The Live View tab establishes a direct bridge to your hardware. It is used for remote monitoring and advanced system diagnostics.</p>
+            </section>
+
+            <section>
+                <h2>On-Demand Commands</h2>
+                <p>Trigger immediate actions on your device regardless of its current state.</p>
+                
+                <div class="button-desc">
+                    <div class="btn-pill accent">Connect (Live Stream)</div>
+                    <p><strong>How to use:</strong> Click to open a low-latency video stream. This allows you to see the live feed from the device's road or cabin cameras remotely.</p>
+                </div>
+
+                <div class="button-desc">
+                    <div class="btn-pill">Snapshot</div>
+                    <p><strong>How to use:</strong> Click to capture a high-resolution image from the current camera view. The image is uploaded and displayed in the dashboard instantly.</p>
+                </div>
+
+                <div class="button-desc">
+                    <div class="btn-pill accent">Upload</div>
+                    <p><strong>How to use:</strong> Force the device to begin uploading its current logs and media segments immediately, bypassing the standard schedule.</p>
+                </div>
+            </section>
+
+            <section>
+                <h2>Advanced Remote Tools</h2>
+                <p>For deep system interaction, konn3kt provides two professional interfaces:</p>
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>Web Terminal (SSH)</h3>
+                        <p>Established a secure shell session directly in your browser. Use this to run linux commands on your IQ.Pilot hardware. <em>Note: "WebSSH" must be enabled in settings.</em></p>
+                    </div>
+                    <div class="card">
+                        <h3>Live Messages</h3>
+                        <p>Streams the raw system bus data. Observe real-time alerts, state changes, and sensor outputs as they are generated by the device.</p>
+                    </div>
+                </div>
+                
+                <div class="callout">
+                    <strong>📱 Mobile Users:</strong> The Live View stream, Snapshot captures, and even the full SSH Web Terminal (complete with a custom shortcut keyboard) are fully accessible from your phone! See the <a href="mobile-interface.html">Mobile Live View & Tools</a> guide.
+                </div>
+            </section>
+
+            <section>
+                <h2>Vehicle Controls</h2>
+                <p>If your vehicle supports remote commands via CAN, a control panel will appear. Use the icons to remotely lock/unlock doors, flash lights, or control the climate. Always verify safety before issuing physical commands.</p>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

mobile-interface.html

@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mobile Interface - konn3kt Documentation</title>
+    <link rel="icon" href="https://konn3kt.teallvbs.xyz/logo.jpeg">
+    <link rel="stylesheet" href="assets/style.css">
+    <style>
+        .mobile-showcase {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 3rem;
+            margin-top: 2rem;
+            margin-bottom: 4rem;
+        }
+        .mobile-device-frame {
+            flex: 0 0 300px;
+            border-radius: 36px;
+            overflow: hidden;
+            border: 8px solid #18181b;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.5);
+            background: #000;
+        }
+        .mobile-device-frame img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+        .mobile-description {
+            flex: 1;
+            min-width: 300px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Mobile Interface</h1>
+                <p class="page-subtitle">A comprehensive guide to using the konn3kt mobile web application.</p>
+            </header>
+
+            <section>
+                <h2>1. Home Dashboard</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6485.png" alt="Mobile Home Dashboard">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>The <strong>Home</strong> tab is your central hub when accessing konn3kt from a mobile device. It provides an immediate overview of your primary IQ.Pilot device.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li><strong>Status Card:</strong> Instantly check if your vehicle is <em>Online</em> or <em>Parked</em>. It displays your total drives, total miles, and current fuel/energy level.</li>
+                            <li><strong>Quick Actions:</strong> Four large buttons give you immediate access to your most frequently used tools: <strong>Live View</strong>, <strong>Routes</strong>, <strong>Device Stats</strong>, and the <strong>Terminal</strong>.</li>
+                            <li><strong>Bottom Navigation:</strong> Use the bottom bar to switch between <em>Home</em>, <em>Devices</em>, <em>Drives</em>, and your <em>Profile</em>.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>2. Device Management & Actions</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6486.png" alt="Mobile Devices View Top">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>The <strong>Devices</strong> tab provides deep access to a specific piece of hardware. It lists every available tool and configuration option for the selected device.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li><strong>Device Selector:</strong> The top card shows the currently selected device. If you have multiple devices, you can manage them here.</li>
+                            <li><strong>Nodes:</strong> Tap <strong>Manage Nodes</strong> to configure any self-hosted storage servers associated with this device.</li>
+                            <li><strong>Media Actions:</strong> Tap <strong>Live Camera</strong> to start a stream, or <strong>Routes & Clips</strong> / <strong>Snapshots</strong> to review past media.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6487.png" alt="Mobile Devices View Middle">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Advanced Tools:</h3>
+                        <p>Scrolling down the Devices list reveals professional-grade management tools formatted for mobile:</p>
+                        <ul>
+                            <li><strong>SSH Terminal:</strong> Opens a secure shell directly in your mobile browser to run Linux commands on your device.</li>
+                            <li><strong>Local File Browser:</strong> Navigate your device's internal storage (e.g., <code>/data/media</code>) remotely.</li>
+                            <li><strong>Live Messages & Debug:</strong> Stream raw system bus data or view the device's tmux output in real-time for troubleshooting.</li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6489.png" alt="Mobile Devices View Bottom">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Settings & Pairing:</h3>
+                        <p>At the bottom of the list, you'll find system settings.</p>
+                        <ul>
+                            <li><strong>Device Settings:</strong> Tap here to rename your vehicle, manage SSH keys, adjust system toggles, or unpair the device.</li>
+                            <li><strong>+ Add Device:</strong> Use this button to initiate a new pairing sequence (QR Code or Manual) right from your phone.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>3. Live View Streaming</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6490.png" alt="Mobile Live View Start">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>The <strong>Live View</strong> interface is optimized for mobile screens, allowing you to monitor your car's cameras from anywhere.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li>When you open Live View, the stream is paused to save data.</li>
+                            <li>Tap the large blue <strong>Start Live Stream</strong> button at the bottom of the screen to initiate a secure peer-to-peer connection with your IQ.Pilot device.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6491.png" alt="Mobile Live View Negotiating">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Connection States:</h3>
+                        <p>While connecting, the app will guide you through the process:</p>
+                        <ul>
+                            <li><strong>Negotiating...</strong> indicates that konn3kt is currently establishing an encrypted bridge to your vehicle.</li>
+                            <li>Once connected, the screen will populate with the live camera feed, and remote vehicle controls (if compatible) will appear.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2>4. Active Live Stream</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6492.png" alt="Mobile Live View Active">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>The active streaming view provides a real-time window into your vehicle via a secure, low-latency connection.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li><strong>Camera Switcher:</strong> Use the <strong>Road</strong> and <strong>Driver</strong> buttons at the bottom to toggle between the forward-facing and interior-facing cameras.</li>
+                            <li><strong>Telemetry Overlay:</strong> The bottom right corner displays real-time stream telemetry, showing the connection Latency (e.g., 118ms) and the current Frames Per Second (FPS).</li>
+                            <li><strong>Stop Stream:</strong> Tap the red <strong>Stop Stream</strong> button to close the connection and save data.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>5. Routes & Clips</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6493.png" alt="Mobile Routes List">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>A chronological list of all drives recorded by your IQ.Pilot device, formatted for easy scrolling on a mobile screen.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li><strong>Drive Cards:</strong> Each card displays the date, time, duration, and distance of a specific trip.</li>
+                            <li><strong>Quick Actions:</strong> Under each drive, you have four immediate actions:
+                                <ul>
+                                    <li><strong>Play:</strong> Jump straight into the video playback and map view for that route.</li>
+                                    <li><strong>Files:</strong> Open the detailed data segment view to download raw logs or video files.</li>
+                                    <li><strong>Preserve:</strong> Star the route to protect it from automatic deletion.</li>
+                                    <li><strong>Delete:</strong> Permanently remove the route data from the cloud.</li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>6. File Management</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6494.png" alt="Mobile Files View">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>The detailed file explorer for a specific route. This allows you to interact with the raw data segments captured during a drive.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li><strong>Data Requests:</strong> Use the buttons at the top to <strong>Request RLogs</strong> (high-resolution logs) or <strong>View Uploads Queue</strong> to see what your device is currently sending to the server.</li>
+                            <li><strong>Segment View:</strong> Each drive is broken down into minute-long segments. You can expand a segment to see the individual files (qcamera, qlog, rlog).</li>
+                            <li><strong>Downloads:</strong> Tap the download icon next to any file (e.g., <code>qcamera.ts--0</code>) to save it directly to your mobile device.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>7. Device Stats & Health</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6495.png" alt="Mobile Device Stats Top">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>The Device Stats page provides a comprehensive breakdown of your hardware's health and lifetime usage metrics.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li><strong>Version Info:</strong> Check the exact IQ.Pilot version running on your device (e.g., <code>IQ.Pilot 1.0b</code>) and when the device was "Last Seen" by the server.</li>
+                            <li><strong>Vehicle Data:</strong> Monitor specific vehicle states like the Fuel Tank level or EV battery range.</li>
+                            <li><strong>System Health:</strong> Keep an eye on the <strong>Car Battery</strong> voltage (to prevent a dead battery) and the <strong>CPU Temp</strong> (to ensure the device isn't overheating).</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6496.png" alt="Mobile Device Stats Bottom">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Detailed Metrics:</h3>
+                        <p>Scrolling down the stats page reveals aggregate data and hardware identifiers.</p>
+                        <ul>
+                            <li><strong>Storage & Network:</strong> Check your remaining free space (e.g., 91%) and the active connection type (e.g., 4G LTE).</li>
+                            <li><strong>Driving Totals:</strong> View your lifetime Total Drives, Total Miles, and Total Hours.</li>
+                            <li><strong>Hardware Info:</strong> Find your <strong>Dongle ID</strong>, Device Model (e.g., Comma 3X), and the total amount of konn3kt cloud data you have used.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2>7. Device Stats & Health (Continued)</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6497.png" alt="Mobile Device Stats Network">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Detailed Metrics (Continued):</h3>
+                        <p>At the bottom of the device stats page, you can find the final critical details about your hardware.</p>
+                        <ul>
+                            <li><strong>Hardware Info:</strong> Find your 16-character <strong>Dongle ID</strong>. This is your device's unique serial number on the konn3kt network.</li>
+                            <li><strong>Cloud Usage:</strong> View the total amount of data (e.g., 13.78 GB) your device has uploaded to the konn3kt servers.</li>
+                            <li><strong>Last Known Location:</strong> A quick link to open your vehicle's last reported GPS coordinates in your phone's native mapping application (Apple Maps or Google Maps).</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>8. Secure Web Terminal</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6498.png" alt="Mobile Terminal Start">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>The Web Terminal provides full SSH access to your IQ.Pilot device directly within your mobile browser. No external apps required.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li>When you open the Terminal from the Quick Actions menu, konn3kt establishes an encrypted tunnel using the public key you provided during pairing.</li>
+                            <li>The terminal opens directly into the <code>/data/openpilot</code> directory, giving you immediate access to the core software environment.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6499.png" alt="Mobile Terminal Keyboard">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Mobile Keyboard Shortcuts:</h3>
+                        <p>Because typing Linux commands on a mobile phone can be tedious, the konn3kt terminal includes a custom shortcut bar above your native keyboard.</p>
+                        <ul>
+                            <li><strong>Modifier Keys:</strong> Use the on-screen <code>ESC</code>, <code>CTRL</code>, and <code>TAB</code> buttons for command-line navigation and auto-completion.</li>
+                            <li><strong>Clipboard:</strong> Quick copy and paste buttons are built right into the bar.</li>
+                            <li><strong>Arrow Keys:</strong> Use the directional arrows to scroll through your bash history or move the cursor within a command.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>9. Drive Playback & Analysis</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6501.png" alt="Mobile Route Playback Video">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>The Route Details view is your mobile command center for analyzing past drives, featuring a synchronized video player and event timeline.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li><strong>Camera Switcher:</strong> Tap the <strong>Road</strong>, <strong>Driver</strong>, or <strong>Wide</strong> buttons overlaid on the video to switch camera angles during playback.</li>
+                            <li><strong>Interactive Timeline:</strong> The colored dots below the video represent events (like engagements or disengagements). Tap any dot to instantly jump the video to that moment.</li>
+                            <li><strong>View Toggle:</strong> Use the tabs below the player (Video, Map, Events) to switch the primary focus of the page. The video will continue playing seamlessly as you navigate the map or scroll through the event list.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2>9. Drive Playback & Analysis (Continued)</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6502.png" alt="Mobile Route Playback Map">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Map View:</h3>
+                        <p>Switching to the <strong>Map</strong> tab replaces the video player with an interactive Apple Maps view of your route.</p>
+                        <ul>
+                            <li><strong>Route Trace:</strong> Your vehicle's path is drawn in a bold blue line.</li>
+                            <li><strong>Current Position:</strong> The red pin shows the exact location of the vehicle at the current timestamp in the playback timeline. It moves automatically as the timeline progresses.</li>
+                            <li><strong>Start & End Data:</strong> Below the map, you can view the precise, reverse-geocoded Start and End addresses of the trip.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6503.png" alt="Mobile Route Playback Events">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Events View:</h3>
+                        <p>The <strong>Events</strong> tab provides a granular breakdown of everything IQ.Pilot recorded.</p>
+                        <ul>
+                            <li><strong>Event Timeline Bar:</strong> A condensed visual representation of the entire drive. The green blocks indicate when IQ.Pilot was engaged.</li>
+                            <li><strong>Event Tally:</strong> A quick summary showing the total number of events, engagements, disengagements, alerts, and user flags.</li>
+                            <li><strong>Detailed List:</strong> A chronological feed of specific events (e.g., "Warning: this branch is not tested", "Lkas fault", "Reverse gear"). Tapping any of these will instantly seek the playback to that exact second.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>10. Global Drives List</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6505.png" alt="Mobile Global Drives List">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>What it is:</h3>
+                        <p>The main <strong>Drives</strong> tab (accessed from the bottom navigation bar) provides a global view of all your trips across all your devices.</p>
+                        <h3>How to use it:</h3>
+                        <ul>
+                            <li><strong>Aggregate Stats:</strong> The top header displays your lifetime Total Drives, Miles, and Total Time across your entire account.</li>
+                            <li><strong>Filters:</strong> Use the buttons to quickly filter by <strong>All</strong>, <strong>Preserved</strong>, or routes that have <strong>Video</strong> available. You can also use the funnel icon in the top right for advanced filtering.</li>
+                            <li><strong>Play Button:</strong> Tap the large blue play icon on any drive card to jump directly into the playback view.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2>11. Device Settings</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6521.png" alt="Mobile Device Settings">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Configuration Overview:</h3>
+                        <p>The <strong>Device Settings</strong> page allows you to deep-tune your IQ.Pilot hardware directly from your phone.</p>
+                        <ul>
+                            <li><strong>Device Identity:</strong> Quickly change the Device Alias to something recognizable (e.g., "Das Auto").</li>
+                            <li><strong>Hardware Info:</strong> Verify the auto-detected Device Maker (Comma.ai) and Hardware Revision (Comma 3X).</li>
+                            <li><strong>Software Branch:</strong> Switch the active IQ.Pilot branch (e.g., to "Release (Stable)"). <em>Changing this will prompt a device reboot.</em></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6522.png" alt="Mobile System Toggles">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>System Toggles:</h3>
+                        <p>Control exactly how IQ.Pilot behaves on the road.</p>
+                        <ul>
+                            <li><strong>IQ.Pilot Longitudinal Control:</strong> Toggle whether the system controls your gas and brakes.</li>
+                            <li><strong>Longitudinal Mode:</strong> Choose the driving personality: <em>IQ.Standard</em>, <em>IQ.Dynamic</em>, or the advanced end-to-end <em>IQ.Pilot</em>.</li>
+                            <li><strong>AOL (Always On Lateral):</strong> Keep steering control active even when cruise control (longitudinal) is paused.</li>
+                            <li><strong>WebSSH & Cellular Uploads:</strong> Enable remote terminal access and allow route data to upload using cellular data.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>12. Advanced Tuning & Navigation</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6523.png" alt="Mobile Always On Lateral">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>AOL Specifics:</h3>
+                        <p>If Always On Lateral is enabled, you can fine-tune its behavior:</p>
+                        <ul>
+                            <li><strong>Disengage On Brake Pedal:</strong> Choose whether pressing the brake completely turns off steering or just pauses it.</li>
+                            <li><strong>Toggle With Cruise Main:</strong> Allow your car's main cruise button to turn the system on and off.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6524.png" alt="Mobile Fine Tuning">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Fine Tuning:</h3>
+                        <p>Advanced parameters for tweaking the driving model's feel:</p>
+                        <ul>
+                            <li><strong>Self-Tuning:</strong> Enable Neural Network Feed Forward (NNFF) to let the device learn torque values live.</li>
+                            <li><strong>Manual Tuning:</strong> Expose raw variables like <em>Lateral Acceleration Factor</em> and <em>Friction</em>.</li>
+                            <li><strong>Lane Placement:</strong> Bias the car's position slightly left or right within the lane.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6526.png" alt="Mobile Navigation Maps">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Navigation Setup:</h3>
+                        <p>Configure offline routing data.</p>
+                        <ul>
+                            <li><strong>OSM Maps:</strong> Select your Country and State (e.g., United States, California) and tap <strong>Start Download</strong> to save map data directly to the device for offline use.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>13. Software Updates & Backups</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6527.png" alt="Mobile Software Update">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Software Management:</h3>
+                        <ul>
+                            <li><strong>Updates:</strong> Tap <strong>Check for Updates</strong> to pull the latest IQ.Pilot code. You can also view update <strong>Errors</strong> if a pull fails.</li>
+                            <li><strong>Private Repos:</strong> Enter a Git Username (or token) and Password if you are pulling an experimental branch from a private repository.</li>
+                            <li><strong>Quick Update:</strong> Forces a <code>git pull</code> and automatically restarts the UI.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6530.png" alt="Mobile Backups">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Backups & SSH:</h3>
+                        <ul>
+                            <li><strong>Device Backups:</strong> Securely save your current configuration to the cloud. Backups are encrypted with the device's private key.</li>
+                            <li><strong>SSH Keys:</strong> Manage the keys required for Web Terminal access. You can view keys linked to your konn3kt account or keys stored directly on the hardware.</li>
+                            <li><strong>Danger Zone:</strong> The red <strong>Unpair Device</strong> button permanently removes the hardware from your account.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>14. Profile & Security</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6506.png" alt="Mobile Profile Menu">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Profile Dashboard:</h3>
+                        <p>The <strong>Profile</strong> tab is where you manage your konn3kt account.</p>
+                        <ul>
+                            <li><strong>My Devices:</strong> Quickly switch your "Main" default device or tap <strong>+ Add</strong> to pair a new one.</li>
+                            <li><strong>Settings:</strong> Access global account preferences for Notifications, Appearance, and Security.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6507.png" alt="Mobile Notifications">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Push Notifications:</h3>
+                        <p>Configure what alerts konn3kt sends to your phone.</p>
+                        <ul>
+                            <li><strong>Device Status:</strong> Get notified instantly if your device goes Offline or comes back Online.</li>
+                            <li><strong>Drives:</strong> Receive an alert the moment your vehicle starts a new drive.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6510.png" alt="Mobile Security">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Mobile Security:</h3>
+                        <p>Protect your sensitive data and remote controls.</p>
+                        <ul>
+                            <li><strong>Biometrics:</strong> Enable <strong>Face ID</strong> or <strong>Device Passcode</strong> to require authentication before opening the app.</li>
+                            <li><strong>Sensitive Features:</strong> Toggle <strong>Require Auth for Live View & SSH</strong> to ensure no one can stream your cameras or access the terminal without a secondary biometric scan.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2>15. Profile Details & Appearance</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6508.png" alt="Mobile Appearance Settings">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Appearance Settings:</h3>
+                        <p>Customize how the app looks on your device.</p>
+                        <ul>
+                            <li><strong>Accent Color:</strong> Choose a personal color (like Cyan) that highlights buttons, icons, and route lines.</li>
+                            <li><strong>Theme:</strong> Force Dark mode, Light mode, or let it match your system settings.</li>
+                            <li><strong>Car Logo:</strong> Select an icon (Default, VW, Audi, Tesla, Toyota) to display next to your vehicle's alias.</li>
+                            <li><strong>Font Size:</strong> Adjust the text size (Small, Medium, Large) for readability.</li>
+                            <li><strong>Picture-in-Picture:</strong> Enable this to let live video feeds continue floating on your screen even if you minimize the app.</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6512.png" alt="Mobile About App">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>About App & Links:</h3>
+                        <p>The About section provides quick external links and app info.</p>
+                        <ul>
+                            <li><strong>External Links:</strong> Jump directly to the konn3kt Website or join the Discord Community.</li>
+                            <li><strong>Legal:</strong> Review the Privacy Policy and Terms of Service.</li>
+                            <li><strong>Version:</strong> The current app version (e.g., v1.4.4) is displayed at the bottom of the profile page.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>16. Snapshots & Self-Hosted Nodes</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6514.png" alt="Mobile Self-Hosted Nodes">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Self-Hosted Nodes:</h3>
+                        <p>If you prefer not to use konn3kt's cloud storage, you can link your own server.</p>
+                        <ul>
+                            <li><strong>Pair Node:</strong> Tap this to scan a QR code from your self-hosted instance. Once paired, your device will upload drives directly to your hardware while still using the konn3kt interface for playback.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6515.png" alt="Mobile Snapshots Capture">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Capturing Snapshots:</h3>
+                        <p>Pull high-resolution images from your vehicle at any time.</p>
+                        <ul>
+                            <li><strong>Capture Controls:</strong> Tap "Capture All Cameras" or specifically request an image from the Road, Driver, or Wide camera.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6516.png" alt="Mobile Snapshots List">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Viewing Snapshots:</h3>
+                        <p>Saved images appear in a gallery.</p>
+                        <ul>
+                            <li><strong>Gallery:</strong> Images are labeled by camera type (e.g., ROAD, DRIVER) and timestamped. Tap any image to view it full screen and save it to your phone.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <h2>17. Advanced File Browser & Debugging</h2>
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6517.png" alt="Mobile File Browser Root">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Local File Browser:</h3>
+                        <p>Navigate your IQ.Pilot device's internal filesystem directly from your phone.</p>
+                        <ul>
+                            <li><strong>Breadcrumbs:</strong> The top bar shows your current path (e.g., <code>//data/openpilot</code>).</li>
+                            <li><strong>Quick Links:</strong> Jump instantly to common directories like <code>/data</code>, <code>openpilot</code>, or <code>params</code>.</li>
+                            <li><strong>Navigation:</strong> Tap folders (like <code>.git</code> or <code>cereal</code>) to explore, or use the <code>.. Go up</code> button to step back.</li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6518.png" alt="Mobile File Browser Deep">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>File Interaction:</h3>
+                        <p>When you navigate into specific code directories (like <code>iqpilot/aol</code>), you can see the python files (<code>.py</code>).</p>
+                        <ul>
+                            <li><strong>File Info:</strong> Displays file size (e.g., 9.1 KB). Tapping a file gives you options to download, delete, or view it if supported.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6519.png" alt="Mobile Live Messages">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Live Messages:</h3>
+                        <p>Subscribe to the raw system event bus.</p>
+                        <ul>
+                            <li><strong>Polling:</strong> Displays the active connection status and polling rate (e.g., every 5s).</li>
+                            <li><strong>Message Types:</strong> Select specific system messages (like <code>deviceState</code>) to view the raw JSON data stream coming from your vehicle.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="mobile-showcase">
+                    <div class="mobile-device-frame">
+                        <img src="assets/images/IMG_6520.png" alt="Mobile Live Debug Log">
+                    </div>
+                    <div class="mobile-description">
+                        <h3>Live Debug Log (tmux):</h3>
+                        <p>Watch the raw system output as IQ.Pilot operates.</p>
+                        <ul>
+                            <li><strong>Read-only Stream:</strong> This view continuously tails the internal <code>tmux</code> session. It is extremely useful for catching immediate crash errors or observing boot sequences without needing to type SSH commands.</li>
+                        </ul>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

pairing.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pairing Your Device - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Pairing Your Device</h1>
+                <p class="page-subtitle">Linking your IQ.Pilot hardware to the konn3kt ecosystem.</p>
+            </header>
+
+            <section>
+                <h2>Access Requirements</h2>
+                <p>Before you can pair a device, you must have an active konn3kt account. Access is granted through the <strong>konn3kt Discord</strong>. Once your account is provisioned, you can proceed with the following steps.</p>
+                <div class="callout">
+                    <strong>Migration:</strong> If you are switching your device from Comma Connect to konn3kt, your <strong>Dongle ID is preserved</strong>. All your existing hardware identifiers remain the same.
+                </div>
+            </section>
+
+            <section>
+                <h2>Standard Pairing (QR Code)</h2>
+                <ol class="step-list">
+                    <li>Sign in to <a href="https://konn3kt.teallvbs.xyz">konn3kt.teallvbs.xyz</a>.</li>
+                    <li>Ensure your IQ.Pilot device is connected to the internet and displaying the pairing QR code.</li>
+                    <li>Click <strong>+ Pair Device</strong> on your dashboard.</li>
+                    <li>Scan the QR code using your phone or a web-connected camera.</li>
+                    <li>The device will link instantly and appear in your device grid.</li>
+                </ol>
+            </section>
+
+            <section>
+                <h2>Manual Registration & SSH Configuration</h2>
+                <p>If QR scanning is not an option, you can register your device manually. This is also where you establish secure SSH access.</p>
+                
+                <ol class="step-list">
+                    <li>Select the <strong>Register</strong> tab in the Pair Device modal.</li>
+                    <li>Enter your device's <strong>Dongle ID</strong> and <strong>Serial Number</strong>.</li>
+                    <li><strong>Public Key:</strong> Paste your device's SSH Public Key. This key is critical for:
+                        <ul>
+                            <li>Establishing encrypted data streams.</li>
+                            <li>Authenticating the <strong>Web Terminal</strong> sessions.</li>
+                            <li>Ensuring "Encryption at Rest" can be decrypted by your account.</li>
+                        </ul>
+                    </li>
+                    <li>Click <strong>Submit</strong> to complete the registration.</li>
+                </ol>
+
+                <div class="callout">
+                    <strong>Installation Help:</strong> For a complete guide on installing IQ.Pilot on your hardware, visit the <a href="https://iqlvbs.com/wiki/iqpilot">IQ.Pilot Wiki</a>.
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

settings.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Device Settings - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Device Settings</h1>
+                <p class="page-subtitle">Deep configuration for your account, hardware, and safety systems.</p>
+            </header>
+
+            <section>
+                <h2>Account Management</h2>
+                <p>Manage your core identity on the konn3kt platform.</p>
+                <ul>
+                    <li><strong>Account ID:</strong> Your unique system identifier.</li>
+                    <li><strong>Profile:</strong> Update your <strong>Username</strong> and <strong>Email</strong>. These are used for sign-in linking and system notifications.</li>
+                    <li><strong>Sign-In Providers:</strong> Manage your links to GitHub, Google, and Apple. You can "Unlink" providers as long as one remains active.</li>
+                    <li><strong>Profile Picture:</strong> Upload a <code>JPEG/PNG/WebP</code> (Max 5MB) or provide a direct image URL to customize your avatar.</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Appearance & Localization</h2>
+                <ul>
+                    <li><strong>Accent Color:</strong> Choose the primary highlight color for your dashboard. Options include Emerald, Blue, Violet, Red, Amber, and Cyan.</li>
+                    <li><strong>Metric Units:</strong> Toggle to display all distances in kilometers instead of miles.</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Device Configuration</h2>
+                <p>Specific hardware settings for the currently selected IQ.Pilot device.</p>
+                <ul>
+                    <li><strong>Device Alias:</strong> Set a friendly name for your vehicle or hardware.</li>
+                    <li><strong>Maker & Revision:</strong> View system-detected information (e.g., <code>Comma.ai</code> / <code>Comma 3X</code>).</li>
+                    <li><strong>Software Branch:</strong> View and manage the current IQ.Pilot branch (e.g., <code>master-mici-pq</code>). <em>Note: Changing branches may trigger a device reboot and update.</em></li>
+                    <li><strong>Driving Model:</strong> View the current neural network model version (e.g., <code>WMI V12</code>). Selecting a new model triggers a background download.</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>System & Safety Controls</h2>
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>IQ.Pilot Controls</h3>
+                        <ul>
+                            <li><strong>Longitudinal Control:</strong> Enable/Disable IQ.Pilot's ability to control acceleration and braking.</li>
+                            <li><strong>Traffic Aware Cruise:</strong> Use standard cruise control logic instead of end-to-end AI driving.</li>
+                            <li><strong>Dynamic Experimental:</strong> Automatically switch between standard and experimental modes based on driving conditions.</li>
+                        </ul>
+                    </div>
+                    <div class="card">
+                        <h3>Connectivity & Privacy</h3>
+                        <ul>
+                            <li><strong>Enable WebSSH Access:</strong> Allows the "Web Terminal" in Live View to establish a secure shell session.</li>
+                            <li><strong>Cellular Uploads:</strong> Toggle whether dashcam video and logs can upload via cellular data while onroad.</li>
+                            <li><strong>Enable Encryption at Rest:</strong> Encrypt all uploaded files (qlogs, rlogs, cameras) using dual-key encryption. This requires your <strong>Public Key</strong>.</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <h3>Advanced Management</h3>
+                <div class="button-desc">
+                    <div class="btn-pill">Navigation [Manage]</div>
+                    <p>Configure OSM maps, Speed Limit Control (SLC), and Mapbox tokens for the on-device navigation system.</p>
+                </div>
+                <div class="button-desc">
+                    <div class="btn-pill">Fine Tuning [Manage]</div>
+                    <p>Access advanced calibration parameters for steering and camera alignment.</p>
+                </div>
+                <div class="button-desc">
+                    <div class="btn-pill">Vehicle Fingerprint</div>
+                    <p>Toggle between <strong>Auto</strong> detection or <strong>Manual</strong> selection for your specific car platform (e.g., <code>VOLKSWAGEN_PASSAT_NMS</code>).</p>
+                </div>
+            </section>
+
+            <section>
+                <h2>SSH Keys & Route Sharing</h2>
+                <ul>
+                    <li><strong>SSH Keys:</strong> Switch between <strong>Account SSH Keys</strong> (for platform access) and <strong>Device SSH Keys</strong> (keys physically present on the hardware). You can "Add Key" or "Refresh" the list.</li>
+                    <li><strong>Route Sharing:</strong> View a list of routes shared with you by other users. You can also <strong>Revoke All Access</strong> to instantly stop sharing any of your own routes with others.</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Device Backups</h2>
+                <p>Securely save your device's state to the cloud.</p>
+                <div class="callout">
+                    <strong>Backup Security:</strong>
+                    <ul>
+                        <li>Backups are encrypted with your device's <strong>private key</strong>.</li>
+                        <li>Only this specific device can decrypt and restore its own backups.</li>
+                        <li>Backups include all device settings and parameters.</li>
+                        <li>The device will automatically reboot after a restoration.</li>
+                    </ul>
+                </div>
+                <div class="button-desc">
+                    <div class="btn-pill accent">+ Create New Backup</div>
+                    <p>Triggers an immediate backup of your current IQ.Pilot configuration.</p>
+                </div>
+            </section>
+
+            <section>
+                <h2 style="color: #ef4444;">Danger Zone</h2>
+                <div class="button-desc" style="border-color: rgba(239, 68, 68, 0.2);">
+                    <div class="btn-pill" style="background: #ef4444; color: #fff;">Unpair Device</div>
+                    <p>Remove this device from your account. This action is permanent and cannot be undone.</p>
+                </div>
+            </section>
+
+            <div class="callout">
+                <strong>📱 Mobile Users:</strong> All settings, including SSH keys, biometrics, and appearance toggles, can be managed on the go. See the <a href="mobile-interface.html">Mobile Settings Guide</a>.
+            </div>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

trips.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trips & History - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Trips & History</h1>
+                <p class="page-subtitle">Review, replay, and analyze your past drives.</p>
+            </header>
+
+            <section>
+                <h2>Browsing Past Drives</h2>
+                <p>As you drive, your openpilot device records route data and securely uploads it to konn3kt. You can access your entire drive history from the Device Detail view.</p>
+                <p>Routes are organized chronologically. Each route listing displays:</p>
+                <ul>
+                    <li>Date and time of the drive</li>
+                    <li>Start and end locations (City names)</li>
+                    <li>Total distance and duration</li>
+                    <li>openpilot engagement percentage (how much of the drive was driven autonomously)</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Route Playback & Analysis</h2>
+                <p>Clicking on a specific trip opens the <strong>Route Detail</strong> view, which is the ultimate tool for analyzing your drives.</p>
+                
+                <div class="card-grid">
+                    <div class="card">
+                        <h3>Interactive Map</h3>
+                        <p>A full map traces the exact path of your vehicle. The route line is color-coded using your personal accent color. Interactive markers indicate key events like disengagements, user flags, and alerts.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Video Player</h3>
+                        <p>Watch synchronized video feeds from the device's cameras (road camera and wide camera). The video player lets you skip forward or backward and aligns perfectly with the map's current location.</p>
+                    </div>
+                </div>
+
+                <h3>Drive Events</h3>
+                <p>Below the map, a timeline of events helps you jump straight to the action. Events include:</p>
+                <ul>
+                    <li><strong style="color: #10b981;">Engage:</strong> When openpilot was activated.</li>
+                    <li><strong style="color: #ef4444;">Disengage:</strong> When you took control via the steering wheel or brakes.</li>
+                    <li><strong style="color: #f59e0b;">Alerts:</strong> System warnings or notifications triggered during the drive.</li>
+                    <li><strong style="color: #3b82f6;">User Flags:</strong> Moments you specifically marked while driving for later review.</li>
+                </ul>
+                <p>Clicking on any event in the list or on the map instantly seeks the video and map to that exact timestamp.</p>
+            </section>
+
+            <section>
+                <h2>Navigation & Routing</h2>
+                <p>konn3kt also features a <strong>Navigation</strong> view where you can plan routes. You can select a destination, view the calculated path on the map, and see estimated time of arrival (ETA), distance, and turn-by-turn maneuvers.</p>
+                <div class="callout">
+                    <strong>Pro Tip:</strong> The navigation map also highlights safety cameras (like speed cameras, red light cameras, and ALPR cameras) along your route to keep you informed.
+                </div>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>

troubleshooting.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Troubleshooting - konn3kt Documentation</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+    <div class="layout">
+        <main class="main-content">
+            <header class="page-header">
+                <h1 class="page-title">Troubleshooting</h1>
+                <p class="page-subtitle">Solutions for IQ.Pilot and konn3kt connectivity.</p>
+            </header>
+
+            <section>
+                <h2>Connectivity Issues</h2>
+                <div class="callout">
+                    <strong>Symptom:</strong> Device shows as "Offline" even when powered.
+                </div>
+                <ul>
+                    <li><strong>Initial Connection:</strong> After booting, it may take 60-120 seconds for the device to establish its heartbeat with konn3kt.</li>
+                    <li><strong>Network Stall:</strong> If the device is on a weak cellular signal, it may fail to maintain the live connection. Verify your <strong>Cellular Uploads</strong> setting if you expect data transfer on the road.</li>
+                    <li><strong>Public Key Error:</strong> If terminal access fails, ensure your public key was correctly pasted during pairing and that <strong>WebSSH</strong> is toggled ON in Settings.</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Upload Problems</h2>
+                <div class="callout">
+                    <strong>Symptom:</strong> Trips appear on the dashboard but have "No Video."
+                </div>
+                <ul>
+                    <li><strong>WiFi Dependency:</strong> By default, large video files (fcam, ecam) upload when the device connects to an unmetered WiFi network.</li>
+                    <li><strong>Onroad Uploads:</strong> Recall that only quantized dashcam video (qcam) is uploaded while onroad, and only if <strong>Cellular Uploads</strong> is enabled.</li>
+                    <li><strong>Missing Segments:</strong> If a drive seems incomplete, use the <strong>Request Missing Files</strong> button in the Files view to trigger a re-scan.</li>
+                </ul>
+            </section>
+
+            <section>
+                <h2>Support</h2>
+                <p>For issues not covered here, please reach out in the <strong>#support</strong> channel of the <a href="https://discord.konn3kt.com">konn3kt Discord</a>.</p>
+            </section>
+        </main>
+    </div>
+    <script src="assets/nav.js"></script>
+</body>
+</html>