95 lines
5.9 KiB
PHP
95 lines
5.9 KiB
PHP
<?php if (session_status() === PHP_SESSION_NONE) session_start(); ?>
|
|
<!DOCTYPE html>
|
|
<html lang="pt">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title><?= isset($title) ? htmlspecialchars($title).' — Proxmox' : 'Proxmox' ?></title>
|
|
<style>
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--bg:#0d1117;--surface:#161b22;--surface2:#1c2128;--border:#30363d;
|
|
--text:#e6edf3;--muted:#7d8590;--accent:#2f81f7;--accent-hover:#388bfd;
|
|
--danger:#da3633;--danger-hover:#f85149;--success:#3fb950;--radius:8px;
|
|
}
|
|
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;min-height:100vh}
|
|
a{color:var(--accent);text-decoration:none}
|
|
a:hover{color:var(--accent-hover)}
|
|
.header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
|
|
.header-brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--text)}
|
|
.header-brand svg{color:var(--accent)}
|
|
.header-nav{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:13px}
|
|
.header-nav strong{color:var(--text)}
|
|
.header-nav a{color:var(--muted);padding:5px 10px;border-radius:6px;transition:.15s}
|
|
.header-nav a:hover{background:var(--surface2);color:var(--text)}
|
|
.page{max-width:1100px;margin:0 auto;padding:32px 24px}
|
|
.breadcrumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin-bottom:24px}
|
|
.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--text)}.breadcrumb .sep{opacity:.4}
|
|
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
|
|
.page-header h1{font-size:22px;font-weight:600}
|
|
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
|
|
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
|
.card-header h2{font-size:15px;font-weight:600}
|
|
.card-body{padding:20px}
|
|
.table-wrap{overflow-x:auto}
|
|
table{width:100%;border-collapse:collapse}
|
|
thead tr{background:var(--surface2)}
|
|
th{padding:11px 16px;text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border)}
|
|
td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
|
|
tbody tr:last-child td{border-bottom:none}
|
|
tbody tr:hover{background:var(--surface2)}
|
|
.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;letter-spacing:.04em}
|
|
.badge-tcp{background:#1f3a5f;color:#58a6ff}.badge-udp{background:#1f3d2f;color:#3fb950}
|
|
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:.15s;text-decoration:none}
|
|
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
|
|
.btn-primary:hover{background:var(--accent-hover);color:#fff}
|
|
.btn-secondary{background:var(--surface2);color:var(--text);border-color:var(--border)}
|
|
.btn-secondary:hover{background:#2d333b;color:var(--text)}
|
|
.btn-danger{background:transparent;color:var(--danger);border-color:#6e2120}
|
|
.btn-danger:hover{background:#6e2120;color:#fff}
|
|
.btn-sm{padding:4px 10px;font-size:12px}
|
|
.form-group{margin-bottom:18px}
|
|
.form-group label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}
|
|
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:14px;outline:none;transition:.15s}
|
|
.form-group input:focus,.form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,129,247,.15)}
|
|
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
|
.form-actions{display:flex;gap:10px;margin-top:24px}
|
|
.alert{padding:12px 16px;border-radius:6px;font-size:13px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
|
|
.alert-error{background:#2d0f0e;border:1px solid #6e2120;color:#f85149}
|
|
.alert-success{background:#0d2818;border:1px solid #1a4a2e;color:#3fb950}
|
|
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
|
|
.nav-section{margin-bottom:28px}
|
|
.nav-section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
|
|
.nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
|
|
.nav-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);text-decoration:none;transition:.15s}
|
|
.nav-item:hover{border-color:var(--accent);background:#1c2128;color:var(--text)}
|
|
.nav-item .nav-ico{width:34px;height:34px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
|
|
.nav-item .nav-label{font-size:13px;font-weight:500}
|
|
.nav-item.danger{border-color:#6e2120}
|
|
.nav-item.danger:hover{background:#2d0f0e;border-color:var(--danger)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="header-brand">
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
|
|
</svg>
|
|
Proxmox
|
|
</div>
|
|
<div class="header-nav">
|
|
<?php if (!empty($_SESSION['username'])): ?>
|
|
<span>👤 <strong><?= htmlspecialchars($_SESSION['username']) ?></strong></span>
|
|
<?php if (($title ?? '') !== 'Painel'): ?>
|
|
<a href="/painel.php">← Painel</a>
|
|
<?php endif; ?>
|
|
<a href="/api/logout.php" style="color:var(--danger)">Sair</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
<div class="page">
|
|
<?= $content ?? '' ?>
|
|
</div>
|
|
</body>
|
|
</html>
|