| 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>{% block title %}CTI Detection Automation{% endblock %}</title> |
| 7 | <style> |
| 8 | :root { --bg:#f1f3f5; --panel:#ffffff; --border:#d9dee3; --ink:#1f2933; --muted:#627d98; --accent:#1c7ed6; --dark:#16242f; } |
| 9 | * { box-sizing: border-box; } |
| 10 | body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; font-size:14px; } |
| 11 | header.top { background:var(--dark); color:#fff; padding:14px 28px; display:flex; align-items:baseline; gap:14px; } |
| 12 | header.top .label { color:#9fb3c8; font-size:11px; letter-spacing:1px; text-transform:uppercase; } |
| 13 | header.top .title { font-size:17px; font-weight:600; } |
| 14 | .wrap { max-width:960px; margin:24px auto; padding:0 20px; } |
| 15 | .panel { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:22px 24px; margin-bottom:18px; } |
| 16 | .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } |
| 17 | .muted { color:var(--muted); } |
| 18 | h2 { font-size:16px; margin:0 0 14px 0; } |
| 19 | h3 { font-size:13px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); margin:18px 0 8px 0; } |
| 20 | table { width:100%; border-collapse:collapse; font-size:13px; } |
| 21 | th { text-align:left; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border); } |
| 22 | td { padding:6px 8px; border-bottom:1px solid #eef1f4; } |
| 23 | .cards { display:flex; gap:12px; margin:6px 0 4px 0; } |
| 24 | .card { flex:1; border-radius:6px; padding:14px; text-align:center; border:1px solid var(--border); } |
| 25 | .card .n { font-size:28px; font-weight:700; } |
| 26 | .card .k { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; } |
| 27 | .card.add { background:#e3f9e5; border-color:#c1eac5; } .card.add .n { color:#0b6b2e; } |
| 28 | .card.rem { background:#fff4e6; border-color:#ffd8a8; } .card.rem .n { color:#a14d07; } |
| 29 | .card.tot { background:#edf2f7; } .card.tot .n { color:#334e68; } |
| 30 | .actions { display:flex; gap:12px; margin-top:18px; align-items:center; } |
| 31 | button { font-size:14px; font-weight:600; padding:11px 26px; border-radius:6px; border:none; cursor:pointer; } |
| 32 | .approve { background:#2f9e44; color:#fff; } |
| 33 | .reject { background:#fff; color:#c92a2a; border:1px solid #ffc9c9; } |
| 34 | input[type=text] { flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-size:13px; } |
| 35 | .badge { display:inline-block; font-size:11px; padding:2px 9px; border-radius:11px; font-weight:600; } |
| 36 | .badge.pending { background:#fff3bf; color:#846a00; } |
| 37 | .badge.approved { background:#d3f9d8; color:#2b8a3e; } |
| 38 | .badge.rejected { background:#ffe3e3; color:#c92a2a; } |
| 39 | a.row { color:var(--accent); text-decoration:none; } |
| 40 | </style> |
| 41 | </head> |
| 42 | <body> |
| 43 | <header class="top"> |
| 44 | <span class="label">CTI Detection Automation</span> |
| 45 | <span class="title">{% block heading %}Analyst console{% endblock %}</span> |
| 46 | </header> |
| 47 | <div class="wrap"> |
| 48 | {% block content %}{% endblock %} |
| 49 | </div> |
| 50 | </body> |
| 51 | </html> |