feat(web): MazeNET scaffold — tokens, route, nav, stub page
This commit is contained in:
@@ -12,6 +12,7 @@ import Bounty from './components/Bounty';
|
||||
import RemoteUpdates from './components/RemoteUpdates';
|
||||
import SwarmHosts from './components/SwarmHosts';
|
||||
import AgentEnrollment from './components/AgentEnrollment';
|
||||
import MazeNET from './components/MazeNET/MazeNET';
|
||||
|
||||
function isTokenValid(token: string): boolean {
|
||||
try {
|
||||
@@ -62,6 +63,7 @@ function App() {
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard searchQuery={searchQuery} />} />
|
||||
<Route path="/fleet" element={<DeckyFleet />} />
|
||||
<Route path="/mazenet" element={<MazeNET />} />
|
||||
<Route path="/live-logs" element={<LiveLogs />} />
|
||||
<Route path="/bounty" element={<Bounty />} />
|
||||
<Route path="/attackers" element={<Attackers />} />
|
||||
|
||||
@@ -43,6 +43,7 @@ const Layout: React.FC<LayoutProps> = ({ children, onLogout, onSearch }) => {
|
||||
<nav className="sidebar-nav">
|
||||
<NavItem to="/" icon={<LayoutDashboard size={20} />} label="Dashboard" open={sidebarOpen} />
|
||||
<NavItem to="/fleet" icon={<Server size={20} />} label="Decoy Fleet" open={sidebarOpen} />
|
||||
<NavItem to="/mazenet" icon={<Network size={20} />} label="MazeNET" open={sidebarOpen} />
|
||||
<NavItem to="/live-logs" icon={<Terminal size={20} />} label="Live Logs" open={sidebarOpen} />
|
||||
<NavItem to="/bounty" icon={<Archive size={20} />} label="Bounty" open={sidebarOpen} />
|
||||
<NavItem to="/attackers" icon={<Activity size={20} />} label="Attackers" open={sidebarOpen} />
|
||||
|
||||
29
decnet_web/src/components/MazeNET/MazeNET.css
Normal file
29
decnet_web/src/components/MazeNET/MazeNET.css
Normal file
@@ -0,0 +1,29 @@
|
||||
.maze-stub {
|
||||
height: 100%;
|
||||
min-height: calc(100vh - var(--topbar-h));
|
||||
margin: -28px -32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.maze-stub-inner {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.maze-stub-title {
|
||||
font-size: var(--fs-page);
|
||||
letter-spacing: var(--ls-title);
|
||||
font-weight: 700;
|
||||
color: var(--violet);
|
||||
filter: drop-shadow(var(--violet-glow));
|
||||
}
|
||||
|
||||
.maze-stub-sub {
|
||||
font-size: var(--fs-mini);
|
||||
letter-spacing: var(--ls-nav);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
15
decnet_web/src/components/MazeNET/MazeNET.tsx
Normal file
15
decnet_web/src/components/MazeNET/MazeNET.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import './MazeNET.css';
|
||||
|
||||
const MazeNET: React.FC = () => {
|
||||
return (
|
||||
<div className="maze-stub bg-scangrid">
|
||||
<div className="maze-stub-inner">
|
||||
<div className="maze-stub-title">MAZENET</div>
|
||||
<div className="maze-stub-sub fx-dim">coming online…</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MazeNET;
|
||||
@@ -1,27 +1,114 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||
|
||||
:root {
|
||||
--background-color: #000000;
|
||||
--text-color: #00ff41;
|
||||
--accent-color: #ee82ee;
|
||||
--secondary-color: #0d1117;
|
||||
--border-color: #30363d;
|
||||
--matrix-green-glow: 0 0 10px rgba(0, 255, 65, 0.5);
|
||||
--violet-glow: 0 0 10px rgba(238, 130, 238, 0.5);
|
||||
/* ── Brand ─────────────────────────────────────── */
|
||||
--bg: #000000;
|
||||
--matrix: #00ff41;
|
||||
--violet: #ee82ee;
|
||||
--panel: #0d1117;
|
||||
--border: #30363d;
|
||||
--alert: #ff4141;
|
||||
|
||||
/* Back-compat names used across the codebase */
|
||||
--background-color: var(--bg);
|
||||
--text-color: var(--matrix);
|
||||
--accent-color: var(--violet);
|
||||
--secondary-color: var(--panel);
|
||||
--border-color: var(--border);
|
||||
|
||||
/* ── Foreground opacities ──────────────────────── */
|
||||
--fg-1: var(--matrix);
|
||||
--fg-2: rgba(0, 255, 65, 0.80);
|
||||
--fg-3: rgba(0, 255, 65, 0.60);
|
||||
--fg-4: rgba(0, 255, 65, 0.40);
|
||||
|
||||
/* ── Tinted surfaces ───────────────────────────── */
|
||||
--matrix-tint-5: rgba(0, 255, 65, 0.05);
|
||||
--matrix-tint-10: rgba(0, 255, 65, 0.10);
|
||||
--matrix-tint-30: rgba(0, 255, 65, 0.30);
|
||||
--violet-tint-10: rgba(238, 130, 238, 0.10);
|
||||
--alert-tint-10: rgba(255, 65, 65, 0.10);
|
||||
|
||||
/* ── Glows ─────────────────────────────────────── */
|
||||
--matrix-glow: 0 0 10px rgba(0, 255, 65, 0.5);
|
||||
--matrix-green-glow: var(--matrix-glow); /* back-compat */
|
||||
--violet-glow: 0 0 10px rgba(238, 130, 238, 0.5);
|
||||
--matrix-glow-lg: 0 0 20px rgba(0, 255, 65, 0.4);
|
||||
--shadow-panel: 0 0 20px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* ── Grid texture ──────────────────────────────── */
|
||||
--grid-line: rgba(0, 255, 65, 0.05);
|
||||
--grid-size: 20px;
|
||||
|
||||
/* ── Type ──────────────────────────────────────── */
|
||||
--font-mono: 'Ubuntu Mono', 'SF Mono', Menlo, Consolas, monospace;
|
||||
|
||||
--fs-micro: 0.6rem;
|
||||
--fs-mini: 0.7rem;
|
||||
--fs-tiny: 0.75rem;
|
||||
--fs-small: 0.8rem;
|
||||
--fs-body: 0.85rem;
|
||||
--fs-ui: 0.9rem;
|
||||
--fs-base: 1rem;
|
||||
--fs-head: 1.2rem;
|
||||
--fs-page: 1.5rem;
|
||||
--fs-hero: 1.8rem;
|
||||
--fs-display: 2.5rem;
|
||||
|
||||
--lh-default: 1.5;
|
||||
|
||||
--ls-tight: 0;
|
||||
--ls-label: 1px;
|
||||
--ls-nav: 2px;
|
||||
--ls-title: 4px;
|
||||
--ls-brand: 10px;
|
||||
|
||||
/* ── Spacing ───────────────────────────────────── */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
|
||||
/* ── Radii ─────────────────────────────────────── */
|
||||
--radius-0: 0;
|
||||
--radius-1: 2px;
|
||||
--radius-2: 4px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
/* ── Layout ────────────────────────────────────── */
|
||||
--sidebar-open: 240px;
|
||||
--sidebar-closed: 70px;
|
||||
--topbar-h: 64px;
|
||||
|
||||
/* ── Motion ────────────────────────────────────── */
|
||||
--ease: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--dur-quick: 0.2s;
|
||||
--dur-base: 0.3s;
|
||||
--dur-slow: 1s;
|
||||
|
||||
--blink-dur: 2s;
|
||||
--pulse-dur: 1s;
|
||||
--spin-dur: 1.5s;
|
||||
}
|
||||
|
||||
* {
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Ubuntu Mono', monospace;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.5;
|
||||
font-family: var(--font-mono);
|
||||
background-color: var(--bg);
|
||||
color: var(--matrix);
|
||||
line-height: var(--lh-default);
|
||||
overflow-x: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: geometricPrecision;
|
||||
}
|
||||
|
||||
input, button, textarea, select {
|
||||
@@ -31,45 +118,64 @@ input, button, textarea, select {
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 1px solid var(--text-color);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--matrix);
|
||||
color: var(--matrix);
|
||||
padding: 8px 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--text-color);
|
||||
color: var(--background-color);
|
||||
box-shadow: var(--matrix-green-glow);
|
||||
background: var(--matrix);
|
||||
color: var(--bg);
|
||||
box-shadow: var(--matrix-glow);
|
||||
}
|
||||
|
||||
input {
|
||||
background: #0d1117;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--matrix);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: var(--text-color);
|
||||
box-shadow: var(--matrix-green-glow);
|
||||
border-color: var(--matrix);
|
||||
box-shadow: var(--matrix-glow);
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
/* ── Primitive animations ──────────────────────── */
|
||||
@keyframes decnet-blink {
|
||||
0%, 100% { opacity: 1; text-shadow: var(--matrix-glow); }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
@keyframes decnet-pulse {
|
||||
from { opacity: 0.5; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes decnet-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background-color);
|
||||
.fx-blink { animation: decnet-blink var(--blink-dur) infinite; }
|
||||
.fx-pulse { animation: decnet-pulse var(--pulse-dur) infinite alternate; }
|
||||
.fx-spin { animation: decnet-spin var(--spin-dur) linear infinite; }
|
||||
|
||||
.fx-matrix-text { color: var(--matrix); }
|
||||
.fx-violet-text { color: var(--violet); filter: drop-shadow(var(--violet-glow)); }
|
||||
.fx-matrix-glow { text-shadow: var(--matrix-glow); }
|
||||
.fx-dim { opacity: 0.5; }
|
||||
|
||||
.bg-scangrid {
|
||||
background-color: var(--bg);
|
||||
background-image:
|
||||
linear-gradient(var(--grid-line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
|
||||
background-size: var(--grid-size) var(--grid-size);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--secondary-color);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-color);
|
||||
}
|
||||
/* ── Scrollbar ─────────────────────────────────── */
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg); }
|
||||
::-webkit-scrollbar-thumb { background: var(--panel); border: 1px solid var(--border); }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--border); }
|
||||
|
||||
Reference in New Issue
Block a user