feat: black ops theme overhaul - reduce green, dark spec ops aesthetic
This commit is contained in:
parent
a1ac6d6e1d
commit
e39c54d87a
9 changed files with 328 additions and 311 deletions
|
|
@ -854,8 +854,8 @@
|
|||
<div class="editor-field">
|
||||
<label class="editor-label" for="themeAccentColor">ACCENT COLOUR</label>
|
||||
<div class="color-picker-row">
|
||||
<input type="color" id="themeAccentColor" class="editor-input color-input" value="#00ff41">
|
||||
<input type="text" id="themeAccentColorHex" class="editor-input color-hex" value="#00ff41" placeholder="#00ff41">
|
||||
<input type="color" id="themeAccentColor" class="editor-input color-input" value="#d0d0d0">
|
||||
<input type="text" id="themeAccentColorHex" class="editor-input color-hex" value="#d0d0d0" placeholder="#d0d0d0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-field">
|
||||
|
|
|
|||
196
css/admin.css
196
css/admin.css
|
|
@ -6,18 +6,18 @@
|
|||
--bg: #111111;
|
||||
--bg2: #141414;
|
||||
--bg3: #1a1a1a;
|
||||
--accent: #00ff41;
|
||||
--accent-dim: rgba(0, 255, 65, 0.15);
|
||||
--accent: #d0d0d0;
|
||||
--accent-dim: rgba(255, 255, 255, 0.05);
|
||||
--secondary: #ff2d2d;
|
||||
--secondary-dim: rgba(255, 45, 45, 0.15);
|
||||
--text: #c0c0c0;
|
||||
--text-dim: rgba(192, 192, 192, 0.5);
|
||||
--danger: #ff2d2d;
|
||||
--warn: #c9a227;
|
||||
--success: #00ff41;
|
||||
--success: #d0d0d0;
|
||||
--info: #c9a227;
|
||||
--border: rgba(0, 255, 65, 0.08);
|
||||
--border-strong: rgba(0, 255, 65, 0.2);
|
||||
--border: rgba(255, 255, 255, 0.03);
|
||||
--border-strong: rgba(255, 255, 255, 0.06);
|
||||
--sidebar-w: 220px;
|
||||
--topbar-h: 50px;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
|
|
@ -45,11 +45,11 @@ body {
|
|||
background: var(--bg);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 255, 65, 0.15);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 255, 65, 0.25);
|
||||
background: rgba(208, 208, 208, 0.08);
|
||||
}
|
||||
|
||||
/* ─── Login Screen ─── */
|
||||
|
|
@ -58,7 +58,7 @@ body {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(ellipse at center, rgba(0,255,65,0.03) 0%, transparent 70%), var(--bg);
|
||||
background: radial-gradient(ellipse at center, rgba(255,255,255,0.012) 0%, transparent 70%), var(--bg);
|
||||
}
|
||||
|
||||
.login-box {
|
||||
|
|
@ -77,7 +77,7 @@ body {
|
|||
.login-icon {
|
||||
font-size: 2.5rem;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 20px rgba(0,255,65,0.3);
|
||||
text-shadow: 0 0 20px rgba(208,208,208,0.1);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -121,7 +121,7 @@ body {
|
|||
}
|
||||
.login-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.15);
|
||||
box-shadow: 0 0 8px rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.login-error {
|
||||
|
|
@ -147,7 +147,7 @@ body {
|
|||
}
|
||||
.login-btn:hover {
|
||||
background: var(--accent-dim);
|
||||
box-shadow: 0 0 15px rgba(0,255,65,0.2);
|
||||
box-shadow: 0 0 15px rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
|
|
@ -264,7 +264,7 @@ body {
|
|||
}
|
||||
.mobile-menu-btn:hover {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.15);
|
||||
box-shadow: 0 0 8px rgba(255,255,255,0.05);
|
||||
}
|
||||
.mobile-menu-btn .hamburger-line {
|
||||
display: block;
|
||||
|
|
@ -331,11 +331,11 @@ body {
|
|||
}
|
||||
.sidebar-link:hover {
|
||||
color: var(--text);
|
||||
background: rgba(0,255,65,0.03);
|
||||
background: rgba(255,255,255,0.012);
|
||||
}
|
||||
.sidebar-link.active {
|
||||
color: var(--accent);
|
||||
background: rgba(0,255,65,0.05);
|
||||
background: rgba(255,255,255,0.02);
|
||||
border-left-color: var(--accent);
|
||||
}
|
||||
|
||||
|
|
@ -434,7 +434,7 @@ body {
|
|||
}
|
||||
.action-btn:hover {
|
||||
background: var(--accent-dim);
|
||||
box-shadow: 0 0 10px rgba(0,255,65,0.15);
|
||||
box-shadow: 0 0 10px rgba(255,255,255,0.05);
|
||||
}
|
||||
.action-btn.secondary {
|
||||
border-color: var(--text-dim);
|
||||
|
|
@ -504,7 +504,7 @@ body {
|
|||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0,255,65,0.2);
|
||||
text-shadow: 0 0 10px rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
/* ─── Services Grid (Dashboard) ─── */
|
||||
|
|
@ -534,7 +534,7 @@ body {
|
|||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.015);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.threat-id {
|
||||
|
|
@ -583,13 +583,13 @@ body {
|
|||
|
||||
.posts-table td {
|
||||
padding: 0.6rem 0.8rem;
|
||||
border-bottom: 1px solid rgba(0,255,65,0.03);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.012);
|
||||
font-size: 0.75rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.posts-table tr:hover td {
|
||||
background: rgba(0,255,65,0.02);
|
||||
background: rgba(255,255,255,0.01);
|
||||
}
|
||||
|
||||
.post-link {
|
||||
|
|
@ -616,7 +616,7 @@ body {
|
|||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.threat-low { color: var(--accent); border: 1px solid rgba(0,255,65,0.2); }
|
||||
.threat-low { color: #00cc33; border: 1px solid rgba(0,204,51,0.15); }
|
||||
.threat-medium { color: var(--warn); border: 1px solid rgba(255,165,2,0.2); }
|
||||
.threat-high { color: var(--danger); border: 1px solid rgba(255,71,87,0.2); }
|
||||
.threat-critical { color: #ff0040; border: 1px solid rgba(255,0,64,0.3); animation: critPulse 1.5s ease-in-out infinite; }
|
||||
|
|
@ -680,7 +680,7 @@ body {
|
|||
appearance: none;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: rgba(0,255,65,0.1);
|
||||
background: rgba(255,255,255,0.035);
|
||||
outline: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -691,7 +691,7 @@ body {
|
|||
background: var(--accent);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.4);
|
||||
box-shadow: 0 0 8px rgba(208,208,208,0.15);
|
||||
}
|
||||
|
||||
.range-val {
|
||||
|
|
@ -819,7 +819,7 @@ body {
|
|||
color: var(--accent);
|
||||
}
|
||||
.editor-preview .post-rendered .inline-code {
|
||||
background: rgba(0,255,65,0.06);
|
||||
background: rgba(255,255,255,0.025);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
|
|
@ -848,12 +848,12 @@ body {
|
|||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.015);
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.track-row:hover {
|
||||
background: rgba(0,255,65,0.02);
|
||||
background: rgba(255,255,255,0.01);
|
||||
}
|
||||
|
||||
.track-num {
|
||||
|
|
@ -928,13 +928,13 @@ body {
|
|||
transition: all 0.3s;
|
||||
}
|
||||
.toggle-row input[type="checkbox"]:checked {
|
||||
background: rgba(0,255,65,0.15);
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.toggle-row input[type="checkbox"]:checked::after {
|
||||
left: 20px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 6px rgba(0,255,65,0.4);
|
||||
box-shadow: 0 0 6px rgba(208,208,208,0.15);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
|
|
@ -966,13 +966,13 @@ body {
|
|||
transition: all 0.3s;
|
||||
}
|
||||
.toggle-switch:checked {
|
||||
background: rgba(0,255,65,0.15);
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.toggle-switch:checked::after {
|
||||
left: 20px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 6px rgba(0,255,65,0.4);
|
||||
box-shadow: 0 0 6px rgba(208,208,208,0.15);
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
|
|
@ -992,9 +992,9 @@ body {
|
|||
font-size: 0.75rem;
|
||||
}
|
||||
.section-item:hover {
|
||||
background: rgba(0,255,65,0.03);
|
||||
background: rgba(255,255,255,0.012);
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: 0 0 6px rgba(0,255,65,0.05);
|
||||
box-shadow: 0 0 6px rgba(255,255,255,0.02);
|
||||
}
|
||||
|
||||
.section-item-label {
|
||||
|
|
@ -1078,11 +1078,11 @@ body {
|
|||
display: inline-block;
|
||||
font-size: 0.55rem;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border: 1px solid rgba(0, 255, 65, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
color: var(--accent);
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
background: rgba(0, 255, 65, 0.05);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.order-badge {
|
||||
|
|
@ -1096,7 +1096,7 @@ body {
|
|||
height: 24px;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--accent);
|
||||
background: rgba(0, 255, 65, 0.05);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -1133,9 +1133,9 @@ body {
|
|||
cursor: grab;
|
||||
}
|
||||
.homepage-section-item:hover {
|
||||
background: rgba(0,255,65,0.03);
|
||||
background: rgba(255,255,255,0.012);
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: 0 0 6px rgba(0,255,65,0.05);
|
||||
box-shadow: 0 0 6px rgba(255,255,255,0.02);
|
||||
}
|
||||
.homepage-section-item:active {
|
||||
cursor: grabbing;
|
||||
|
|
@ -1188,12 +1188,12 @@ body {
|
|||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.015);
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.service-item:hover {
|
||||
background: rgba(0,255,65,0.02);
|
||||
background: rgba(255,255,255,0.01);
|
||||
}
|
||||
|
||||
.service-item-name {
|
||||
|
|
@ -1225,12 +1225,12 @@ body {
|
|||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.015);
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-item:hover {
|
||||
background: rgba(0,255,65,0.02);
|
||||
background: rgba(255,255,255,0.01);
|
||||
}
|
||||
|
||||
.nav-item-label {
|
||||
|
|
@ -1262,12 +1262,12 @@ body {
|
|||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.015);
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.link-item:hover {
|
||||
background: rgba(0,255,65,0.02);
|
||||
background: rgba(255,255,255,0.01);
|
||||
}
|
||||
|
||||
.link-item-icon {
|
||||
|
|
@ -1308,7 +1308,7 @@ body {
|
|||
}
|
||||
.api-group-card:hover {
|
||||
border-left-color: #fff;
|
||||
box-shadow: 0 0 12px rgba(0,255,65,0.06);
|
||||
box-shadow: 0 0 12px rgba(255,255,255,0.025);
|
||||
}
|
||||
|
||||
.api-group-header {
|
||||
|
|
@ -1383,7 +1383,7 @@ body {
|
|||
}
|
||||
.api-group-save:hover {
|
||||
background: var(--accent-dim);
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.15);
|
||||
box-shadow: 0 0 8px rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
/* ─── Theme / Appearance ─── */
|
||||
|
|
@ -1577,26 +1577,26 @@ body {
|
|||
}
|
||||
.backup-card:hover {
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: 0 0 10px rgba(0,255,65,0.06);
|
||||
box-shadow: 0 0 10px rgba(255,255,255,0.025);
|
||||
}
|
||||
|
||||
.backup-card.highlight {
|
||||
grid-column: 1 / -1;
|
||||
max-width: 800px;
|
||||
border-color: var(--accent);
|
||||
background: rgba(0, 255, 65, 0.03);
|
||||
box-shadow: 0 0 15px rgba(0,255,65,0.06);
|
||||
background: rgba(255, 255, 255, 0.012);
|
||||
box-shadow: 0 0 15px rgba(255,255,255,0.025);
|
||||
}
|
||||
|
||||
.backup-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 12px rgba(0,255,65,0.2);
|
||||
text-shadow: 0 0 12px rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.backup-card.highlight .backup-icon {
|
||||
font-size: 2.5rem;
|
||||
text-shadow: 0 0 20px rgba(0,255,65,0.3);
|
||||
text-shadow: 0 0 20px rgba(208,208,208,0.1);
|
||||
}
|
||||
|
||||
.backup-label {
|
||||
|
|
@ -1631,7 +1631,7 @@ body {
|
|||
}
|
||||
.backup-download-btn:hover {
|
||||
background: var(--accent-dim);
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.15);
|
||||
box-shadow: 0 0 8px rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.backup-download-btn .dl-icon {
|
||||
|
|
@ -1669,7 +1669,7 @@ body {
|
|||
.admin-notification.success {
|
||||
border-color: var(--success);
|
||||
color: var(--success);
|
||||
box-shadow: 0 0 15px rgba(0,255,65,0.1);
|
||||
box-shadow: 0 0 15px rgba(255,255,255,0.035);
|
||||
}
|
||||
|
||||
.admin-notification.error {
|
||||
|
|
@ -1728,8 +1728,8 @@ body {
|
|||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 255, 65, 0.008) 2px,
|
||||
rgba(0, 255, 65, 0.008) 4px
|
||||
rgba(255, 255, 255, 0.004) 2px,
|
||||
rgba(255, 255, 255, 0.004) 4px
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1997,7 +1997,7 @@ body {
|
|||
width: 240px;
|
||||
height: 100vh;
|
||||
background: #060a12;
|
||||
border-right: 1px solid rgba(0,255,65,0.1);
|
||||
border-right: 1px solid rgba(255,255,255,0.035);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
|
|
@ -2008,10 +2008,10 @@ body {
|
|||
padding: 1.2rem 1rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #00ff41;
|
||||
color: #d0d0d0;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid rgba(0,255,65,0.08);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.03);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -2022,8 +2022,8 @@ body {
|
|||
top: 0.8rem;
|
||||
right: 0.8rem;
|
||||
background: none;
|
||||
border: 1px solid rgba(0,255,65,0.2);
|
||||
color: #00ff41;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
color: #d0d0d0;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0.5rem;
|
||||
|
|
@ -2031,13 +2031,13 @@ body {
|
|||
}
|
||||
.sidebar-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0,255,65,0.15), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.sidebar-header {
|
||||
padding: 0.6rem 1rem 0.3rem;
|
||||
font-size: 0.6rem;
|
||||
color: rgba(0,255,65,0.4);
|
||||
color: rgba(208,208,208,0.15);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
|
@ -2051,7 +2051,7 @@ body {
|
|||
.sidebar-section-label {
|
||||
padding: 0.8rem 1rem 0.3rem;
|
||||
font-size: 0.55rem;
|
||||
color: rgba(0,255,65,0.35);
|
||||
color: rgba(208,208,208,0.3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
font-weight: 600;
|
||||
|
|
@ -2060,7 +2060,7 @@ body {
|
|||
padding: 0.8rem 1rem;
|
||||
font-size: 0.6rem;
|
||||
color: rgba(255,255,255,0.2);
|
||||
border-top: 1px solid rgba(0,255,65,0.06);
|
||||
border-top: 1px solid rgba(255,255,255,0.025);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -2071,7 +2071,7 @@ body {
|
|||
justify-content: space-between;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: rgba(6,10,18,0.9);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.08);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.03);
|
||||
backdrop-filter: blur(10px);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -2079,7 +2079,7 @@ body {
|
|||
}
|
||||
.topbar-title {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(0,255,65,0.6);
|
||||
color: #808080;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 600;
|
||||
|
|
@ -2119,8 +2119,8 @@ body {
|
|||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
color: #00ff41;
|
||||
text-shadow: 0 0 20px rgba(0,255,65,0.3);
|
||||
color: #d0d0d0;
|
||||
text-shadow: 0 0 20px rgba(208,208,208,0.1);
|
||||
letter-spacing: 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -2142,8 +2142,8 @@ body {
|
|||
|
||||
/* ─── EDITOR: Operator HUD ─── */
|
||||
.operator-hud {
|
||||
background: rgba(0,255,65,0.03);
|
||||
border: 1px solid rgba(0,255,65,0.1);
|
||||
background: rgba(255,255,255,0.012);
|
||||
border: 1px solid rgba(255,255,255,0.035);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
|
|
@ -2156,7 +2156,7 @@ body {
|
|||
}
|
||||
.hud-range {
|
||||
width: 100%;
|
||||
accent-color: #00ff41;
|
||||
accent-color: #d0d0d0;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -2164,7 +2164,7 @@ body {
|
|||
display: inline-block;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
color: #00ff41;
|
||||
color: #d0d0d0;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
|
|
@ -2184,7 +2184,7 @@ body {
|
|||
}
|
||||
.preview-pane {
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
border: 1px solid rgba(255,255,255,0.03);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
|
|
@ -2199,7 +2199,7 @@ body {
|
|||
gap: 0.8rem;
|
||||
align-items: end;
|
||||
padding: 0.8rem 0;
|
||||
border-bottom: 1px solid rgba(0,255,65,0.06);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.025);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
.editor-textarea-sm {
|
||||
|
|
@ -2207,7 +2207,7 @@ body {
|
|||
min-height: 60px;
|
||||
resize: vertical;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(0,255,65,0.12);
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
padding: 0.5rem;
|
||||
|
|
@ -2223,14 +2223,14 @@ body {
|
|||
gap: 0.3rem;
|
||||
padding: 0.5rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border: 1px solid rgba(0,255,65,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.025);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
.toolbar-btn {
|
||||
background: rgba(0,255,65,0.06);
|
||||
border: 1px solid rgba(0,255,65,0.12);
|
||||
color: #00ff41;
|
||||
background: rgba(255,255,255,0.025);
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
color: #d0d0d0;
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
|
|
@ -2239,13 +2239,13 @@ body {
|
|||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
.toolbar-btn:hover {
|
||||
background: rgba(0,255,65,0.15);
|
||||
border-color: #00ff41;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-color: #d0d0d0;
|
||||
}
|
||||
.toolbar-sep {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(0,255,65,0.12);
|
||||
background: rgba(255,255,255,0.04);
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
|
||||
|
|
@ -2259,21 +2259,21 @@ body {
|
|||
.admin-table td {
|
||||
padding: 0.6rem 0.8rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid rgba(0,255,65,0.06);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.025);
|
||||
}
|
||||
.admin-table th {
|
||||
color: rgba(0,255,65,0.5);
|
||||
color: #777;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.admin-table tr:hover {
|
||||
background: rgba(0,255,65,0.03);
|
||||
background: rgba(255,255,255,0.012);
|
||||
}
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
border: 1px solid rgba(255,255,255,0.03);
|
||||
border-radius: 6px;
|
||||
background: rgba(0,0,0,0.15);
|
||||
}
|
||||
|
|
@ -2284,8 +2284,8 @@ body {
|
|||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0.8rem;
|
||||
padding: 1rem;
|
||||
background: rgba(0,255,65,0.02);
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
background: rgba(255,255,255,0.01);
|
||||
border: 1px solid rgba(255,255,255,0.03);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -2310,7 +2310,7 @@ body {
|
|||
width: 100%;
|
||||
padding: 1rem 1.25rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border: 1px solid rgba(0,255,65,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.025);
|
||||
border-radius: 6px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
|
@ -2336,17 +2336,17 @@ body {
|
|||
transition: all 0.3s;
|
||||
}
|
||||
.toggle-slider.active {
|
||||
background: rgba(0,255,65,0.2);
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
.toggle-slider.active::after {
|
||||
left: 22px;
|
||||
background: #00ff41;
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
/* ─── HOMEPAGE ─── */
|
||||
.homepage-section-name {
|
||||
font-size: 0.7rem;
|
||||
color: #00ff41;
|
||||
color: #d0d0d0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 600;
|
||||
|
|
@ -2376,7 +2376,7 @@ body {
|
|||
justify-content: space-between;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border: 1px solid rgba(0,255,65,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.025);
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
|
@ -2386,7 +2386,7 @@ body {
|
|||
width: 100%;
|
||||
max-width: 800px;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
border: 1px solid rgba(255,255,255,0.03);
|
||||
border-radius: 8px;
|
||||
padding: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -2396,7 +2396,7 @@ body {
|
|||
.color-input {
|
||||
width: 50px;
|
||||
height: 36px;
|
||||
border: 1px solid rgba(0,255,65,0.15);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
|
@ -2409,7 +2409,7 @@ body {
|
|||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 0.75rem;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(0,255,65,0.12);
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
padding: 0.4rem 0.5rem;
|
||||
|
|
@ -2428,7 +2428,7 @@ body {
|
|||
.backup-card-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: #00ff41;
|
||||
color: #d0d0d0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0.3rem;
|
||||
|
|
@ -2452,8 +2452,8 @@ body {
|
|||
}
|
||||
.backup-status {
|
||||
padding: 0.8rem;
|
||||
background: rgba(0,255,65,0.03);
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
background: rgba(255,255,255,0.012);
|
||||
border: 1px solid rgba(255,255,255,0.03);
|
||||
border-radius: 6px;
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255,255,255,0.5);
|
||||
|
|
@ -2470,7 +2470,7 @@ body {
|
|||
.threat-feed .threat-empty {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: #00ff41;
|
||||
color: #d0d0d0;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
|
|||
28
css/blog.css
28
css/blog.css
|
|
@ -49,7 +49,7 @@
|
|||
font-size: 0.6rem;
|
||||
letter-spacing: 2px;
|
||||
padding: 0.5rem 1.2rem;
|
||||
background: rgba(0, 255, 65, 0.03);
|
||||
background: rgba(255, 255, 255, 0.015);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
|
|
@ -59,10 +59,10 @@
|
|||
|
||||
.filter-btn:hover,
|
||||
.filter-btn.active {
|
||||
background: rgba(0, 255, 65, 0.08);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
|
||||
box-shadow: 0 0 15px rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
/* Blog Section */
|
||||
|
|
@ -142,8 +142,8 @@
|
|||
}
|
||||
|
||||
.post-card:hover {
|
||||
border-color: rgba(0, 255, 65, 0.3);
|
||||
box-shadow: 0 0 30px rgba(0, 255, 65, 0.05), inset 0 0 30px rgba(0, 255, 65, 0.02);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.02), inset 0 0 30px rgba(255, 255, 255, 0.01);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.threat-LOW { background: rgba(0, 255, 65, 0.1); color: var(--accent); border: 1px solid rgba(0, 255, 65, 0.2); }
|
||||
.threat-LOW { background: rgba(255, 255, 255, 0.04); color: var(--status-green, #00cc33); border: 1px solid rgba(255, 255, 255, 0.06); }
|
||||
.threat-MED { background: rgba(255, 165, 2, 0.1); color: #c9a227; border: 1px solid rgba(255, 165, 2, 0.2); }
|
||||
.threat-HIGH { background: rgba(255, 71, 87, 0.1); color: #ff2d2d; border: 1px solid rgba(255, 71, 87, 0.2); }
|
||||
.threat-CRITICAL { background: rgba(255, 0, 0, 0.15); color: #ff0040; border: 1px solid rgba(255, 0, 0, 0.3); animation: criticalPulse 2s ease infinite; }
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
.post-card-stats {
|
||||
padding: 1rem;
|
||||
border-left: 1px solid var(--border);
|
||||
background: rgba(0, 255, 65, 0.015);
|
||||
background: rgba(255, 255, 255, 0.008);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -270,8 +270,8 @@
|
|||
.stat-pip {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: rgba(0, 255, 65, 0.06);
|
||||
border: 1px solid rgba(0, 255, 65, 0.1);
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
|
|
@ -389,7 +389,7 @@
|
|||
.post-body ul li::marker { color: var(--accent); }
|
||||
|
||||
.post-body code {
|
||||
background: rgba(0, 255, 65, 0.05);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.15rem 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
|
|
@ -414,7 +414,7 @@
|
|||
letter-spacing: 2px;
|
||||
color: var(--text-secondary);
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: rgba(0, 255, 65, 0.03);
|
||||
background: rgba(255, 255, 255, 0.015);
|
||||
border-left: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
|
@ -470,7 +470,7 @@
|
|||
color: var(--text-secondary);
|
||||
padding: 0.6rem 0.8rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(0, 255, 65, 0.02);
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
}
|
||||
|
||||
.sidebar-body {
|
||||
|
|
@ -501,8 +501,8 @@
|
|||
.sidebar-pip {
|
||||
width: 16px;
|
||||
height: 10px;
|
||||
background: rgba(0, 255, 65, 0.06);
|
||||
border: 1px solid rgba(0, 255, 65, 0.1);
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.sidebar-pip.filled {
|
||||
|
|
|
|||
72
css/post.css
72
css/post.css
|
|
@ -6,7 +6,7 @@
|
|||
.post-header {
|
||||
padding: 10rem 2rem 3rem;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(0, 255, 65, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.post-header-content {
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
.post-back {
|
||||
display: inline-block;
|
||||
color: var(--accent, #00ff41);
|
||||
color: #d0d0d0;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 1px;
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
.post-header .post-date {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(0, 255, 65, 0.6);
|
||||
color: #808080;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
|
@ -69,8 +69,8 @@
|
|||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.65rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border: 1px solid rgba(0, 255, 65, 0.2);
|
||||
color: var(--accent, #00ff41);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
color: #d0d0d0;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -84,9 +84,9 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
.threat-low {
|
||||
color: #00ff41;
|
||||
border: 1px solid rgba(0, 255, 65, 0.3);
|
||||
text-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
|
||||
color: #d0d0d0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.threat-medium, .threat-med {
|
||||
color: #c9a227;
|
||||
|
|
@ -148,9 +148,9 @@
|
|||
.post-rendered h2 {
|
||||
font-size: 1.2rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 255, 65, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.post-rendered h3 { font-size: 1rem; color: var(--accent, #00ff41); }
|
||||
.post-rendered h3 { font-size: 1rem; color: #d0d0d0; }
|
||||
.post-rendered h4 { font-size: 0.9rem; }
|
||||
|
||||
.post-rendered p {
|
||||
|
|
@ -163,18 +163,18 @@
|
|||
}
|
||||
|
||||
.post-rendered em {
|
||||
color: rgba(0, 255, 65, 0.7);
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.post-rendered a {
|
||||
color: var(--accent, #00ff41);
|
||||
color: #d0d0d0;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(0, 255, 65, 0.3);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.post-rendered a:hover {
|
||||
border-color: var(--accent, #00ff41);
|
||||
border-color: #d0d0d0;
|
||||
}
|
||||
|
||||
.post-rendered ul {
|
||||
|
|
@ -191,22 +191,22 @@
|
|||
content: '▸';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--accent, #00ff41);
|
||||
color: #d0d0d0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.post-rendered hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.2), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* ─── Code Blocks ─── */
|
||||
.post-rendered pre {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(0, 255, 65, 0.1);
|
||||
border-left: 3px solid var(--accent, #00ff41);
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
border-left: 3px solid #d0d0d0;
|
||||
border-radius: 0;
|
||||
padding: 1.2rem 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
|
|
@ -222,15 +222,15 @@
|
|||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: rgba(0, 255, 65, 0.08);
|
||||
color: rgba(0, 255, 65, 0.4);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: #666;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.post-rendered pre code {
|
||||
font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--accent, #00ff41);
|
||||
color: #d0d0d0;
|
||||
line-height: 1.6;
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
|
@ -239,10 +239,10 @@
|
|||
.post-rendered code.inline-code {
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
background: rgba(0, 255, 65, 0.06);
|
||||
border: 1px solid rgba(0, 255, 65, 0.1);
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
padding: 0.15rem 0.4rem;
|
||||
color: var(--accent, #00ff41);
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
/* ─── Sidebar ─── */
|
||||
|
|
@ -257,8 +257,8 @@
|
|||
.post-stats-panel,
|
||||
.post-meta-panel,
|
||||
.post-nav-panel {
|
||||
background: rgba(0, 255, 65, 0.02);
|
||||
border: 1px solid rgba(0, 255, 65, 0.08);
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
border: 1px solid rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
/* ─── Stat Rows (sidebar) ─── */
|
||||
|
|
@ -306,9 +306,9 @@
|
|||
transition: all 0.3s;
|
||||
}
|
||||
.pip.filled {
|
||||
background: var(--accent, #00ff41);
|
||||
border-color: var(--accent, #00ff41);
|
||||
box-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
|
||||
background: #d0d0d0;
|
||||
border-color: #d0d0d0;
|
||||
box-shadow: 0 0 6px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.pip.filled.warn {
|
||||
background: #c9a227;
|
||||
|
|
@ -323,7 +323,7 @@
|
|||
|
||||
.stat-divider {
|
||||
height: 1px;
|
||||
background: rgba(0, 255, 65, 0.08);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -376,7 +376,7 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0;
|
||||
border-bottom: 1px solid rgba(0, 255, 65, 0.04);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.015);
|
||||
}
|
||||
.meta-row:last-child {
|
||||
border-bottom: none;
|
||||
|
|
@ -397,14 +397,14 @@
|
|||
}
|
||||
.meta-val.mono {
|
||||
font-size: 0.65rem;
|
||||
color: rgba(0, 255, 65, 0.5);
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
/* ─── Navigation Panel ─── */
|
||||
.post-nav-link {
|
||||
display: block;
|
||||
padding: 0.8rem 0;
|
||||
border-bottom: 1px solid rgba(0, 255, 65, 0.06);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.025);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
|
@ -412,14 +412,14 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
.post-nav-link:hover {
|
||||
background: rgba(0, 255, 65, 0.03);
|
||||
background: rgba(255, 255, 255, 0.012);
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-dir {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.6rem;
|
||||
color: var(--accent, #00ff41);
|
||||
color: #d0d0d0;
|
||||
letter-spacing: 1px;
|
||||
display: block;
|
||||
margin-bottom: 0.2rem;
|
||||
|
|
@ -445,7 +445,7 @@
|
|||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 4rem 0;
|
||||
color: rgba(0, 255, 65, 0.5);
|
||||
color: #808080;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 2px;
|
||||
|
|
|
|||
277
css/style.css
277
css/style.css
|
|
@ -1,6 +1,6 @@
|
|||
/* ===================================================
|
||||
JAESWIFT.XYZ — Sci-Fi Dashboard Theme
|
||||
Palette: #0a0a0a (bg), #00ff41 (accent-green), #c9a227 (accent-amber), #161616 (panels) — BLACK OPS THEME
|
||||
Palette: #0a0a0a (bg), #d0d0d0 (grey), #8b0000 (mil-red), #00cc33 (status-green), #c9a227 (amber), #161616 (panels) — SPEC OPS — BLACK OPS THEME
|
||||
=================================================== */
|
||||
|
||||
/* --- Reset & Base --- */
|
||||
|
|
@ -11,15 +11,21 @@
|
|||
--bg-secondary: #111111;
|
||||
--bg-panel: #161616;
|
||||
--bg-panel-hover: #1e1e1e;
|
||||
--accent: #00ff41;
|
||||
--accent-dim: #00ff4140;
|
||||
--accent-glow: #00ff4180;
|
||||
--accent-subtle: #00ff4115;
|
||||
--accent: #d0d0d0;
|
||||
--accent-dim: #d0d0d030;
|
||||
--accent-glow: #ffffff20;
|
||||
--accent-subtle: #ffffff06;
|
||||
--status-green: #00cc33;
|
||||
--status-green-dim: #00cc3340;
|
||||
--status-green-glow: #00cc3360;
|
||||
--mil-red: #8b0000;
|
||||
--mil-red-dim: #8b000040;
|
||||
--link-color: #6688aa;
|
||||
--text-primary: #c0c0c0;
|
||||
--text-secondary: #707070;
|
||||
--text-muted: #3a3a3a;
|
||||
--border: #2a2a2a;
|
||||
--border-accent: #00ff4130;
|
||||
--border-accent: #ffffff10;
|
||||
--danger: #ff2d2d;
|
||||
--warning: #c9a227;
|
||||
--font-mono: 'JetBrains Mono', 'Share Tech Mono', 'Courier New', monospace;
|
||||
|
|
@ -30,13 +36,13 @@
|
|||
html {
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent-dim) var(--bg-primary);
|
||||
scrollbar-color: #333 var(--bg-primary);
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar { width: 6px; }
|
||||
html::-webkit-scrollbar-track { background: var(--bg-primary); }
|
||||
html::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; }
|
||||
html::-webkit-scrollbar-thumb:hover { background: var(--accent); }
|
||||
html::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
|
||||
html::-webkit-scrollbar-thumb:hover { background: #555; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-mono);
|
||||
|
|
@ -47,8 +53,8 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: var(--accent); text-decoration: none; transition: all 0.3s ease; }
|
||||
a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
||||
a { color: var(--link-color); text-decoration: none; transition: all 0.3s ease; }
|
||||
a:hover { color: #fff; text-shadow: none; }
|
||||
|
||||
.accent { color: var(--accent); }
|
||||
|
||||
|
|
@ -63,8 +69,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0, 255, 65, 0.008) 2px,
|
||||
rgba(0, 255, 65, 0.008) 4px
|
||||
rgba(255, 255, 255, 0.003) 2px,
|
||||
rgba(255, 255, 255, 0.003) 4px
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -106,8 +112,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.nav-main.scrolled {
|
||||
background: rgba(10, 10, 10, 0.98);
|
||||
border-bottom-color: var(--accent-dim);
|
||||
box-shadow: 0 4px 30px rgba(0, 255, 65, 0.05);
|
||||
border-bottom-color: #222;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
|
|
@ -133,11 +139,11 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.nav-logo:hover { color: var(--text-primary); text-shadow: none; }
|
||||
.logo-bracket { color: var(--accent); font-weight: 300; }
|
||||
.logo-accent { color: var(--accent); }
|
||||
.logo-bracket { color: #e0e0e0; font-weight: 300; }
|
||||
.logo-accent { color: #e0e0e0; }
|
||||
.logo-status {
|
||||
font-size: 0.55rem;
|
||||
color: var(--accent);
|
||||
color: var(--status-green);
|
||||
margin-left: 0.75rem;
|
||||
animation: pulse-status 2s ease-in-out infinite;
|
||||
}
|
||||
|
|
@ -180,14 +186,14 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
background: #ffffff;
|
||||
transition: width 0.3s ease;
|
||||
box-shadow: 0 0 10px var(--accent-glow);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link.active {
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 15px var(--accent-glow);
|
||||
color: #ffffff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.nav-link:hover::after, .nav-link.active::after {
|
||||
|
|
@ -202,7 +208,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
min-width: 200px;
|
||||
background: rgba(14, 14, 14, 0.98);
|
||||
border: 1px solid var(--border);
|
||||
border-top: 2px solid var(--accent);
|
||||
border-top: 2px solid var(--mil-red);
|
||||
list-style: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
|
@ -232,10 +238,10 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
.dropdown li:last-child a { border-bottom: none; }
|
||||
|
||||
.dropdown li a:hover {
|
||||
background: var(--accent-subtle);
|
||||
color: var(--accent);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: #ffffff;
|
||||
padding-left: 1.5rem;
|
||||
text-shadow: 0 0 10px var(--accent-glow);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.dropdown li a::before {
|
||||
|
|
@ -246,8 +252,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
|
||||
.dropdown li a.active {
|
||||
color: var(--accent);
|
||||
background: var(--accent-subtle);
|
||||
color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
/* Dropdown Arrow */
|
||||
|
|
@ -278,12 +284,12 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.nav-time {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--accent);
|
||||
color: #999;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.nav-signal {
|
||||
color: var(--accent);
|
||||
color: var(--status-green);
|
||||
letter-spacing: 1px;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
|
|
@ -303,7 +309,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
display: block;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--accent);
|
||||
background: #d0d0d0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -369,8 +375,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 20px; height: 20px;
|
||||
border-top: 2px solid var(--accent);
|
||||
border-left: 2px solid var(--accent);
|
||||
border-top: 2px solid var(--mil-red);
|
||||
border-left: 2px solid var(--mil-red);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -379,8 +385,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
width: 20px; height: 20px;
|
||||
border-bottom: 2px solid var(--accent);
|
||||
border-right: 2px solid var(--accent);
|
||||
border-bottom: 2px solid var(--mil-red);
|
||||
border-right: 2px solid var(--mil-red);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -390,7 +396,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(0, 255, 65, 0.02);
|
||||
background: rgba(139, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
@ -402,15 +408,15 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.panel-icon {
|
||||
color: var(--accent);
|
||||
color: #666;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.panel-pct {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 10px var(--accent-glow);
|
||||
color: var(--status-green);
|
||||
text-shadow: 0 0 10px var(--status-green-glow);
|
||||
}
|
||||
|
||||
.panel-status-dot {
|
||||
|
|
@ -419,7 +425,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.status-green { color: var(--accent); }
|
||||
.status-green { color: var(--status-green); }
|
||||
|
||||
.panel-content {
|
||||
padding: 1rem;
|
||||
|
|
@ -499,8 +505,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 8px var(--accent-glow);
|
||||
color: #b8b8b8;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
|
|
@ -529,7 +535,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.glitch {
|
||||
position: relative;
|
||||
color: var(--text-primary);
|
||||
color: #ffffff;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -543,7 +549,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.glitch::before {
|
||||
color: var(--accent);
|
||||
color: #ffffff;
|
||||
animation: glitch-1 4s infinite linear;
|
||||
}
|
||||
|
||||
|
|
@ -568,13 +574,13 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
.hero-subtitle {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
color: var(--accent);
|
||||
color: #b8b8b8;
|
||||
}
|
||||
|
||||
.typing-prefix { color: var(--text-secondary); }
|
||||
.typing-cursor {
|
||||
animation: blink-cursor 0.8s step-end infinite;
|
||||
color: var(--accent);
|
||||
color: #b8b8b8;
|
||||
}
|
||||
|
||||
@keyframes blink-cursor {
|
||||
|
|
@ -594,16 +600,16 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.metric-bar {
|
||||
height: 6px;
|
||||
background: rgba(0, 255, 65, 0.08);
|
||||
border: 1px solid rgba(0, 255, 65, 0.15);
|
||||
background: rgba(0, 204, 51, 0.06);
|
||||
border: 1px solid rgba(0, 204, 51, 0.12);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--accent), rgba(0, 255, 65, 0.4));
|
||||
box-shadow: 0 0 8px var(--accent-glow);
|
||||
background: linear-gradient(90deg, var(--status-green), rgba(0, 204, 51, 0.4));
|
||||
box-shadow: 0 0 8px var(--status-green-glow);
|
||||
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -614,15 +620,15 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
right: 0; top: 0;
|
||||
width: 2px; height: 100%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 6px var(--accent);
|
||||
box-shadow: 0 0 6px var(--status-green);
|
||||
}
|
||||
|
||||
.metric-val {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.65rem;
|
||||
color: var(--accent);
|
||||
color: var(--status-green);
|
||||
text-align: right;
|
||||
text-shadow: 0 0 6px var(--accent-glow);
|
||||
text-shadow: 0 0 6px var(--status-green-glow);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
|
|
@ -654,8 +660,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 12px; height: 12px;
|
||||
border-top: 2px solid var(--accent);
|
||||
border-left: 2px solid var(--accent);
|
||||
border-top: 2px solid var(--mil-red);
|
||||
border-left: 2px solid var(--mil-red);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -664,8 +670,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
position: absolute;
|
||||
bottom: 0; right: 0;
|
||||
width: 12px; height: 12px;
|
||||
border-bottom: 2px solid var(--accent);
|
||||
border-right: 2px solid var(--accent);
|
||||
border-bottom: 2px solid var(--mil-red);
|
||||
border-right: 2px solid var(--mil-red);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -678,8 +684,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
font-family: var(--font-display);
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 20px var(--accent-glow);
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -702,7 +708,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.container-count span {
|
||||
color: var(--accent);
|
||||
color: var(--status-green);
|
||||
}
|
||||
|
||||
.container-total {
|
||||
|
|
@ -711,23 +717,23 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.container-bar {
|
||||
height: 4px;
|
||||
background: rgba(0, 255, 65, 0.08);
|
||||
border: 1px solid rgba(0, 255, 65, 0.1);
|
||||
background: rgba(0, 204, 51, 0.06);
|
||||
border: 1px solid rgba(0, 204, 51, 0.08);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.container-fill {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 6px var(--accent-glow);
|
||||
background: var(--status-green);
|
||||
box-shadow: 0 0 6px var(--status-green-glow);
|
||||
}
|
||||
|
||||
.container-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.5rem;
|
||||
letter-spacing: 2px;
|
||||
color: var(--accent);
|
||||
color: #808080;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
|
@ -770,8 +776,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 6px var(--accent-glow);
|
||||
color: #d0d0d0;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
|
|
@ -810,7 +816,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
.hud-dot-online {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.55rem;
|
||||
color: var(--accent);
|
||||
color: var(--status-green);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
|
@ -839,7 +845,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.hud-online { color: var(--accent); }
|
||||
.hud-online { color: var(--status-green); }
|
||||
|
||||
.hud-bottom-right {
|
||||
display: flex;
|
||||
|
|
@ -863,23 +869,23 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
.hud-scan-bar {
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: rgba(0, 255, 65, 0.08);
|
||||
border: 1px solid rgba(0, 255, 65, 0.15);
|
||||
background: rgba(0, 204, 51, 0.06);
|
||||
border: 1px solid rgba(0, 204, 51, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hud-scan-fill {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 6px var(--accent-glow);
|
||||
background: var(--status-green);
|
||||
box-shadow: 0 0 6px var(--status-green-glow);
|
||||
transition: width 0.3s linear;
|
||||
}
|
||||
|
||||
.hud-scan-pct {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.55rem;
|
||||
color: var(--accent);
|
||||
color: var(--status-green);
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
|
|
@ -889,8 +895,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
top: 0; left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
||||
opacity: 0.6;
|
||||
background: linear-gradient(90deg, transparent, var(--status-green), transparent);
|
||||
opacity: 0.25;
|
||||
animation: scan 4s linear infinite;
|
||||
}
|
||||
|
||||
|
|
@ -901,8 +907,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
top: 0; left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
||||
opacity: 0.6;
|
||||
background: linear-gradient(90deg, transparent, var(--status-green), transparent);
|
||||
opacity: 0.25;
|
||||
animation: scan 4s linear infinite;
|
||||
}
|
||||
|
||||
|
|
@ -934,10 +940,10 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
.section-tag {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.7rem;
|
||||
color: var(--accent);
|
||||
color: #808080;
|
||||
letter-spacing: 2px;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border: 1px solid var(--accent-dim);
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
|
|
@ -969,12 +975,12 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background: linear-gradient(135deg, var(--accent-subtle), transparent);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.panel:hover { border-color: var(--accent-dim); }
|
||||
.panel:hover { border-color: #333; }
|
||||
.panel:hover::before { opacity: 1; }
|
||||
|
||||
.panel-header {
|
||||
|
|
@ -983,7 +989,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
align-items: center;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(0, 255, 65, 0.02);
|
||||
background: rgba(139, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
|
|
@ -994,7 +1000,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.panel-icon {
|
||||
color: var(--accent);
|
||||
color: #666;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
|
@ -1021,7 +1027,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.data-key { color: var(--text-secondary); letter-spacing: 2px; }
|
||||
.data-val { color: var(--accent); font-weight: 500; }
|
||||
.data-val { color: #d0d0d0; font-weight: 500; }
|
||||
|
||||
/* === ABOUT: Panels Grid === */
|
||||
.panels-grid {
|
||||
|
|
@ -1056,18 +1062,18 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
.bar-fill {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: linear-gradient(90deg, var(--accent), var(--accent-dim));
|
||||
background: linear-gradient(90deg, var(--status-green), var(--status-green-dim));
|
||||
border-radius: 2px;
|
||||
transition: width 1.5s ease;
|
||||
position: relative;
|
||||
box-shadow: 0 0 10px var(--accent-glow);
|
||||
box-shadow: 0 0 10px var(--status-green-glow);
|
||||
}
|
||||
|
||||
.bar-fill.animated { width: var(--target-width); }
|
||||
|
||||
.skill-pct {
|
||||
font-size: 0.65rem;
|
||||
color: var(--accent);
|
||||
color: #d0d0d0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
@ -1092,16 +1098,16 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 2px;
|
||||
background: var(--accent);
|
||||
background: var(--mil-red);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
border-color: var(--accent-dim);
|
||||
border-color: #333;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 30px rgba(0, 255, 65, 0.08);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.blog-card:hover::after { transform: scaleX(1); }
|
||||
|
|
@ -1122,9 +1128,9 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
.blog-tag {
|
||||
font-size: 0.55rem;
|
||||
letter-spacing: 1px;
|
||||
color: var(--accent);
|
||||
color: #808080;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border: 1px solid var(--accent-dim);
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.blog-title {
|
||||
|
|
@ -1160,11 +1166,12 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
font-size: 0.65rem;
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: 2px;
|
||||
color: var(--accent);
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.blog-link:hover {
|
||||
text-shadow: 0 0 15px var(--accent-glow);
|
||||
color: #ffffff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* === DEVELOPMENT GRID === */
|
||||
|
|
@ -1187,14 +1194,14 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 3px; height: 0;
|
||||
background: var(--accent);
|
||||
background: var(--mil-red);
|
||||
transition: height 0.4s ease;
|
||||
}
|
||||
|
||||
.dev-card:hover {
|
||||
border-color: var(--accent-dim);
|
||||
border-color: #333;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 30px rgba(0, 255, 65, 0.06);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dev-card:hover::before { height: 100%; }
|
||||
|
|
@ -1208,13 +1215,13 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.dev-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--accent);
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.dev-status {
|
||||
font-size: 0.55rem;
|
||||
letter-spacing: 1px;
|
||||
color: var(--accent);
|
||||
color: var(--status-green);
|
||||
}
|
||||
|
||||
.status-dev { color: var(--warning); }
|
||||
|
|
@ -1252,8 +1259,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.dev-card:hover .tech-tag {
|
||||
border-color: var(--accent-dim);
|
||||
color: var(--accent);
|
||||
border-color: #444;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.dev-link {
|
||||
|
|
@ -1281,7 +1288,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.link-card:hover {
|
||||
border-color: var(--accent-dim);
|
||||
border-color: #333;
|
||||
background: var(--bg-panel-hover);
|
||||
transform: translateX(8px);
|
||||
text-shadow: none;
|
||||
|
|
@ -1289,7 +1296,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.link-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--accent);
|
||||
color: #808080;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1317,7 +1324,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.link-card:hover .link-arrow {
|
||||
color: var(--accent);
|
||||
color: #d0d0d0;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
|
|
@ -1362,8 +1369,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 1px var(--accent-dim), 0 0 20px rgba(0, 255, 65, 0.05);
|
||||
border-color: #555;
|
||||
box-shadow: 0 0 0 1px #55555540, 0 0 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.form-input::placeholder { color: var(--text-muted); }
|
||||
|
|
@ -1376,8 +1383,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
gap: 0.75rem;
|
||||
padding: 0.85rem 2rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
border: 1px solid #555;
|
||||
color: #d0d0d0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 3px;
|
||||
|
|
@ -1392,14 +1399,14 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
position: absolute;
|
||||
top: 0; left: -100%;
|
||||
width: 100%; height: 100%;
|
||||
background: var(--accent);
|
||||
background: #333;
|
||||
transition: left 0.3s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.form-submit:hover {
|
||||
color: var(--bg-primary);
|
||||
box-shadow: 0 0 30px var(--accent-glow);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.form-submit:hover::before { left: 0; }
|
||||
|
|
@ -1429,7 +1436,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.info-value {
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent);
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
/* Terminal */
|
||||
|
|
@ -1444,10 +1451,10 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.term-line { white-space: nowrap; }
|
||||
.term-prompt { color: var(--accent); }
|
||||
.term-prompt { color: #808080; }
|
||||
.term-cmd { color: var(--text-primary); }
|
||||
.term-output { color: var(--text-secondary); padding-left: 0; }
|
||||
.term-cursor { animation: blink-cursor 0.8s step-end infinite; color: var(--accent); }
|
||||
.term-cursor { animation: blink-cursor 0.8s step-end infinite; color: #b8b8b8; }
|
||||
|
||||
/* === FOOTER === */
|
||||
.footer {
|
||||
|
|
@ -1491,14 +1498,14 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.footer-signal {
|
||||
font-size: 0.6rem;
|
||||
color: var(--accent);
|
||||
color: var(--status-green);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
margin-top: 1.5rem;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
|
||||
background: linear-gradient(90deg, transparent, #2a2a2a, transparent);
|
||||
}
|
||||
|
||||
/* === ANIMATIONS === */
|
||||
|
|
@ -1600,7 +1607,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
.dropdown li a::before {
|
||||
content: '── ';
|
||||
opacity: 0.3;
|
||||
color: var(--accent);
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.dropdown li a:hover::before {
|
||||
|
|
@ -1667,15 +1674,15 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
padding: 3rem;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: rgba(0, 255, 65, 0.4);
|
||||
color: #555;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(0, 255, 65, 0.1);
|
||||
border-top-color: #00ff41;
|
||||
border: 2px solid rgba(0, 204, 51, 0.1);
|
||||
border-top-color: var(--status-green);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
|
@ -1685,8 +1692,8 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
.blog-view-all-link:hover {
|
||||
background: rgba(0, 255, 65, 0.08) !important;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 65, 0.15);
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* ─── Weather Display ─── */
|
||||
|
|
@ -1705,12 +1712,12 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
|
||||
text-shadow: 0 0 15px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.weather-cond {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: rgba(0, 255, 65, 0.6);
|
||||
color: #808080;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.weather-details {
|
||||
|
|
@ -1724,7 +1731,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
color: rgba(192, 192, 192, 0.4);
|
||||
letter-spacing: 1px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border: 1px solid rgba(0, 255, 65, 0.06);
|
||||
border: 1px solid #222;
|
||||
}
|
||||
|
||||
/* ─── Now Playing Display ─── */
|
||||
|
|
@ -1745,7 +1752,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
.np-artist {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--accent, #00ff41);
|
||||
color: #808080;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.np-album {
|
||||
|
|
@ -1764,10 +1771,10 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
.np-bar {
|
||||
width: 4px;
|
||||
background: var(--accent, #00ff41);
|
||||
background: var(--status-green);
|
||||
border-radius: 1px;
|
||||
animation: npBounce 0.8s ease-in-out infinite alternate;
|
||||
box-shadow: 0 0 4px rgba(0, 255, 65, 0.3);
|
||||
box-shadow: 0 0 4px var(--status-green-glow);
|
||||
}
|
||||
.np-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
|
||||
.np-bar:nth-child(2) { height: 70%; animation-delay: 0.1s; }
|
||||
|
|
@ -1783,10 +1790,20 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
}
|
||||
|
||||
#npStatus {
|
||||
color: var(--accent, #00ff41);
|
||||
color: var(--status-green);
|
||||
animation: statusPulse 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes statusPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
/* === SELECTION HIGHLIGHT === */
|
||||
::selection {
|
||||
background: #3a1a1a;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #3a1a1a;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
|
|
|||
30
index.html
30
index.html
|
|
@ -83,35 +83,35 @@
|
|||
<svg viewBox="0 0 250 400" class="uk-map-svg">
|
||||
<defs>
|
||||
<pattern id="mapGrid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(0,255,65,0.06)" stroke-width="0.5"/>
|
||||
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="0.5"/>
|
||||
</pattern>
|
||||
<filter id="glow"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
|
||||
<radialGradient id="dotGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#00ff41" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#00ff41" stop-opacity="0"/>
|
||||
<stop offset="0%" stop-color="#00cc33" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#00cc33" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect width="250" height="400" fill="url(#mapGrid)"/>
|
||||
<!-- UK mainland outline -->
|
||||
<polygon points="80,12 95,8 120,5 140,8 155,18 152,35 148,55 142,72 138,88 135,100 142,108 150,118 155,135 158,155 162,175 168,195 172,215 170,235 168,255 172,272 168,280 155,288 142,292 130,296 115,302 100,308 85,315 72,318 65,310 75,295 82,280 88,268 85,255 72,248 62,238 55,222 52,205 55,192 60,182 68,175 78,168 82,155 80,140 75,125 70,112 62,100 55,82 52,65 58,45 68,30" fill="rgba(0,255,65,0.03)" stroke="#00ff41" stroke-width="1.2" stroke-opacity="0.4" stroke-linejoin="round"/>
|
||||
<polygon points="80,12 95,8 120,5 140,8 155,18 152,35 148,55 142,72 138,88 135,100 142,108 150,118 155,135 158,155 162,175 168,195 172,215 170,235 168,255 172,272 168,280 155,288 142,292 130,296 115,302 100,308 85,315 72,318 65,310 75,295 82,280 88,268 85,255 72,248 62,238 55,222 52,205 55,192 60,182 68,175 78,168 82,155 80,140 75,125 70,112 62,100 55,82 52,65 58,45 68,30" fill="rgba(0,204,51,0.02)" stroke="#00cc33" stroke-width="1.2" stroke-opacity="0.4" stroke-linejoin="round"/>
|
||||
<!-- Northern Ireland (simplified) -->
|
||||
<polygon points="42,105 55,98 62,102 58,115 48,118 38,112" fill="rgba(0,255,65,0.02)" stroke="#00ff41" stroke-width="0.8" stroke-opacity="0.3" stroke-linejoin="round"/>
|
||||
<polygon points="42,105 55,98 62,102 58,115 48,118 38,112" fill="rgba(0,204,51,0.015)" stroke="#00cc33" stroke-width="0.8" stroke-opacity="0.3" stroke-linejoin="round"/>
|
||||
<!-- Crosshair lines at Manchester -->
|
||||
<line x1="0" y1="172" x2="250" y2="172" stroke="#00ff41" stroke-width="0.3" stroke-opacity="0.25" stroke-dasharray="4,4"/>
|
||||
<line x1="90" y1="0" x2="90" y2="400" stroke="#00ff41" stroke-width="0.3" stroke-opacity="0.25" stroke-dasharray="4,4"/>
|
||||
<line x1="0" y1="172" x2="250" y2="172" stroke="#00cc33" stroke-width="0.3" stroke-opacity="0.25" stroke-dasharray="4,4"/>
|
||||
<line x1="90" y1="0" x2="90" y2="400" stroke="#00cc33" stroke-width="0.3" stroke-opacity="0.25" stroke-dasharray="4,4"/>
|
||||
<!-- Manchester glow -->
|
||||
<circle cx="90" cy="172" r="25" fill="url(#dotGlow)"/>
|
||||
<!-- Manchester dot -->
|
||||
<circle cx="90" cy="172" r="3" fill="#00ff41" filter="url(#glow)"/>
|
||||
<circle cx="90" cy="172" r="3" fill="#00cc33" filter="url(#glow)"/>
|
||||
<!-- Pulse rings -->
|
||||
<circle cx="90" cy="172" r="8" fill="none" stroke="#00ff41" stroke-width="0.8" class="pulse-ring pulse-ring-1"/>
|
||||
<circle cx="90" cy="172" r="16" fill="none" stroke="#00ff41" stroke-width="0.5" class="pulse-ring pulse-ring-2"/>
|
||||
<circle cx="90" cy="172" r="24" fill="none" stroke="#00ff41" stroke-width="0.3" class="pulse-ring pulse-ring-3"/>
|
||||
<circle cx="90" cy="172" r="8" fill="none" stroke="#00cc33" stroke-width="0.8" class="pulse-ring pulse-ring-1"/>
|
||||
<circle cx="90" cy="172" r="16" fill="none" stroke="#00cc33" stroke-width="0.5" class="pulse-ring pulse-ring-2"/>
|
||||
<circle cx="90" cy="172" r="24" fill="none" stroke="#00cc33" stroke-width="0.3" class="pulse-ring pulse-ring-3"/>
|
||||
<!-- Manchester label -->
|
||||
<text x="108" y="168" fill="#00ff41" font-size="8" font-family="'JetBrains Mono',monospace" letter-spacing="1">MANCHESTER</text>
|
||||
<text x="108" y="180" fill="rgba(0,255,65,0.5)" font-size="6" font-family="'JetBrains Mono',monospace">53.48°N 2.24°W</text>
|
||||
<text x="108" y="168" fill="#00cc33" font-size="8" font-family="'JetBrains Mono',monospace" letter-spacing="1">MANCHESTER</text>
|
||||
<text x="108" y="180" fill="rgba(0,204,51,0.3)" font-size="6" font-family="'JetBrains Mono',monospace">53.48°N 2.24°W</text>
|
||||
<!-- Scan sweep -->
|
||||
<line x1="0" y1="0" x2="250" y2="0" stroke="#00ff41" stroke-width="1" stroke-opacity="0.4" class="map-scan-line"/>
|
||||
<line x1="0" y1="0" x2="250" y2="0" stroke="#00cc33" stroke-width="1" stroke-opacity="0.4" class="map-scan-line"/>
|
||||
</svg>
|
||||
<div class="map-data-overlay">
|
||||
<div class="map-coord-block">
|
||||
|
|
@ -357,7 +357,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="blog-view-all" style="text-align:center; margin-top:2rem;">
|
||||
<a href="/blog" class="blog-view-all-link" style="font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:#00ff41; letter-spacing:2px; text-decoration:none; border:1px solid rgba(0,255,65,0.2); padding:0.6rem 2rem; transition:all 0.3s;">VIEW ALL TRANSMISSIONS →</a>
|
||||
<a href="/blog" class="blog-view-all-link" style="font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:#00cc33; letter-spacing:2px; text-decoration:none; border:1px solid rgba(0,204,51,0.15); padding:0.6rem 2rem; transition:all 0.3s;">VIEW ALL TRANSMISSIONS →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
16
js/admin.js
16
js/admin.js
|
|
@ -12,7 +12,7 @@ const AdminApp = {
|
|||
navData: [],
|
||||
linksData: [],
|
||||
themeDefaults: {
|
||||
accent: '#00ff41',
|
||||
accent: '#d0d0d0',
|
||||
bg: '#111111',
|
||||
text: '#e0e0e0',
|
||||
scanlines: true,
|
||||
|
|
@ -283,7 +283,7 @@ const AdminApp = {
|
|||
|
||||
if (type === 'success') {
|
||||
div.style.background = 'rgba(0,255,200,0.15)';
|
||||
div.style.borderColor = '#00ff41';
|
||||
div.style.borderColor = '#d0d0d0';
|
||||
} else if (type === 'error') {
|
||||
div.style.background = 'rgba(255,50,50,0.15)';
|
||||
div.style.borderColor = '#ff3232';
|
||||
|
|
@ -358,7 +358,7 @@ const AdminApp = {
|
|||
if (grid) {
|
||||
grid.innerHTML = arr.map(svc => {
|
||||
const isUp = svc.status === 'up' || svc.status === 'online' || svc.status === true;
|
||||
const dotColor = isUp ? '#00ff41' : '#ff3232';
|
||||
const dotColor = isUp ? '#d0d0d0' : '#ff3232';
|
||||
const statusText = isUp ? 'ONLINE' : 'OFFLINE';
|
||||
return `<div class="service-card">
|
||||
<span class="service-dot" style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${dotColor};box-shadow:0 0 8px ${dotColor};margin-right:8px;"></span>
|
||||
|
|
@ -385,7 +385,7 @@ const AdminApp = {
|
|||
} else {
|
||||
container.innerHTML = arr.map(t => {
|
||||
const severity = (t.severity || t.level || 'low').toLowerCase();
|
||||
const sevColor = severity === 'critical' ? '#ff0040' : severity === 'high' ? '#ff6600' : severity === 'medium' ? '#c9a227' : '#00ff41';
|
||||
const sevColor = severity === 'critical' ? '#ff0040' : severity === 'high' ? '#ff6600' : severity === 'medium' ? '#c9a227' : '#d0d0d0';
|
||||
return `<div class="threat-item" style="border-left:3px solid ${sevColor};padding:8px 12px;margin-bottom:6px;background:rgba(255,255,255,0.03);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<strong style="color:${sevColor};">${this.escapeHtml(t.cve || t.id || t.name || 'Unknown')}</strong>
|
||||
|
|
@ -743,7 +743,7 @@ const AdminApp = {
|
|||
html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" style="max-width:100%;">');
|
||||
|
||||
// Links
|
||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" style="color:#00ff41;">$1</a>');
|
||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" style="color:#d0d0d0;">$1</a>');
|
||||
|
||||
// Unordered lists
|
||||
html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
|
||||
|
|
@ -805,7 +805,7 @@ const AdminApp = {
|
|||
<div style="font-weight:600;color:#e0e0e0;">${this.escapeHtml(t.artist || 'Unknown')} — ${this.escapeHtml(t.title || 'Untitled')}</div>
|
||||
<div style="font-size:12px;color:#555;">${this.escapeHtml(t.album || '')} ${t.genre ? '· ' + this.escapeHtml(t.genre) : ''}</div>
|
||||
</div>
|
||||
${t.url ? `<a href="${this.escapeHtml(t.url)}" target="_blank" style="color:#00ff41;margin-right:12px;font-size:12px;">▶</a>` : ''}
|
||||
${t.url ? `<a href="${this.escapeHtml(t.url)}" target="_blank" style="color:#d0d0d0;margin-right:12px;font-size:12px;">▶</a>` : ''}
|
||||
<button class="btn-sm btn-delete" onclick="AdminApp.deleteTrack(${i})" title="Delete">✗</button>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
|
@ -1107,7 +1107,7 @@ const AdminApp = {
|
|||
|
||||
container.innerHTML = this.navData.map((item, i) => {
|
||||
return `<div class="nav-list-item" style="display:flex;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,0.05);">
|
||||
<span style="color:#00ff41;font-size:12px;margin-right:12px;min-width:30px;">#${item.order || i}</span>
|
||||
<span style="color:#d0d0d0;font-size:12px;margin-right:12px;min-width:30px;">#${item.order || i}</span>
|
||||
<div style="flex:1;">
|
||||
<div style="font-weight:600;color:#e0e0e0;">${this.escapeHtml(item.label || 'Unnamed')}</div>
|
||||
<div style="font-size:12px;color:#555;">${this.escapeHtml(item.url || '')}</div>
|
||||
|
|
@ -1191,7 +1191,7 @@ const AdminApp = {
|
|||
<span style="font-size:18px;margin-right:12px;">${this.escapeHtml(link.icon || '🔗')}</span>
|
||||
<div style="flex:1;">
|
||||
<div style="font-weight:600;color:#e0e0e0;">${this.escapeHtml(link.name || 'Unnamed')}</div>
|
||||
<div style="font-size:12px;color:#555;">${this.escapeHtml(link.url || '')} ${link.category ? '<span style="color:#00ff41;">· ' + this.escapeHtml(link.category) + '</span>' : ''}</div>
|
||||
<div style="font-size:12px;color:#555;">${this.escapeHtml(link.url || '')} ${link.category ? '<span style="color:#d0d0d0;">· ' + this.escapeHtml(link.category) + '</span>' : ''}</div>
|
||||
</div>
|
||||
<button class="btn-sm btn-delete" onclick="AdminApp.deleteLink(${i})" title="Delete">✗</button>
|
||||
</div>`;
|
||||
|
|
|
|||
12
js/main.js
12
js/main.js
|
|
@ -248,7 +248,7 @@
|
|||
function drawParticle(p) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(0, 255, 65, ${p.opacity})`;
|
||||
ctx.fillStyle = `rgba(51, 51, 51, ${p.opacity})`;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
ctx.beginPath();
|
||||
ctx.moveTo(particles[i].x, particles[i].y);
|
||||
ctx.lineTo(particles[j].x, particles[j].y);
|
||||
ctx.strokeStyle = `rgba(0, 255, 65, ${opacity})`;
|
||||
ctx.strokeStyle = `rgba(51, 51, 51, ${opacity})`;
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
|
@ -281,7 +281,7 @@
|
|||
ctx.beginPath();
|
||||
ctx.moveTo(p.x, p.y);
|
||||
ctx.lineTo(mouseX, mouseY);
|
||||
ctx.strokeStyle = `rgba(0, 255, 65, ${opacity})`;
|
||||
ctx.strokeStyle = `rgba(51, 51, 51, ${opacity})`;
|
||||
ctx.lineWidth = 0.8;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
|
@ -562,7 +562,7 @@
|
|||
const y = e.clientY - rect.top;
|
||||
card.style.setProperty('--mouse-x', `${x}px`);
|
||||
card.style.setProperty('--mouse-y', `${y}px`);
|
||||
card.style.background = `radial-gradient(circle 200px at ${x}px ${y}px, rgba(0, 255, 65, 0.04), var(--bg-panel))`;
|
||||
card.style.background = `radial-gradient(circle 200px at ${x}px ${y}px, rgba(51, 51, 51, 0.04), var(--bg-panel))`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
|
|
@ -670,7 +670,7 @@
|
|||
if (dlData.length > maxPoints) dlData.shift();
|
||||
if (ulData.length > maxPoints) ulData.shift();
|
||||
|
||||
drawLine(dlData, '#00ff41', 0.9);
|
||||
drawLine(dlData, '#333333', 0.9);
|
||||
drawLine(ulData, '#00a8ff', 0.6);
|
||||
updateStats();
|
||||
|
||||
|
|
@ -960,7 +960,7 @@
|
|||
});
|
||||
|
||||
console.log('%c[JAESWIFT] %cSystems Online',
|
||||
'color: #00ff41; font-weight: bold; font-size: 14px;',
|
||||
'color: #d0d0d0; font-weight: bold; font-size: 14px;',
|
||||
'color: #c0c0c0; font-size: 12px;');
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@
|
|||
'locked-in': '◉', 'zen': '☯'
|
||||
};
|
||||
const moodColors = {
|
||||
'focused': '#00ff41', 'creative': '#a855f7', 'productive': '#22d3ee',
|
||||
'focused': '#d0d0d0', 'creative': '#a855f7', 'productive': '#22d3ee',
|
||||
'tired': '#6b7280', 'wired': '#f59e0b', 'chaotic': '#ff2d2d',
|
||||
'locked-in': '#00ff88', 'zen': '#818cf8'
|
||||
};
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
|
||||
const moodStr = (post.mood || 'focused').toLowerCase();
|
||||
const moodIcon = moodIcons[moodStr] || '◈';
|
||||
const moodColor = moodColors[moodStr] || '#00ff41';
|
||||
const moodColor = moodColors[moodStr] || '#d0d0d0';
|
||||
const hr = post.heart_rate || post.bpm || 72;
|
||||
|
||||
const coffee = '☕'.repeat(Math.min(post.coffee || 0, 10)) +
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue