feat: black ops colour migration + 3-column HUD grid layout
- Replace all #00ffc8 → #00ff41 in admin.css (74 refs), admin.html (2 refs), index.html SVG (15 refs) - Replace all rgba(0,255,200,...) → rgba(0,255,65,...) across all files - Restructure hero HUD from 2-col to 3-col grid: narrow left (map 250px), center (identity), right (data panels 380px) - Add .hud-col-center wrapper for identity block - Update responsive breakpoints for 1024px, 768px, 480px - Increase max-width to 1400px for wider displays
This commit is contained in:
parent
139849d632
commit
3c31a18cb9
4 changed files with 122 additions and 97 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="#00ffc8">
|
||||
<input type="text" id="themeAccentColorHex" class="editor-input color-hex" value="#00ffc8" placeholder="#00ffc8">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-field">
|
||||
|
|
|
|||
148
css/admin.css
148
css/admin.css
|
|
@ -58,7 +58,7 @@ body {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(ellipse at center, rgba(0,255,200,0.03) 0%, transparent 70%), var(--bg);
|
||||
background: radial-gradient(ellipse at center, rgba(0,255,65,0.03) 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,200,0.3);
|
||||
text-shadow: 0 0 20px rgba(0,255,65,0.3);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -121,7 +121,7 @@ body {
|
|||
}
|
||||
.login-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 8px rgba(0,255,200,0.15);
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.15);
|
||||
}
|
||||
|
||||
.login-error {
|
||||
|
|
@ -147,7 +147,7 @@ body {
|
|||
}
|
||||
.login-btn:hover {
|
||||
background: var(--accent-dim);
|
||||
box-shadow: 0 0 15px rgba(0,255,200,0.2);
|
||||
box-shadow: 0 0 15px rgba(0,255,65,0.2);
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
|
|
@ -264,7 +264,7 @@ body {
|
|||
}
|
||||
.mobile-menu-btn:hover {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 8px rgba(0,255,200,0.15);
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.15);
|
||||
}
|
||||
.mobile-menu-btn .hamburger-line {
|
||||
display: block;
|
||||
|
|
@ -331,11 +331,11 @@ body {
|
|||
}
|
||||
.sidebar-link:hover {
|
||||
color: var(--text);
|
||||
background: rgba(0,255,200,0.03);
|
||||
background: rgba(0,255,65,0.03);
|
||||
}
|
||||
.sidebar-link.active {
|
||||
color: var(--accent);
|
||||
background: rgba(0,255,200,0.05);
|
||||
background: rgba(0,255,65,0.05);
|
||||
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,200,0.15);
|
||||
box-shadow: 0 0 10px rgba(0,255,65,0.15);
|
||||
}
|
||||
.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,200,0.2);
|
||||
text-shadow: 0 0 10px rgba(0,255,65,0.2);
|
||||
}
|
||||
|
||||
/* ─── Services Grid (Dashboard) ─── */
|
||||
|
|
@ -534,7 +534,7 @@ body {
|
|||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid rgba(0,255,200,0.04);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
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,200,0.03);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.03);
|
||||
font-size: 0.75rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.posts-table tr:hover td {
|
||||
background: rgba(0,255,200,0.02);
|
||||
background: rgba(0,255,65,0.02);
|
||||
}
|
||||
|
||||
.post-link {
|
||||
|
|
@ -616,7 +616,7 @@ body {
|
|||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.threat-low { color: var(--accent); border: 1px solid rgba(0,255,200,0.2); }
|
||||
.threat-low { color: var(--accent); border: 1px solid rgba(0,255,65,0.2); }
|
||||
.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,200,0.1);
|
||||
background: rgba(0,255,65,0.1);
|
||||
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,200,0.4);
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.4);
|
||||
}
|
||||
|
||||
.range-val {
|
||||
|
|
@ -819,7 +819,7 @@ body {
|
|||
color: var(--accent);
|
||||
}
|
||||
.editor-preview .post-rendered .inline-code {
|
||||
background: rgba(0,255,200,0.06);
|
||||
background: rgba(0,255,65,0.06);
|
||||
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,200,0.04);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.track-row:hover {
|
||||
background: rgba(0,255,200,0.02);
|
||||
background: rgba(0,255,65,0.02);
|
||||
}
|
||||
|
||||
.track-num {
|
||||
|
|
@ -928,13 +928,13 @@ body {
|
|||
transition: all 0.3s;
|
||||
}
|
||||
.toggle-row input[type="checkbox"]:checked {
|
||||
background: rgba(0,255,200,0.15);
|
||||
background: rgba(0,255,65,0.15);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.toggle-row input[type="checkbox"]:checked::after {
|
||||
left: 20px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 6px rgba(0,255,200,0.4);
|
||||
box-shadow: 0 0 6px rgba(0,255,65,0.4);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
|
|
@ -966,13 +966,13 @@ body {
|
|||
transition: all 0.3s;
|
||||
}
|
||||
.toggle-switch:checked {
|
||||
background: rgba(0,255,200,0.15);
|
||||
background: rgba(0,255,65,0.15);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.toggle-switch:checked::after {
|
||||
left: 20px;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 6px rgba(0,255,200,0.4);
|
||||
box-shadow: 0 0 6px rgba(0,255,65,0.4);
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
|
|
@ -992,9 +992,9 @@ body {
|
|||
font-size: 0.75rem;
|
||||
}
|
||||
.section-item:hover {
|
||||
background: rgba(0,255,200,0.03);
|
||||
background: rgba(0,255,65,0.03);
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: 0 0 6px rgba(0,255,200,0.05);
|
||||
box-shadow: 0 0 6px rgba(0,255,65,0.05);
|
||||
}
|
||||
|
||||
.section-item-label {
|
||||
|
|
@ -1133,9 +1133,9 @@ body {
|
|||
cursor: grab;
|
||||
}
|
||||
.homepage-section-item:hover {
|
||||
background: rgba(0,255,200,0.03);
|
||||
background: rgba(0,255,65,0.03);
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: 0 0 6px rgba(0,255,200,0.05);
|
||||
box-shadow: 0 0 6px rgba(0,255,65,0.05);
|
||||
}
|
||||
.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,200,0.04);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.service-item:hover {
|
||||
background: rgba(0,255,200,0.02);
|
||||
background: rgba(0,255,65,0.02);
|
||||
}
|
||||
|
||||
.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,200,0.04);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-item:hover {
|
||||
background: rgba(0,255,200,0.02);
|
||||
background: rgba(0,255,65,0.02);
|
||||
}
|
||||
|
||||
.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,200,0.04);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.04);
|
||||
font-size: 0.75rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.link-item:hover {
|
||||
background: rgba(0,255,200,0.02);
|
||||
background: rgba(0,255,65,0.02);
|
||||
}
|
||||
|
||||
.link-item-icon {
|
||||
|
|
@ -1308,7 +1308,7 @@ body {
|
|||
}
|
||||
.api-group-card:hover {
|
||||
border-left-color: #fff;
|
||||
box-shadow: 0 0 12px rgba(0,255,200,0.06);
|
||||
box-shadow: 0 0 12px rgba(0,255,65,0.06);
|
||||
}
|
||||
|
||||
.api-group-header {
|
||||
|
|
@ -1383,7 +1383,7 @@ body {
|
|||
}
|
||||
.api-group-save:hover {
|
||||
background: var(--accent-dim);
|
||||
box-shadow: 0 0 8px rgba(0,255,200,0.15);
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.15);
|
||||
}
|
||||
|
||||
/* ─── Theme / Appearance ─── */
|
||||
|
|
@ -1577,7 +1577,7 @@ body {
|
|||
}
|
||||
.backup-card:hover {
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: 0 0 10px rgba(0,255,200,0.06);
|
||||
box-shadow: 0 0 10px rgba(0,255,65,0.06);
|
||||
}
|
||||
|
||||
.backup-card.highlight {
|
||||
|
|
@ -1585,18 +1585,18 @@ body {
|
|||
max-width: 800px;
|
||||
border-color: var(--accent);
|
||||
background: rgba(0, 255, 65, 0.03);
|
||||
box-shadow: 0 0 15px rgba(0,255,200,0.06);
|
||||
box-shadow: 0 0 15px rgba(0,255,65,0.06);
|
||||
}
|
||||
|
||||
.backup-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 12px rgba(0,255,200,0.2);
|
||||
text-shadow: 0 0 12px rgba(0,255,65,0.2);
|
||||
}
|
||||
|
||||
.backup-card.highlight .backup-icon {
|
||||
font-size: 2.5rem;
|
||||
text-shadow: 0 0 20px rgba(0,255,200,0.3);
|
||||
text-shadow: 0 0 20px rgba(0,255,65,0.3);
|
||||
}
|
||||
|
||||
.backup-label {
|
||||
|
|
@ -1631,7 +1631,7 @@ body {
|
|||
}
|
||||
.backup-download-btn:hover {
|
||||
background: var(--accent-dim);
|
||||
box-shadow: 0 0 8px rgba(0,255,200,0.15);
|
||||
box-shadow: 0 0 8px rgba(0,255,65,0.15);
|
||||
}
|
||||
|
||||
.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,200,0.1);
|
||||
box-shadow: 0 0 15px rgba(0,255,65,0.1);
|
||||
}
|
||||
|
||||
.admin-notification.error {
|
||||
|
|
@ -1997,7 +1997,7 @@ body {
|
|||
width: 240px;
|
||||
height: 100vh;
|
||||
background: #060a12;
|
||||
border-right: 1px solid rgba(0,255,200,0.1);
|
||||
border-right: 1px solid rgba(0,255,65,0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
|
|
@ -2011,7 +2011,7 @@ body {
|
|||
color: #00ff41;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid rgba(0,255,200,0.08);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
|
@ -2022,7 +2022,7 @@ body {
|
|||
top: 0.8rem;
|
||||
right: 0.8rem;
|
||||
background: none;
|
||||
border: 1px solid rgba(0,255,200,0.2);
|
||||
border: 1px solid rgba(0,255,65,0.2);
|
||||
color: #00ff41;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
|
|
@ -2031,13 +2031,13 @@ body {
|
|||
}
|
||||
.sidebar-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(0,255,200,0.15), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(0,255,65,0.15), transparent);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.sidebar-header {
|
||||
padding: 0.6rem 1rem 0.3rem;
|
||||
font-size: 0.6rem;
|
||||
color: rgba(0,255,200,0.4);
|
||||
color: rgba(0,255,65,0.4);
|
||||
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,200,0.35);
|
||||
color: rgba(0,255,65,0.35);
|
||||
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,200,0.06);
|
||||
border-top: 1px solid rgba(0,255,65,0.06);
|
||||
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,200,0.08);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -2079,7 +2079,7 @@ body {
|
|||
}
|
||||
.topbar-title {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(0,255,200,0.6);
|
||||
color: rgba(0,255,65,0.6);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 600;
|
||||
|
|
@ -2120,7 +2120,7 @@ body {
|
|||
margin-bottom: 1.5rem;
|
||||
font-size: 1.8rem;
|
||||
color: #00ff41;
|
||||
text-shadow: 0 0 20px rgba(0,255,200,0.3);
|
||||
text-shadow: 0 0 20px rgba(0,255,65,0.3);
|
||||
letter-spacing: 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -2142,8 +2142,8 @@ body {
|
|||
|
||||
/* ─── EDITOR: Operator HUD ─── */
|
||||
.operator-hud {
|
||||
background: rgba(0,255,200,0.03);
|
||||
border: 1px solid rgba(0,255,200,0.1);
|
||||
background: rgba(0,255,65,0.03);
|
||||
border: 1px solid rgba(0,255,65,0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
|
|
@ -2184,7 +2184,7 @@ body {
|
|||
}
|
||||
.preview-pane {
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(0,255,200,0.08);
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
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,200,0.06);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.06);
|
||||
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,200,0.12);
|
||||
border: 1px solid rgba(0,255,65,0.12);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
padding: 0.5rem;
|
||||
|
|
@ -2223,13 +2223,13 @@ body {
|
|||
gap: 0.3rem;
|
||||
padding: 0.5rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border: 1px solid rgba(0,255,200,0.06);
|
||||
border: 1px solid rgba(0,255,65,0.06);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
.toolbar-btn {
|
||||
background: rgba(0,255,200,0.06);
|
||||
border: 1px solid rgba(0,255,200,0.12);
|
||||
background: rgba(0,255,65,0.06);
|
||||
border: 1px solid rgba(0,255,65,0.12);
|
||||
color: #00ff41;
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.7rem;
|
||||
|
|
@ -2239,13 +2239,13 @@ body {
|
|||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
.toolbar-btn:hover {
|
||||
background: rgba(0,255,200,0.15);
|
||||
background: rgba(0,255,65,0.15);
|
||||
border-color: #00ff41;
|
||||
}
|
||||
.toolbar-sep {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(0,255,200,0.12);
|
||||
background: rgba(0,255,65,0.12);
|
||||
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,200,0.06);
|
||||
border-bottom: 1px solid rgba(0,255,65,0.06);
|
||||
}
|
||||
.admin-table th {
|
||||
color: rgba(0,255,200,0.5);
|
||||
color: rgba(0,255,65,0.5);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.admin-table tr:hover {
|
||||
background: rgba(0,255,200,0.03);
|
||||
background: rgba(0,255,65,0.03);
|
||||
}
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid rgba(0,255,200,0.08);
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
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,200,0.02);
|
||||
border: 1px solid rgba(0,255,200,0.08);
|
||||
background: rgba(0,255,65,0.02);
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
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,200,0.06);
|
||||
border: 1px solid rgba(0,255,65,0.06);
|
||||
border-radius: 6px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
|
@ -2336,7 +2336,7 @@ body {
|
|||
transition: all 0.3s;
|
||||
}
|
||||
.toggle-slider.active {
|
||||
background: rgba(0,255,200,0.2);
|
||||
background: rgba(0,255,65,0.2);
|
||||
}
|
||||
.toggle-slider.active::after {
|
||||
left: 22px;
|
||||
|
|
@ -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,200,0.06);
|
||||
border: 1px solid rgba(0,255,65,0.06);
|
||||
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,200,0.08);
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
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,200,0.15);
|
||||
border: 1px solid rgba(0,255,65,0.15);
|
||||
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,200,0.12);
|
||||
border: 1px solid rgba(0,255,65,0.12);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
padding: 0.4rem 0.5rem;
|
||||
|
|
@ -2452,8 +2452,8 @@ body {
|
|||
}
|
||||
.backup-status {
|
||||
padding: 0.8rem;
|
||||
background: rgba(0,255,200,0.03);
|
||||
border: 1px solid rgba(0,255,200,0.08);
|
||||
background: rgba(0,255,65,0.03);
|
||||
border: 1px solid rgba(0,255,65,0.08);
|
||||
border-radius: 6px;
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255,255,255,0.5);
|
||||
|
|
|
|||
|
|
@ -322,19 +322,36 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
.hero-hud-grid {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
max-width: 1400px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: 250px 1fr 380px;
|
||||
grid-template-rows: auto;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
animation: fadeIn 1s ease both;
|
||||
}
|
||||
|
||||
.hud-col-left,
|
||||
.hud-col-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hud-col-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hud-col-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
|
|
@ -1514,7 +1531,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-hud-grid { grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 900px; }
|
||||
.hero-hud-grid { grid-template-columns: 200px 1fr 300px; gap: 1rem; max-width: 1000px; }
|
||||
.blog-grid, .dev-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.panels-grid { grid-template-columns: 1fr; }
|
||||
.contact-grid { grid-template-columns: 1fr; }
|
||||
|
|
@ -1590,6 +1607,7 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* HUD grid stacks on mobile */
|
||||
.hero-hud-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -1597,6 +1615,11 @@ a:hover { color: #fff; text-shadow: 0 0 10px var(--accent-glow); }
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.hud-col-center {
|
||||
min-height: auto;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.hud-row-panels { grid-template-columns: 1fr 1fr; }
|
||||
|
||||
.hero-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }
|
||||
|
|
|
|||
34
index.html
34
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,200,0.06)" stroke-width="0.5"/>
|
||||
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(0,255,65,0.06)" 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="#00ffc8" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#00ffc8" stop-opacity="0"/>
|
||||
<stop offset="0%" stop-color="#00ff41" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#00ff41" 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,200,0.03)" stroke="#00ffc8" 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,255,65,0.03)" stroke="#00ff41" 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,200,0.02)" stroke="#00ffc8" 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,255,65,0.02)" stroke="#00ff41" 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="#00ffc8" stroke-width="0.3" stroke-opacity="0.25" stroke-dasharray="4,4"/>
|
||||
<line x1="90" y1="0" x2="90" y2="400" stroke="#00ffc8" stroke-width="0.3" stroke-opacity="0.25" stroke-dasharray="4,4"/>
|
||||
<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"/>
|
||||
<!-- Manchester glow -->
|
||||
<circle cx="90" cy="172" r="25" fill="url(#dotGlow)"/>
|
||||
<!-- Manchester dot -->
|
||||
<circle cx="90" cy="172" r="3" fill="#00ffc8" filter="url(#glow)"/>
|
||||
<circle cx="90" cy="172" r="3" fill="#00ff41" filter="url(#glow)"/>
|
||||
<!-- Pulse rings -->
|
||||
<circle cx="90" cy="172" r="8" fill="none" stroke="#00ffc8" stroke-width="0.8" class="pulse-ring pulse-ring-1"/>
|
||||
<circle cx="90" cy="172" r="16" fill="none" stroke="#00ffc8" stroke-width="0.5" class="pulse-ring pulse-ring-2"/>
|
||||
<circle cx="90" cy="172" r="24" fill="none" stroke="#00ffc8" stroke-width="0.3" class="pulse-ring pulse-ring-3"/>
|
||||
<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"/>
|
||||
<!-- Manchester label -->
|
||||
<text x="108" y="168" fill="#00ffc8" font-size="8" font-family="'JetBrains Mono',monospace" letter-spacing="1">MANCHESTER</text>
|
||||
<text x="108" y="180" fill="rgba(0,255,200,0.5)" font-size="6" font-family="'JetBrains Mono',monospace">53.48°N 2.24°W</text>
|
||||
<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>
|
||||
<!-- Scan sweep -->
|
||||
<line x1="0" y1="0" x2="250" y2="0" stroke="#00ffc8" stroke-width="1" stroke-opacity="0.4" class="map-scan-line"/>
|
||||
<line x1="0" y1="0" x2="250" y2="0" stroke="#00ff41" stroke-width="1" stroke-opacity="0.4" class="map-scan-line"/>
|
||||
</svg>
|
||||
<div class="map-data-overlay">
|
||||
<div class="map-coord-block">
|
||||
|
|
@ -129,8 +129,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Identity Block -->
|
||||
<!-- Middle Column: Identity -->
|
||||
<div class="hud-col-center">
|
||||
<div class="hud-identity">
|
||||
<div class="hero-label">SYSTEM IDENTIFICATION</div>
|
||||
<h1 class="hero-title">
|
||||
|
|
@ -355,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:#00ffc8; letter-spacing:2px; text-decoration:none; border:1px solid rgba(0,255,200,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:#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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue