APPS/ops-dashboard.git - git.mnsoft.org

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OPS Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="/static/css/style.css">
  <style>
    body { background: #0f172a; color: #e2e8f0; margin: 0; }
    #app { display: flex; min-height: 100vh; }
    #sidebar { width: 240px; background: #111827; border-right: 1px solid #1f2937; display: flex; flex-direction: column; flex-shrink: 0; }
    #main { flex: 1; display: flex; flex-direction: column; overflow-x: hidden; }
    #topbar { background: #111827; border-bottom: 1px solid #1f2937; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
    #page-content { flex: 1; padding: 1.5rem; overflow-y: auto; }
    .breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #9ca3af; }
    .breadcrumb a { color: #60a5fa; cursor: pointer; text-decoration: none; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb .sep { color: #4b5563; }
    .breadcrumb .current { color: #e2e8f0; font-weight: 500; }
    .hamburger { display: none; background: none; border: none; color: #9ca3af; font-size: 1.5rem; cursor: pointer; padding: 0.25rem; }
    .sidebar-logo { padding: 1.25rem 1rem; font-size: 1.125rem; font-weight: 700; color: #f3f4f6; border-bottom: 1px solid #1f2937; display: flex; align-items: center; gap: 0.5rem; }
    .sidebar-nav { padding: 0.75rem 0.5rem; flex: 1; }
    .sidebar-footer { padding: 0.75rem 1rem; border-top: 1px solid #1f2937; font-size: 0.75rem; color: #6b7280; }
    .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
    .env-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
    .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
    .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
    .card-clickable { cursor: pointer; transition: border-color 0.2s, transform 0.15s; }
    .card-clickable:hover { border-color: #60a5fa; transform: translateY(-1px); }
    .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 40; }
    @media (max-width: 768px) {
      #sidebar { position: fixed; left: -240px; top: 0; bottom: 0; z-index: 50; transition: left 0.2s; }
      #sidebar.open { left: 0; }
      .mobile-overlay.open { display: block; }
      .hamburger { display: block; }
      .project-grid, .env-grid, .service-grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>

<!-- Login Overlay -->
<div id="login-overlay" style="position:fixed;inset:0;background:#0f172a;z-index:100;display:flex;align-items:center;justify-content:center;">
  <div class="card" style="width:100%;max-width:380px;text-align:center;">
    <div style="font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;color:#f3f4f6;">OPS Dashboard</div>
    <input type="password" id="login-token" placeholder="Enter access token" class="form-input" style="margin-bottom:1rem;"
      onkeydown="if(event.key==='Enter')doLogin()">
    <button onclick="doLogin()" class="btn btn-primary" style="width:100%;">Login</button>
    <div id="login-error" style="color:#f87171;font-size:0.875rem;margin-top:0.75rem;display:none;"></div>
  </div>
</div>

<!-- App Shell -->
<div id="app" style="display:none;">
  <!-- Mobile overlay -->
  <div id="mobile-overlay" class="mobile-overlay" onclick="toggleSidebar()"></div>

  <!-- Sidebar -->
  <aside id="sidebar">
    <div class="sidebar-logo">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><circle cx="6" cy="6" r="1" fill="#60a5fa"/><circle cx="6" cy="18" r="1" fill="#60a5fa"/></svg>
      OPS Dashboard
    </div>
    <nav class="sidebar-nav" id="sidebar-nav">
      <a class="sidebar-link active" data-page="dashboard" onclick="showPage('dashboard')">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
        Dashboard
      </a>
      <a class="sidebar-link" data-page="services" onclick="showPage('services')">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
        Services
      </a>
      <a class="sidebar-link" data-page="backups" onclick="showPage('backups')">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Backups
      </a>
      <a class="sidebar-link" data-page="system" onclick="showPage('system')">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
        System
      </a>
      <a class="sidebar-link" data-page="restore" onclick="showPage('restore')">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
        Restore
      </a>
    </nav>
    <div class="sidebar-footer">
      <a onclick="doLogout()" style="color:#9ca3af;cursor:pointer;">Logout</a>
    </div>
  </aside>

  <!-- Main Content -->
  <div id="main">
    <!-- Top bar -->
    <div id="topbar">
      <button class="hamburger" onclick="toggleSidebar()">&#9776;</button>
      <div id="breadcrumbs" class="breadcrumb" style="flex:1;"></div>
      <div style="display:flex;align-items:center;gap:0.75rem;">
        <div id="refresh-indicator" class="refresh-ring paused" title="Auto-refresh"></div>
        <button class="btn btn-ghost btn-xs" onclick="refreshCurrentPage()" title="Refresh now">Refresh</button>
      </div>
    </div>

    <!-- Page content -->
    <div id="page-content"></div>
  </div>
</div>

<!-- Toast Container -->
<div id="toast-container" class="toast-container"></div>

<!-- Log Modal -->
<div id="log-modal" class="modal-overlay" style="display:none;" onclick="if(event.target===this)closeLogModal()">
  <div class="modal-box" style="max-width:800px;">
    <div class="modal-header">
      <span id="log-modal-title" style="font-weight:600;color:#f3f4f6;">Container Logs</span>
      <button onclick="closeLogModal()" style="background:none;border:none;color:#9ca3af;font-size:1.25rem;cursor:pointer;">&times;</button>
    </div>
    <div class="modal-body" style="padding:0;">
      <div id="log-modal-content" class="terminal" style="max-height:60vh;border:none;border-radius:0;"></div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost btn-sm" onclick="closeLogModal()">Close</button>
      <button class="btn btn-primary btn-sm" id="log-refresh-btn" onclick="refreshLogs()">Refresh</button>
    </div>
  </div>
</div>

<script src="/static/js/app.js"></script>
</body>
</html>