2eddc545d2
Swap 9 old screenshots for 8 new ones showing fleet dashboard, traffic, firmware management, config templates, device detail, interface utilization, device health, and traffic analytics. Update carousel markup with Deep Space card styling. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
509 lines
29 KiB
HTML
509 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Other Dude — Open Source Fleet Management for MikroTik RouterOS</title>
|
|
<meta name="description" content="Open source MikroTik fleet management. Manage hundreds of routers from one dashboard with secure configuration management, monitoring, and backups. Self-hosted.">
|
|
<meta name="keywords" content="MikroTik, RouterOS, fleet management, MSP, network management, WinBox alternative, WinBox in browser, WinBox browser, MikroTik monitoring, MikroTik configuration, router management, network monitoring tool, MikroTik dashboard, multi-tenant network management, MikroTik VPN, WireGuard MikroTik, MikroTik certificate authority, MikroTik PDF reports, SRP-6a authentication, zero-knowledge security, open source MikroTik, open source fleet management, open source RouterOS management, self-hosted MikroTik, free MikroTik management">
|
|
<meta name="author" content="The Other Dude">
|
|
<meta name="robots" content="index, follow">
|
|
<meta name="google-site-verification" content="d2QVuWrLJlzOQPnA-SAJuvajEHGYbusvJ4eDdZbWSBU">
|
|
<meta name="theme-color" content="#111113">
|
|
<link rel="canonical" href="https://theotherdude.net/">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><rect x='6' y='6' width='52' height='52' rx='5' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><rect x='8' y='8' width='48' height='48' rx='4' fill='%238B1A1A' opacity='0.15'/><path d='M32 8 L56 32 L32 56 L8 32 Z' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 13 L51 32 L32 51 L13 32 Z' fill='none' stroke='%23F5E6C8' stroke-width='1.5'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><path d='M19 32 L32 26 L45 32 L32 38 Z' fill='%23F5E6C8'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/><path d='M10 10 L16 10 L10 16 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 10 L54 16 L48 10 Z' fill='%232A9D8F' opacity='0.7'/><path d='M10 54 L16 54 L10 48 Z' fill='%232A9D8F' opacity='0.7'/><path d='M54 54 L48 54 L54 48 Z' fill='%232A9D8F' opacity='0.7'/></svg>">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="The Other Dude — Open Source Fleet Management for MikroTik RouterOS">
|
|
<meta property="og:description" content="Open source MikroTik fleet management. Manage hundreds of routers from one dashboard with secure configuration management, monitoring, and backups. Self-hosted.">
|
|
<meta property="og:url" content="https://theotherdude.net/">
|
|
<meta property="og:image" content="https://theotherdude.net/assets/og-image.png">
|
|
<meta property="og:site_name" content="The Other Dude">
|
|
<meta property="og:locale" content="en_US">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="The Other Dude — MikroTik Fleet Management for MSPs">
|
|
<meta name="twitter:description" content="Manage hundreds of MikroTik routers from a single pane of glass. Zero-knowledge security, real-time monitoring, and configuration management.">
|
|
<meta name="twitter:image" content="https://theotherdude.net/assets/og-image.png">
|
|
|
|
<!-- Structured Data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "The Other Dude",
|
|
"applicationCategory": "NetworkApplication",
|
|
"operatingSystem": "Linux, Docker",
|
|
"description": "Open-source MikroTik RouterOS fleet management platform for MSPs. Real-time monitoring, zero-knowledge security, configuration management, and multi-tenant support.",
|
|
"url": "https://theotherdude.net",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "USD"
|
|
},
|
|
"featureList": [
|
|
"MikroTik RouterOS fleet management",
|
|
"Real-time device monitoring via SSE",
|
|
"Zero-knowledge SRP-6a authentication",
|
|
"Per-tenant envelope encryption with OpenBao",
|
|
"Two-phase configuration push with panic-revert",
|
|
"Multi-tenant PostgreSQL Row-Level Security",
|
|
"Internal Certificate Authority",
|
|
"Firmware management and audit trail",
|
|
"Browser-based WinBox and SSH terminal",
|
|
"WireGuard VPN onboarding for NAT traversal",
|
|
"PDF reports for fleet, security, and performance"
|
|
],
|
|
"softwareRequirements": "Docker, PostgreSQL 17, Redis, NATS"
|
|
}
|
|
</script>
|
|
|
|
<!-- Organization Schema -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "The Other Dude",
|
|
"url": "https://theotherdude.net",
|
|
"logo": "https://theotherdude.net/assets/og-image.png",
|
|
"sameAs": [
|
|
"https://github.com/staack/the-other-dude"
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<!-- Fonts -->
|
|
|
|
<!-- Styles -->
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- Navigation -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<nav class="site-nav site-nav--dark" aria-label="Main navigation">
|
|
<div class="nav-inner container">
|
|
<a href="index.html" class="nav-logo">
|
|
<svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-hidden="true">
|
|
<rect x="2" y="2" width="60" height="60" rx="8" fill="none" stroke="#8B1A1A" stroke-width="2"/>
|
|
<rect x="6" y="6" width="52" height="52" rx="5" fill="none" stroke="#F5E6C8" stroke-width="1.5"/>
|
|
<rect x="8" y="8" width="48" height="48" rx="4" fill="#8B1A1A" opacity="0.15"/>
|
|
<path d="M32 8 L56 32 L32 56 L8 32 Z" fill="none" stroke="#8B1A1A" stroke-width="2"/>
|
|
<path d="M32 13 L51 32 L32 51 L13 32 Z" fill="none" stroke="#F5E6C8" stroke-width="1.5"/>
|
|
<path d="M32 18 L46 32 L32 46 L18 32 Z" fill="#8B1A1A"/>
|
|
<path d="M32 19 L38 32 L32 45 L26 32 Z" fill="#2A9D8F"/>
|
|
<path d="M19 32 L32 26 L45 32 L32 38 Z" fill="#F5E6C8"/>
|
|
<circle cx="32" cy="32" r="5" fill="#8B1A1A"/>
|
|
<circle cx="32" cy="32" r="2.5" fill="#2A9D8F"/>
|
|
<path d="M10 10 L16 10 L10 16 Z" fill="#2A9D8F" opacity="0.7"/>
|
|
<path d="M54 10 L54 16 L48 10 Z" fill="#2A9D8F" opacity="0.7"/>
|
|
<path d="M10 54 L16 54 L10 48 Z" fill="#2A9D8F" opacity="0.7"/>
|
|
<path d="M54 54 L48 54 L54 48 Z" fill="#2A9D8F" opacity="0.7"/>
|
|
</svg>
|
|
<span>The Other Dude</span>
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="#what-it-does" class="nav-link">Features</a>
|
|
<a href="#architecture" class="nav-link">Architecture</a>
|
|
<a href="#screenshots" class="nav-link">Screenshots</a>
|
|
<a href="docs.html" class="nav-link">Docs</a>
|
|
<a href="blog/" class="nav-link">Blog</a>
|
|
<a href="https://github.com/staack/the-other-dude" class="nav-link" rel="noopener">GitHub</a>
|
|
<a href="docs.html#quickstart" class="nav-cta">Get Started</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- Testing Banner -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<div class="testing-banner">
|
|
<div class="container">
|
|
<strong>Early Access</strong> — This software is in active development and testing. It is not yet ready for production use.
|
|
</div>
|
|
</div>
|
|
|
|
<main id="main-content">
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- Hero -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<section class="hero">
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-content container">
|
|
<div class="hero-rosette">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="96" height="96" aria-hidden="true">
|
|
<rect x="2" y="2" width="60" height="60" rx="8" fill="none" stroke="#8B1A1A" stroke-width="2"/>
|
|
<rect x="6" y="6" width="52" height="52" rx="5" fill="none" stroke="#F5E6C8" stroke-width="1.5"/>
|
|
<rect x="8" y="8" width="48" height="48" rx="4" fill="#8B1A1A" opacity="0.15"/>
|
|
<path d="M32 8 L56 32 L32 56 L8 32 Z" fill="none" stroke="#8B1A1A" stroke-width="2"/>
|
|
<path d="M32 13 L51 32 L32 51 L13 32 Z" fill="none" stroke="#F5E6C8" stroke-width="1.5"/>
|
|
<path d="M32 18 L46 32 L32 46 L18 32 Z" fill="#8B1A1A"/>
|
|
<path d="M32 19 L38 32 L32 45 L26 32 Z" fill="#2A9D8F"/>
|
|
<path d="M19 32 L32 26 L45 32 L32 38 Z" fill="#F5E6C8"/>
|
|
<circle cx="32" cy="32" r="5" fill="#8B1A1A"/>
|
|
<circle cx="32" cy="32" r="2.5" fill="#2A9D8F"/>
|
|
<path d="M10 10 L16 10 L10 16 Z" fill="#2A9D8F" opacity="0.7"/>
|
|
<path d="M54 10 L54 16 L48 10 Z" fill="#2A9D8F" opacity="0.7"/>
|
|
<path d="M10 54 L16 54 L10 48 Z" fill="#2A9D8F" opacity="0.7"/>
|
|
<path d="M54 54 L48 54 L54 48 Z" fill="#2A9D8F" opacity="0.7"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="hero-title"><span class="gradient-text">Open Source Fleet Management for MikroTik Networks</span></h1>
|
|
<p class="hero-subtitle">Managing MikroTik routers shouldn’t require dozens of WinBox tabs, SSH scripts, and crossed fingers.</p>
|
|
<p class="hero-subtitle">The Other Dude is a self-hosted, open source platform that gives you centralized visibility and control over your entire MikroTik fleet.</p>
|
|
<p class="hero-subtitle hero-subtitle--muted">Monitor devices, push configuration safely, and operate your network from a single interface.</p>
|
|
<div class="hero-actions">
|
|
<a href="docs.html#quickstart" class="btn btn-primary">Get Started Managing MikroTik Routers</a>
|
|
<a href="https://github.com/staack/the-other-dude" class="btn btn-secondary" rel="noopener">View on GitHub</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- MikroTik SEO summary -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<section class="features-section">
|
|
<div class="container">
|
|
<h2 class="section-title">MikroTik Router Fleet Management</h2>
|
|
<p class="section-desc">The Other Dude is a centralized management platform designed for MikroTik RouterOS deployments. It allows MSPs and network teams to monitor router health, push configuration safely, manage backups, and maintain visibility across hundreds of devices from a single dashboard.</p>
|
|
<p class="section-desc">Instead of logging into routers individually with WinBox or SSH, The Other Dude provides a fleet-level view of your MikroTik infrastructure with real-time status, configuration tracking, and automated management tools.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- Features -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<section id="what-it-does" class="features-section">
|
|
<div class="container">
|
|
<span class="section-label">WHAT THE OTHER DUDE DOES</span>
|
|
<h2 class="section-title">Everything you need to manage MikroTik routers at scale</h2>
|
|
|
|
<div class="features-grid">
|
|
|
|
<div class="feature-card" id="feature-fleet">
|
|
<div class="feature-icon">📊</div>
|
|
<h3 class="feature-title">Fleet Management</h3>
|
|
<p class="feature-desc">Dashboard with device health, uptime sparklines, virtual-scrolled fleet table, geographic map, and subnet discovery. Monitor your entire MikroTik fleet from a single view.</p>
|
|
</div>
|
|
|
|
<div class="feature-card" id="feature-config">
|
|
<div class="feature-icon">⚙</div>
|
|
<h3 class="feature-title">Configuration Management</h3>
|
|
<p class="feature-desc">Two-phase config push with automatic panic-revert protection. Templates, diff and history, git-backed backups, and one-click restore. Push changes across your fleet with confidence.</p>
|
|
</div>
|
|
|
|
<div class="feature-card" id="feature-monitoring">
|
|
<div class="feature-icon">📈</div>
|
|
<h3 class="feature-title">Real-Time Monitoring</h3>
|
|
<p class="feature-desc">Live CPU, memory, disk, interface traffic, and wireless metrics (signal, CCQ, client count) via Server-Sent Events. Configurable alert rules with email, webhook, and Slack notifications. Dashboard highlights APs needing attention.</p>
|
|
</div>
|
|
|
|
<div class="feature-card" id="feature-security">
|
|
<div class="feature-icon">🔒</div>
|
|
<h3 class="feature-title">Zero-Knowledge Security</h3>
|
|
<p class="feature-desc">SRP-6a authentication means the server never sees your password. Per-tenant envelope encryption via Transit KMS. Emergency Kit export for account recovery.</p>
|
|
</div>
|
|
|
|
<div class="feature-card" id="feature-winbox">
|
|
<div class="feature-icon">🖥</div>
|
|
<h3 class="feature-title">WinBox in the Browser</h3>
|
|
<p class="feature-desc">Launch WinBox sessions directly from the web interface without installing the desktop app. Browser-based SSH terminal. WireGuard VPN overlay for one-click access to devices behind NAT.</p>
|
|
</div>
|
|
|
|
<div class="feature-card" id="feature-certs">
|
|
<div class="feature-icon">🛡</div>
|
|
<h3 class="feature-title">Certificate Authority</h3>
|
|
<p class="feature-desc">Issue and deploy TLS certificates to RouterOS devices via SFTP. Three-tier TLS fallback for maximum compatibility across firmware versions.</p>
|
|
</div>
|
|
|
|
<div class="feature-card" id="feature-reports">
|
|
<div class="feature-icon">📄</div>
|
|
<h3 class="feature-title">PDF Reports</h3>
|
|
<p class="feature-desc">Fleet summary, device detail, security audit, and performance reports generated server-side. Export and share operational data without screenshots.</p>
|
|
</div>
|
|
|
|
<div class="feature-card" id="feature-tenants">
|
|
<div class="feature-icon">🏢</div>
|
|
<h3 class="feature-title">Multi-Tenant Isolation</h3>
|
|
<p class="feature-desc">PostgreSQL Row-Level Security enforces full data separation at the database layer. Four roles: super_admin, admin, operator, viewer.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- Who This Is For -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<section class="features-section">
|
|
<div class="container">
|
|
<span class="section-label">WHO THIS IS FOR</span>
|
|
<h2 class="section-title">Built for real operators</h2>
|
|
<p class="section-desc">The Other Dude is designed for people who operate MikroTik networks in the real world:</p>
|
|
|
|
<ul class="content-list">
|
|
<li>Managed Service Providers managing many client networks</li>
|
|
<li>Wireless ISPs running large router fleets</li>
|
|
<li>Network engineers operating distributed infrastructure</li>
|
|
<li>Homelab operators managing larger environments</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- Architecture -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<section id="architecture" class="features-section features-section--alt">
|
|
<div class="container">
|
|
<span class="section-label">ARCHITECTURE</span>
|
|
<h2 class="section-title">Event-driven, designed for reliability and horizontal scaling</h2>
|
|
|
|
<div class="arch-flow">
|
|
<div class="arch-flow-step">Routers</div>
|
|
<div class="arch-flow-arrow">↓</div>
|
|
<div class="arch-flow-step">Go Pollers</div>
|
|
<div class="arch-flow-arrow">↓</div>
|
|
<div class="arch-flow-step">NATS Event Bus</div>
|
|
<div class="arch-flow-arrow">↓</div>
|
|
<div class="arch-flow-step">FastAPI Backend</div>
|
|
<div class="arch-flow-arrow">↓</div>
|
|
<div class="arch-flow-step">PostgreSQL + TimescaleDB</div>
|
|
<div class="arch-flow-arrow">↓</div>
|
|
<div class="arch-flow-step">React Web Interface</div>
|
|
</div>
|
|
|
|
<p class="section-desc">This architecture allows the system to scale horizontally while keeping polling, processing, and the user interface separated.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- Screenshots -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<section id="screenshots" class="screenshots-section">
|
|
<div class="container">
|
|
<span class="section-label">IN ACTION</span>
|
|
<h2 class="section-title">See it in action</h2>
|
|
</div>
|
|
<div class="screenshots-scroll">
|
|
<div class="screenshots-track">
|
|
|
|
<div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
|
|
<img src="assets/01-fleet-dashboard.png" alt="Fleet Dashboard showing 49 devices, 100% online with bandwidth charts and event feed" loading="lazy" width="1440" height="900">
|
|
<div style="padding:12px 16px">
|
|
<div style="color:#E4E4ED;font-weight:600">Fleet Dashboard</div>
|
|
<div style="color:#62627F;font-size:13px">Real-time fleet overview with events, bandwidth, and health</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
|
|
<img src="assets/02-fleet-traffic.png" alt="Fleet traffic view showing CPU and memory stats with top resource consumers table" loading="lazy" width="1440" height="900">
|
|
<div style="padding:12px 16px">
|
|
<div style="color:#E4E4ED;font-weight:600">Fleet Traffic</div>
|
|
<div style="color:#62627F;font-size:13px">Top resource consumers with CPU and memory stats</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
|
|
<img src="assets/03-firmware-management.png" alt="Firmware management showing version groups and device list" loading="lazy" width="1440" height="900">
|
|
<div style="padding:12px 16px">
|
|
<div style="color:#E4E4ED;font-weight:600">Firmware Management</div>
|
|
<div style="color:#62627F;font-size:13px">Version groups, upgrade tracking, and device firmware list</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
|
|
<img src="assets/04-config-templates.png" alt="Configuration templates showing 6 reusable config templates" loading="lazy" width="1440" height="900">
|
|
<div style="padding:12px 16px">
|
|
<div style="color:#E4E4ED;font-weight:600">Config Templates</div>
|
|
<div style="color:#62627F;font-size:13px">Reusable configuration templates for fleet-wide deployment</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
|
|
<img src="assets/05-device-detail.png" alt="Device detail view for gw-bowling-alley showing interface traffic and session buttons" loading="lazy" width="1440" height="900">
|
|
<div style="padding:12px 16px">
|
|
<div style="color:#E4E4ED;font-weight:600">Device Detail</div>
|
|
<div style="color:#62627F;font-size:13px">Per-device overview with interfaces, sessions, and actions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
|
|
<img src="assets/06-interface-utilization.png" alt="Interface utilization showing RX and TX bars per interface" loading="lazy" width="1440" height="900">
|
|
<div style="padding:12px 16px">
|
|
<div style="color:#E4E4ED;font-weight:600">Interface Utilization</div>
|
|
<div style="color:#62627F;font-size:13px">Per-interface RX/TX bandwidth utilization bars</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
|
|
<img src="assets/07-device-health.png" alt="Device health showing CPU, memory, disk, and temperature charts" loading="lazy" width="1440" height="900">
|
|
<div style="padding:12px 16px">
|
|
<div style="color:#E4E4ED;font-weight:600">Device Health</div>
|
|
<div style="color:#62627F;font-size:13px">CPU, memory, disk, and temperature monitoring charts</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
|
|
<img src="assets/08-traffic-analytics.png" alt="Traffic analytics showing per-interface time series charts" loading="lazy" width="1440" height="900">
|
|
<div style="padding:12px 16px">
|
|
<div style="color:#E4E4ED;font-weight:600">Traffic Analytics</div>
|
|
<div style="color:#62627F;font-size:13px">Per-interface traffic time series and historical analysis</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- Quick Start -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<section class="quickstart-section">
|
|
<div class="container">
|
|
<span class="section-label">QUICK START</span>
|
|
<h2 class="section-title">Deploy The Other Dude with two commands</h2>
|
|
|
|
<div class="code-window">
|
|
<div class="code-window-header">
|
|
<span class="code-dot code-dot--red"></span>
|
|
<span class="code-dot code-dot--yellow"></span>
|
|
<span class="code-dot code-dot--green"></span>
|
|
<span class="code-window-title">Terminal</span>
|
|
</div>
|
|
<pre class="code-window-body"><code><span class="code-comment"># Clone and run the setup wizard</span>
|
|
<span class="code-cmd">git clone https://github.com/staack/the-other-dude.git</span>
|
|
<span class="code-cmd">cd the-other-dude</span>
|
|
<span class="code-cmd">python3 setup.py</span></code></pre>
|
|
</div>
|
|
<p class="section-desc" style="margin-top: 24px;">The setup wizard configures your database, generates cryptographic keys, bootstraps OpenBao, sets up your reverse proxy, builds the Docker images, and starts everything. No manual .env editing required.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- CTA -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<section class="cta-section">
|
|
<div class="container">
|
|
<span class="section-label">OPEN SOURCE</span>
|
|
<h2 class="cta-title">The Other Dude is open source and self-hosted</h2>
|
|
<p class="cta-desc">Run it yourself, modify it, or contribute improvements.</p>
|
|
<div class="cta-actions">
|
|
<a href="https://github.com/staack/the-other-dude" class="btn btn-primary" rel="noopener">View on GitHub</a>
|
|
</div>
|
|
<div class="cta-closing">
|
|
<p class="cta-closing-title">Centralized management for MikroTik networks.</p>
|
|
<p class="cta-tagline">Less time juggling tools.<br>More time running your network.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
<!-- Footer -->
|
|
<!-- ═══════════════════════════════════════════ -->
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="footer-inner container">
|
|
<div class="footer-brand">
|
|
<span class="footer-logo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24" aria-hidden="true" style="vertical-align: middle; margin-right: 8px;">
|
|
<rect x="2" y="2" width="60" height="60" rx="8" fill="none" stroke="#8B1A1A" stroke-width="2"/>
|
|
<rect x="6" y="6" width="52" height="52" rx="5" fill="none" stroke="#F5E6C8" stroke-width="1.5"/>
|
|
<rect x="8" y="8" width="48" height="48" rx="4" fill="#8B1A1A" opacity="0.15"/>
|
|
<path d="M32 8 L56 32 L32 56 L8 32 Z" fill="none" stroke="#8B1A1A" stroke-width="2"/>
|
|
<path d="M32 13 L51 32 L32 51 L13 32 Z" fill="none" stroke="#F5E6C8" stroke-width="1.5"/>
|
|
<path d="M32 18 L46 32 L32 46 L18 32 Z" fill="#8B1A1A"/>
|
|
<path d="M32 19 L38 32 L32 45 L26 32 Z" fill="#2A9D8F"/>
|
|
<path d="M19 32 L32 26 L45 32 L32 38 Z" fill="#F5E6C8"/>
|
|
<circle cx="32" cy="32" r="5" fill="#8B1A1A"/>
|
|
<circle cx="32" cy="32" r="2.5" fill="#2A9D8F"/>
|
|
</svg>
|
|
The Other Dude
|
|
</span>
|
|
<span class="footer-copy">© 2026 The Other Dude. All rights reserved.</span>
|
|
</div>
|
|
<nav class="footer-links" aria-label="Footer navigation">
|
|
<a href="docs.html">Docs</a>
|
|
<a href="blog/">Blog</a>
|
|
<a href="#what-it-does">Features</a>
|
|
<a href="docs.html#security">Security</a>
|
|
<a href="docs.html#api">API Reference</a>
|
|
<a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
|
|
<a href="mailto:license@theotherdude.net">Licensing</a>
|
|
<a href="mailto:support@theotherdude.net">Support</a>
|
|
</nav>
|
|
<p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses a self-hosted, cookie-free analytics pixel to count page views. No personal data is collected or shared with third parties.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Lightbox -->
|
|
<div class="lightbox" id="lightbox" role="dialog" aria-label="Image preview">
|
|
<button class="lightbox-close" aria-label="Close image preview">×</button>
|
|
<img src="" alt="The Other Dude dashboard managing multiple MikroTik routers">
|
|
<div class="lightbox-caption"></div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
<script>
|
|
(function() {
|
|
var lb = document.getElementById('lightbox');
|
|
var lbImg = lb.querySelector('img');
|
|
var lbCap = lb.querySelector('.lightbox-caption');
|
|
var lbClose = lb.querySelector('.lightbox-close');
|
|
|
|
function openLightbox(img) {
|
|
lbImg.src = img.src;
|
|
lbImg.alt = img.alt;
|
|
var card = img.closest('.screenshot-card');
|
|
var cap = card.querySelector('figcaption') || card.querySelector('div > div:first-child');
|
|
lbCap.textContent = cap ? cap.textContent : '';
|
|
lb.classList.add('active');
|
|
lbClose.focus();
|
|
}
|
|
|
|
function closeLightbox() {
|
|
lb.classList.remove('active');
|
|
}
|
|
|
|
document.querySelectorAll('.screenshot-card img').forEach(function(img) {
|
|
img.setAttribute('tabindex', '0');
|
|
img.setAttribute('role', 'button');
|
|
img.addEventListener('click', function() { openLightbox(img); });
|
|
img.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
openLightbox(img);
|
|
}
|
|
});
|
|
});
|
|
|
|
lbClose.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
closeLightbox();
|
|
});
|
|
|
|
lb.addEventListener('click', closeLightbox);
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') closeLightbox();
|
|
});
|
|
})();
|
|
</script>
|
|
<script>
|
|
(function(){
|
|
var d=document,i=new Image();
|
|
i.src="https://telemetry.theotherdude.net/px?p="+encodeURIComponent(location.pathname)
|
|
+"&t="+encodeURIComponent(d.title)
|
|
+"&r="+encodeURIComponent(d.referrer)
|
|
+"&sw="+screen.width;
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|