From 283487b2f69f1a4884c27076b605e41903761aeb Mon Sep 17 00:00:00 2001 From: numex-admin Date: Wed, 9 Sep 2026 22:40:26 +0000 Subject: [PATCH] =?UTF-8?q?Numex=20yay=C4=B1n:=20public/style.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/style.css | 232 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 public/style.css diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..bbdab34 --- /dev/null +++ b/public/style.css @@ -0,0 +1,232 @@ +/* ===================================================================== + MISSION CONTROL — cyber / sci-fi neon cam teması + Koyu zemin · camgöbeği/yeşil/kehribar/kırmızı neon uyarı kuşakları + ===================================================================== */ + +:root { + --bg: #05080f; + --bg-2: #0a0f1c; + --panel: rgba(14, 22, 40, 0.55); + --panel-edge: rgba(120, 190, 255, 0.22); + --text: #cfe6ff; + --text-dim: #67819f; + + --cyan: #00e5ff; /* camgöbeği */ + --green: #39ff88; /* neon yeşil */ + --amber: #ffb020; /* kehribar sarısı */ + --red: #ff3550; /* kritik kırmızı */ + + --glow-cyan: 0 0 14px rgba(0, 229, 255, 0.55); + --glow-green: 0 0 12px rgba(57, 255, 136, 0.45); + --glow-amber: 0 0 12px rgba(255, 176, 32, 0.45); + --glow-red: 0 0 14px rgba(255, 53, 80, 0.6); + + --mono: 'Consolas', 'SF Mono', 'Menlo', monospace; +} + +* { box-sizing: border-box; margin: 0; padding: 0; } + +html, body { + min-height: 100%; +} + +body { + background: + radial-gradient(1200px 600px at 20% -10%, #0c1730 0%, transparent 60%), + radial-gradient(900px 500px at 110% 10%, #0b1f2e 0%, transparent 55%), + linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); + color: var(--text); + font-family: var(--mono); + overflow-x: hidden; + padding: 18px clamp(10px, 2vw, 34px); + position: relative; +} + +/* Arka plan neon küreleri */ +.bg-orb { position: fixed; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; } +.bg-orb--a { width: 420px; height: 420px; background: rgba(0, 229, 255, 0.09); top: -160px; left: -120px; } +.bg-orb--b { width: 480px; height: 480px; background: rgba(255, 53, 80, 0.06); bottom: -200px; right: -140px; } + +/* Tarama çizgileri */ +.scanlines { + position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.08; + background: repeating-linear-gradient( + 0deg, transparent 0 2px, rgba(255, 255, 255, 0.09) 2px 4px + ); +} + +section, header { position: relative; z-index: 2; } + +/* Cam panel */ +.glass { + background: linear-gradient(160deg, rgba(20, 30, 55, 0.62), rgba(10, 16, 30, 0.45)); + border: 1px solid var(--panel-edge); + border-radius: 14px; + backdrop-filter: blur(7px); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); +} +.glass:hover { border-color: rgba(120, 190, 255, 0.4); } + +/* ================= TOP BAR ================= */ +.topbar { + display: flex; justify-content: space-between; align-items: center; + padding: 14px 20px; margin-bottom: 18px; + flex-wrap: wrap; gap: 14px; +} +.brand { display: flex; align-items: center; gap: 14px; } +.brand-bolt { + width: 44px; height: 44px; border-radius: 10px; flex: none; + background: radial-gradient(circle at 30% 30%, var(--cyan), #006b80); + box-shadow: var(--glow-cyan); + position: relative; + animation: pulse-glow 2.4s infinite ease-in-out; +} +.brand-bolt::after { + content: ''; position: absolute; inset: 12px; + border: 2px solid rgba(255,255,255,0.75); border-radius: 4px; + box-shadow: inset 0 0 8px rgba(0,0,0,0.4); + clip-path: polygon(55% 5%, 45% 40%, 70% 45%, 40% 95%, 55% 55%, 28% 52%); +} +.brand h1 { + font-size: 22px; letter-spacing: 3px; color: var(--cyan); + text-shadow: var(--glow-cyan); font-weight: 700; +} +.tagline { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; } + +.topstats { display: flex; gap: 16px; flex-wrap: wrap; } +.stat { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid rgba(120,190,255,.12); border-radius: 8px; background: rgba(5,10,20,.5); } +.stat b { display: block; font-size: 16px; } +.stat small { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; } + +.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } +.dot--on { background: var(--green); box-shadow: var(--glow-green); animation: pulse-glow 1.5s infinite; } + +/* ================= PANEL BAŞLIKLARI ================= */ +.panel { padding: 16px 18px; } +.panel-title { font-size: 13px; letter-spacing: 2px; color: var(--text); font-weight: 700; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; text-transform: uppercase; } +.accent { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; } +.accent--cyan { background: var(--cyan); box-shadow: var(--glow-cyan); } +.accent--green { background: var(--green); box-shadow: var(--glow-green); } +.accent--amber { background: var(--amber); box-shadow: var(--glow-amber); } +.accent--red { background: var(--red); box-shadow: var(--glow-red); } + +/* ================= GAUGE PANELS ================= */ +.row { display: grid; gap: 18px; margin-bottom: 18px; } +.row--gauges { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } +.row--primary { grid-template-columns: 2fr 1fr; } + +.gauge-panel { display: flex; flex-direction: column; align-items: center; } +.gauge-panel canvas { margin: 4px auto; filter: drop-shadow(0 0 6px rgba(0,0,0,.4)); } +.gauge-label { text-align: center; margin-top: 8px; } +.gauge-label b { font-size: 26px; color: var(--cyan); } +.gauge-label span { display: block; font-size: 10px; color: var(--text-dim); margin-top: 3px; letter-spacing: 1px; } +.gauge-label .net-sub { font-size: 11px; color: var(--amber); } +.gauge-label .net-sub b { font-size: 12px; } + +/* ================= CHART ================= */ +.chart-panel .panel-head, .table-panel .panel-head, .log-panel .panel-head { display: flex; justify-content: space-between; align-items: center; } +.legend { font-size: 10px; color: var(--text-dim); display: flex; gap: 10px; align-items: center; } +.lg { width: 18px; height: 4px; display: inline-block; border-radius: 2px; } +.lg--cyan { background: var(--cyan); box-shadow: var(--glow-cyan); } +.lg--amber { background: var(--amber); box-shadow: var(--glow-amber); } + +#cpuChart { width: 100%; display: block; border-radius: 6px; } +.chart-axis { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-dim); padding: 4px 4px 0; } + +/* ================= DISK GAUGE ================= */ +.disk-panel { text-align: center; } +.disk-gauge-wrap { position: relative; width: 200px; height: 200px; margin: 0 auto; } +.disk-score { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 42px; color: var(--amber); text-shadow: var(--glow-amber); } +.disk-unit { font-size: 10px; color: var(--text-dim); position: absolute; bottom: 52px; letter-spacing: 1px; } +#diskGauge { display: block; } +.disk-caption { font-size: 10px; color: var(--text-dim); margin-top: 8px; } +.disk-caption b { color: var(--amber); } + +/* ================= PROSES TABLOSU ================= */ +.table-panel { margin-bottom: 18px; } +.table-scroll { overflow-x: auto; max-height: 320px; overflow-y: auto; } +table { width: 100%; border-collapse: collapse; font-size: 13px; } +thead th { + text-align: left; padding: 9px 12px; font-size: 10px; letter-spacing: 2px; + color: var(--text-dim); text-transform: uppercase; + border-bottom: 1px solid rgba(0, 229, 255, 0.2); + position: sticky; top: 0; background: #0a1120; z-index: 1; +} +.th-action { text-align: right; } +tbody tr { + border-bottom: 1px solid rgba(120, 190, 255, 0.08); + transition: background 0.2s; + animation: row-in 0.3s ease; +} +tbody tr:hover { background: rgba(0, 229, 255, 0.05); } +tbody td { padding: 9px 12px; vertical-align: middle; } +tbody td.pid { color: var(--cyan); font-weight: 700; } +tbody td.svc { color: var(--text); text-transform: lowercase; } +tbody td svc b { letter-spacing: 1px; } +.cpu-cell { color: var(--green); } +.mem-cell { color: var(--amber); } +.cpu-cell.hot { color: var(--red); } +.status-pill { + display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10px; + letter-spacing: 1px; background: rgba(57,255,136,0.12); color: var(--green); + border: 1px solid rgba(57,255,136,0.4); +} +.status-pill.down { background: rgba(255,53,80,0.1); color: var(--red); border-color: rgba(255,53,80,0.4); } + +/* KILL butonu */ +.kill { + padding: 4px 12px; border-radius: 6px; cursor: pointer; + font-family: var(--mono); font-size: 11px; letter-spacing: 1px; + color: var(--red); background: rgba(255, 53, 80, 0.1); + border: 1px solid rgba(255, 53, 80, 0.6); + transition: all 0.15s; text-transform: uppercase; +} +.kill:hover { background: var(--red); color: #fff; box-shadow: var(--glow-red); } +.kill:disabled { opacity: 0.5; cursor: not-allowed; } + +.badge { font-size: 10px; padding: 3px 10px; border-radius: 20px; letter-spacing: 1px; color: var(--green); border: 1px solid rgba(57,255,136,0.4); } +.live-badge { color: var(--amber); border-color: rgba(255,176,32,0.5); } +.dot-pulse { width: 6px; height: 6px; background: var(--amber); border-radius: 50%; display: inline-block; margin-right: 5px; animation: pulse-glow 0.9s infinite; } + +.empty { text-align: center; padding: 24px; color: var(--text-dim); font-size: 13px; } +.hidden { display: none; } + +/* ================= KONSOL ================= */ +.log-panel { margin-bottom: 24px; } +.console { + font-size: 12px; line-height: 1.7; height: 250px; overflow-y: auto; + background: rgba(0, 5, 12, 0.7); border-radius: 8px; padding: 10px 14px; + border: 1px solid rgba(120, 190, 255, 0.12); +} +.console .line { display: flex; gap: 10px; animation: line-in 0.25s ease; white-space: nowrap; } +.console .line .t { color: #556b84; flex: none; } +.console .line .tag { flex: none; min-width: 76px; font-weight: 700; letter-spacing: 1px; } +.line.type-ok .tag { color: var(--green); } +.line.type-warn .tag { color: var(--amber); } +.line.type-crit .tag { color: var(--red); } +.line.type-info .tag { color: var(--cyan); } +.line.type-ok .msg { color: #b8f0ce; } +.line.type-warn .msg { color: var(--amber); } +.line.type-crit .msg { color: #ffb3bd; } +.line.type-info .msg { color: #bfe9ff; } + +/* ================= ANİMASYONLAR ================= */ +@keyframes pulse-glow { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.55; } +} +@keyframes row-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } +@keyframes line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } + +/* Scrollbar */ +::-webkit-scrollbar { width: 8px; height: 8px; } +::-webkit-scrollbar-track { background: rgba(5,10,20,.6); } +::-webkit-scrollbar-thumb { background: rgba(0,229,255,.35); border-radius: 4px; } +::-webkit-scrollbar-thumb:hover { background: rgba(0,229,255,.6); } + +/* Responsive */ +@media (max-width: 860px) { + .row--primary { grid-template-columns: 1fr; } + .brand h1 { font-size: 17px; } + body { padding: 12px; } +}