nx9-wg/crates/nx9-wg-api/src/routes/app_index.html

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>nx9-wg — Native WireGuard Appliance</title>
  <meta name="description" content="Production Native Rust WireGuard Management Appliance for Linux">
  <style>
/* STYLE_PLACEHOLDER */
  </style>
</head>
<body>
  <!-- Unauthenticated Login View -->
  <div id="login-view" style="display: none;">
    <div class="login-card">
      <div class="login-header">
        <span class="brand-mark">NX9</span>
        <h2>Administrator Login</h2>
        <p>Sign in to nx9-wg Native Linux Appliance</p>
      </div>
      <div id="login-error-msg" class="login-error" style="display: none;"></div>
      <form id="login-form" onsubmit="event.preventDefault(); submitLogin();">
        <div class="form-group">
          <label class="form-label" for="login-username">Username</label>
          <input type="text" id="login-username" class="form-input" value="admin" required autocomplete="username">
        </div>
        <div class="form-group">
          <label class="form-label" for="login-password">Password</label>
          <input type="password" id="login-password" class="form-input" required autofocus autocomplete="current-password">
        </div>
        <button type="submit" id="login-submit-btn" class="btn btn-primary" style="width: 100%; margin-top: 8px;">Sign In</button>
      </form>
    </div>
  </div>

  <!-- Authenticated Application Shell -->
  <div id="app-layout" style="display: none;">
    <!-- Top Application Bar -->
    <header class="topbar">
      <div class="topbar-left">
        <button id="menu-toggle-btn" class="menu-toggle-btn" aria-label="Toggle navigation drawer" onclick="toggleSidebar()">☰</button>
        <div class="brand-logo">
          <span class="brand-mark">NX9</span>
          <span>nx9-wg</span>
        </div>
      </div>
      <div class="topbar-right">
        <div class="ws-indicator" id="ws-indicator" title="WebSocket Live Event Stream">
          <span id="ws-dot">●</span> <span id="ws-label" style="display:none;">Live</span>
        </div>
        <div class="system-status-indicator" id="global-status-badge">
          <span>✓</span> <span>Operational</span>
        </div>
        <div class="admin-badge">
          <span>👤</span> <span id="admin-user-label">admin</span>
        </div>
        <button class="theme-toggle-btn" onclick="toggleTheme()" title="Toggle Dark/Light theme" aria-label="Toggle theme">
          <span id="theme-icon">🌙</span>
        </button>
        <button class="btn btn-secondary btn-sm" onclick="navigateTo('settings')" title="Settings">⚙️</button>
        <button class="btn btn-danger btn-sm" onclick="handleLogout()" title="Logout">Logout</button>
      </div>
    </header>

    <div class="main-container">
      <!-- Mobile Backdrop -->
      <div id="mobile-overlay" class="mobile-overlay" onclick="closeSidebar()"></div>

      <!-- Navigation Sidebar -->
      <nav id="sidebar" class="sidebar">
        <!-- Primary Navigation -->
        <div class="sidebar-section">
          <div class="sidebar-section-title">Primary</div>
          <a href="#dashboard" class="nav-link active" onclick="navigateTo('dashboard')">
            <span class="nav-icon">📊</span> Dashboard
          </a>
          <a href="#interfaces" class="nav-link" onclick="navigateTo('interfaces')">
            <span class="nav-icon">🔌</span> Interfaces
          </a>
          <a href="#peers" class="nav-link" onclick="navigateTo('peers')">
            <span class="nav-icon">📱</span> Peers
          </a>
          <a href="#networks" class="nav-link" onclick="navigateTo('networks')">
            <span class="nav-icon">🌐</span> Networks
          </a>
          <a href="#routes" class="nav-link" onclick="navigateTo('routes')">
            <span class="nav-icon">🛣️</span> Routes
          </a>
          <a href="#firewall" class="nav-link" onclick="navigateTo('firewall')">
            <span class="nav-icon">🛡️</span> Firewall
          </a>
          <a href="#nat" class="nav-link" onclick="navigateTo('nat')">
            <span class="nav-icon">🔀</span> NAT & Masquerade
          </a>
          <a href="#forwarding" class="nav-link" onclick="navigateTo('forwarding')">
            <span class="nav-icon">⚡</span> IP Forwarding
          </a>
        </div>

        <!-- Operations Navigation -->
        <div class="sidebar-section">
          <div class="sidebar-section-title">Operations</div>
          <a href="#reconciliation" class="nav-link" onclick="navigateTo('reconciliation')">
            <span class="nav-icon">🔄</span> Reconciliation
          </a>
          <a href="#diagnostics" class="nav-link" onclick="navigateTo('diagnostics')">
            <span class="nav-icon">🩺</span> Diagnostics
          </a>
          <a href="#live-state" class="nav-link" onclick="navigateTo('live-state')">
            <span class="nav-icon">📡</span> Live State
          </a>
        </div>

        <!-- Administration Navigation -->
        <div class="sidebar-section">
          <div class="sidebar-section-title">Administration</div>
          <a href="#settings" class="nav-link" onclick="navigateTo('settings')">
            <span class="nav-icon">⚙️</span> Settings
          </a>
          <a href="#backups" class="nav-link" onclick="navigateTo('backups')">
            <span class="nav-icon">💾</span> Backups
          </a>
          <a href="#audit" class="nav-link" onclick="navigateTo('audit')">
            <span class="nav-icon">📜</span> Audit Log
          </a>
          <a href="#administrator" class="nav-link" onclick="navigateTo('administrator')">
            <span class="nav-icon">👤</span> Administrator
          </a>
        </div>
      </nav>

      <!-- Main Content Container -->
      <main id="main-content" class="content-wrapper">
        <div id="page-container">
          <div style="padding: 40px; text-align: center; color: var(--text-secondary);">
            Loading nx9-wg native appliance...
          </div>
        </div>
      </main>
    </div>
  </div>

  <!-- Global Modal Container -->
  <div id="modal-root" style="display: none;"></div>

  <!-- Embedded Client Logic -->
  <script>
/* SCRIPT_PLACEHOLDER */
  </script>
</body>
</html>