8277653c43
Modules: Dashboard, Serveurs, Campagnes, Planning, Specifiques, Settings, Users Stack: FastAPI + Jinja2 + HTMX + Alpine.js + TailwindCSS + PostgreSQL Features: Qualys sync, prereqs auto, planning annuel, server specifics, role-based access Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
91 lines
6.4 KiB
HTML
91 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ app_name }} - {% block title %}{% endblock %}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
|
<script src="https://unpkg.com/alpinejs@3.14.3/dist/cdn.min.js" defer></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: { extend: { colors: {
|
|
cyber: { bg: '#0a0e17', card: '#111827', border: '#1e3a5f', accent: '#00d4ff', green: '#00ff88', red: '#ff3366', yellow: '#ffcc00' }
|
|
}}}
|
|
}
|
|
</script>
|
|
<style>
|
|
body { background: #0a0e17; color: #e2e8f0; font-family: 'Segoe UI', system-ui, sans-serif; }
|
|
.sidebar { background: #111827; border-right: 1px solid #1e3a5f; }
|
|
.card { background: #111827; border: 1px solid #1e3a5f; border-radius: 8px; }
|
|
.btn-primary { background: #00d4ff; color: #0a0e17; font-weight: 600; border-radius: 6px; }
|
|
.btn-primary:hover { background: #00b8e6; }
|
|
.btn-danger { background: #ff3366; color: white; border-radius: 6px; }
|
|
.btn-sm { padding: 2px 10px; font-size: 0.75rem; border-radius: 4px; cursor: pointer; }
|
|
.table-cyber th { background: #1e3a5f; color: #00d4ff; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.table-cyber td { border-bottom: 1px solid #1e3a5f; font-size: 0.8rem; }
|
|
.table-cyber tr:hover { background: #1a2332; cursor: pointer; }
|
|
.table-cyber tr.selected { background: #1e3a5f44; }
|
|
.badge { padding: 2px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: 600; }
|
|
.badge-green { background: #00ff8822; color: #00ff88; }
|
|
.badge-red { background: #ff336622; color: #ff3366; }
|
|
.badge-yellow { background: #ffcc0022; color: #ffcc00; }
|
|
.badge-blue { background: #00d4ff22; color: #00d4ff; }
|
|
.badge-gray { background: #4a556822; color: #94a3b8; }
|
|
input, select, textarea { background: #0a0e17; border: 1px solid #1e3a5f; color: #e2e8f0; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; }
|
|
input:focus, select:focus, textarea:focus { outline: none; border-color: #00d4ff; box-shadow: 0 0 0 2px #00d4ff33; }
|
|
.panel-slide { transition: transform 0.3s ease, opacity 0.3s ease; }
|
|
.htmx-indicator { opacity: 0; transition: opacity 200ms; }
|
|
.htmx-request .htmx-indicator { opacity: 1; }
|
|
.inline-edit { background: transparent; border: 1px solid transparent; padding: 2px 4px; }
|
|
.inline-edit:hover { border-color: #1e3a5f; }
|
|
.inline-edit:focus { background: #0a0e17; border-color: #00d4ff; }
|
|
.toast { position: fixed; bottom: 20px; right: 20px; padding: 12px 24px; border-radius: 8px; z-index: 1000; animation: fadeIn 0.3s; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen" hx-headers='{"X-Requested-With": "htmx"}'>
|
|
{% if user %}
|
|
<div class="flex min-h-screen">
|
|
<aside class="sidebar w-52 flex-shrink-0 flex flex-col">
|
|
<div class="p-4 border-b border-cyber-border">
|
|
<h1 class="text-cyber-accent font-bold text-lg">PatchCenter</h1>
|
|
<p class="text-xs text-gray-500">v2.0 — SecOps</p>
|
|
</div>
|
|
<nav class="flex-1 p-3 space-y-1">
|
|
<a href="/dashboard" class="block px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 {% if 'dashboard' in request.url.path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %}">Dashboard</a>
|
|
<a href="/servers" class="block px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 {% if request.url.path == '/servers' or '/servers/' in request.url.path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %}">Serveurs</a>
|
|
<a href="/specifics" class="block px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 {% if 'specifics' in request.url.path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6 text-xs">Specifiques</a>
|
|
<a href="/campaigns" class="block px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 {% if 'campaigns' in request.url.path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %}">Campagnes</a>
|
|
<a href="/planning" class="block px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 {% if 'planning' in request.url.path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %}">Planning</a>
|
|
<a href="#" class="block px-3 py-2 rounded-md text-sm text-gray-600">Tags Qualys</a>
|
|
<a href="#" class="block px-3 py-2 rounded-md text-sm text-gray-600">Audit</a>
|
|
<a href="/users" class="block px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 {% if 'users' in request.url.path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %}">Utilisateurs</a>
|
|
<a href="/settings" class="block px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 {% if 'settings' in request.url.path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %}">Settings</a>
|
|
</nav>
|
|
</aside>
|
|
<main class="flex-1 flex flex-col overflow-hidden">
|
|
<!-- Top bar -->
|
|
<header class="flex items-center justify-end px-6 py-2 border-b border-cyber-border bg-cyber-card">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-sm text-gray-400">{{ user.sub }}</span>
|
|
<span class="badge badge-blue">{{ user.role }}</span>
|
|
<a href="/logout" class="btn-sm bg-cyber-border text-gray-300 hover:bg-red-900/40 hover:text-cyber-red transition-colors">Deconnexion</a>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<div class="flex-1 p-6 overflow-auto" id="main-content">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
<div id="detail-panel" class="w-0 overflow-hidden transition-all duration-300 border-l border-cyber-border bg-cyber-card">
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% else %}
|
|
{% block fullpage %}{% endblock %}
|
|
{% endif %}
|
|
<div id="toast-container"></div>
|
|
</body>
|
|
</html>
|