anycoder-b020eb09 / index.html
Frostbyte21's picture
Upload folder using huggingface_hub
ad4897c verified
Raw History Blame Contribute Delete
27.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenClaw Swarm | Bug Bounty Platform</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Tailwind Config -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
claw: {
neon: '#00ff9d',
neonDim: '#00cc7a',
neonGlow: 'rgba(0,255,157,0.4)',
dark: '#0a0f0a',
panel: '#0d1412',
panelLight: '#111a16',
border: '#1a2e22',
borderHover: '#2d4a36',
red: '#ff3b5c',
redGlow: 'rgba(255,59,92,0.5)',
amber: '#f0b000',
amberGlow: 'rgba(240,176,0,0.5)',
blue: '#00d4ff',
blueGlow: 'rgba(0,212,255,0.5)',
purple: '#b66dff',
purpleGlow: 'rgba(182,109,255,0.4)',
},
},
fontFamily: {
mono: ['JetBrains Mono', 'monospace'],
display: ['Orbitron', 'sans-serif'],
ui: ['Rajdhani', 'sans-serif'],
},
},
},
}
</script>
<style>
/* ===== ROOT VARIABLES ===== */
:root {
--neon: #00ff9d;
--neon-dim: #00cc7a;
--neon-glow: rgba(0,255,157,0.4);
--neon-bright: rgba(0,255,157,0.8);
--dark-bg: #0a0f0a;
--panel: #0d1412;
--panel-light: #111a16;
--border: #1a2e22;
--border-hover: #2d4a36;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--dark-bg);
color: var(--neon);
font-family: 'JetBrains Mono', monospace;
overflow-x: hidden;
min-height: 100vh;
}
/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: var(--dark-bg);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--neon-dim);
}
/* ===== CRT & NOISE EFFECTS ===== */
.crt-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.04;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,255,157,0.015) 2px,
rgba(0,255,157,0.015) 4px
);
}
.noise-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow-text {
text-shadow: 0 0 10px var(--neon-glow), 0 0 20px var(--neon-glow), 0 0 40px rgba(0,255,157,0.15);
}
.glow-text-red {
text-shadow: 0 0 10px rgba(255,59,92,0.5), 0 0 20px rgba(255,59,92,0.3);
}
.glow-text-amber {
text-shadow: 0 0 10px rgba(240,176,0,0.5), 0 0 20px rgba(240,176,0,0.3);
}
.glow-text-blue {
text-shadow: 0 0 10px rgba(0,212,255,0.5), 0 0 20px rgba(0,212,255,0.3);
}
/* ===== GLASS PANEL ===== */
.glass-panel {
background: rgba(13, 20, 18, 0.75);
border: 1px solid var(--border);
border-radius: 12px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-panel:hover {
border-color: var(--border-hover);
box-shadow: 0 0 30px rgba(0,255,157,0.08);
}
.glass-panel-inner {
background: rgba(13, 20, 18, 0.55);
border: 1px solid var(--border);
border-radius: 8px;
}
/* ===== GLASSY BUTTON ===== */
.claw-btn {
position: relative;
background: rgba(0,255,157,0.06);
border: 1px solid rgba(0,255,157,0.25);
border-radius: 10px;
color: var(--neon);
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 12px 28px;
cursor: pointer;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-shadow: 0 0 6px var(--neon-glow);
}
.claw-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(0,255,157,0.08);
transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.claw-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
opacity: 0;
box-shadow: 0 0 30px var(--neon-glow), inset 0 0 20px rgba(0,255,157,0.05);
transition: opacity 0.4s ease;
}
.claw-btn:hover::before {
left: 0;
}
.claw-btn:hover::after {
opacity: 1;
}
.claw-btn:hover {
border-color: var(--neon);
box-shadow: 0 0 25px var(--neon-glow), 0 0 60px rgba(0,255,157,0.1);
transform: translateY(-1px);
text-shadow: 0 0 12px var(--neon-bright);
}
.claw-btn:active {
transform: translateY(1px) scale(0.98);
}
.claw-btn-red {
background: rgba(255,59,92,0.06);
border-color: rgba(255,59,92,0.25);
color: #ff3b5c;
text-shadow: 0 0 6px rgba(255,59,92,0.4);
}
.claw-btn-red::before {
background: rgba(255,59,92,0.08);
}
.claw-btn-red::after {
box-shadow: 0 0 30px rgba(255,59,92,0.3);
}
.claw-btn-red:hover {
border-color: #ff3b5c;
box-shadow: 0 0 25px rgba(255,59,92,0.3);
text-shadow: 0 0 12px rgba(255,59,92,0.8);
}
.claw-btn-amber {
background: rgba(240,176,0,0.06);
border-color: rgba(240,176,0,0.25);
color: #f0b000;
text-shadow: 0 0 6px rgba(240,176,0,0.4);
}
.claw-btn-amber::before {
background: rgba(240,176,0,0.08);
}
.claw-btn-amber::after {
box-shadow: 0 0 30px rgba(240,176,0,0.3);
}
.claw-btn-amber:hover {
border-color: #f0b000;
box-shadow: 0 0 25px rgba(240,176,0,0.3);
}
.claw-btn-blue {
background: rgba(0,212,255,0.06);
border-color: rgba(0,212,255,0.25);
color: #00d4ff;
text-shadow: 0 0 6px rgba(0,212,255,0.4);
}
.claw-btn-blue::before {
background: rgba(0,212,255,0.08);
}
.claw-btn-blue::after {
box-shadow: 0 0 30px rgba(0,212,255,0.3);
}
.claw-btn-blue:hover {
border-color: #00d4ff;
box-shadow: 0 0 25px rgba(0,212,255,0.3);
}
.claw-btn-purple {
background: rgba(182,109,255,0.06);
border-color: rgba(182,109,255,0.25);
color: #b66dff;
text-shadow: 0 0 6px rgba(182,109,255,0.4);
}
.claw-btn-purple::before {
background: rgba(182,109,255,0.08);
}
.claw-btn-purple::after {
box-shadow: 0 0 30px rgba(182,109,255,0.3);
}
.claw-btn-purple:hover {
border-color: #b66dff;
box-shadow: 0 0 25px rgba(182,109,255,0.3);
}
/* ===== GLASSY TABS ===== */
.claw-tab {
position: relative;
background: rgba(0,255,157,0.03);
border: 1px solid var(--border);
border-radius: 10px;
color: rgba(0,255,157,0.55);
font-family: 'Orbitron', sans-serif;
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 20px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
overflow: hidden;
}
.claw-tab::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--neon);
box-shadow: 0 0 15px var(--neon), 0 0 30px var(--neon-glow);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(-50%);
}
.claw-tab:hover {
border-color: rgba(0,255,157,0.5);
color: var(--neon);
box-shadow: 0 0 25px rgba(0,255,157,0.12), inset 0 0 20px rgba(0,255,157,0.03);
text-shadow: 0 0 8px var(--neon-glow);
}
.claw-tab:hover::after {
width: 60%;
}
.claw-tab.active {
background: rgba(0,255,157,0.08);
border-color: var(--neon);
color: var(--neon);
box-shadow: 0 0 30px rgba(0,255,157,0.15), inset 0 0 20px rgba(0,255,157,0.05);
text-shadow: 0 0 10px var(--neon-glow);
}
.claw-tab.active::after {
width: 100%;
height: 2px;
box-shadow: 0 0 20px var(--neon), 0 0 40px var(--neon-glow);
}
/* ===== PROGRESS RING ===== */
.progress-ring-track {
stroke: var(--border);
stroke-width: 3;
fill: none;
}
.progress-ring-fill {
stroke: var(--neon);
stroke-width: 3;
fill: none;
stroke-linecap: round;
transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
filter: drop-shadow(0 0 4px var(--neon));
}
.progress-ring-fill.red {
stroke: #ff3b5c;
filter: drop-shadow(0 0 4px #ff3b5c);
}
.progress-ring-fill.amber {
stroke: #f0b000;
filter: drop-shadow(0 0 4px #f0b000);
}
.progress-ring-fill.blue {
stroke: #00d4ff;
filter: drop-shadow(0 0 4px #00d4ff);
}
.progress-ring-fill.purple {
stroke: #b66dff;
filter: drop-shadow(0 0 4px #b66dff);
}
/* ===== PULSE ANIMATIONS ===== */
@keyframes pulse-glow {
0%, 100% {
opacity: 1;
box-shadow: 0 0 20px var(--neon-glow);
}
50% {
opacity: 0.6;
box-shadow: 0 0 5px rgba(0,255,157,0.1);
}
}
.pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes scan-line {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
.scan-line {
position: absolute;
width: 100%;
height: 2px;
background: var(--neon);
box-shadow: 0 0 20px var(--neon), 0 0 40px var(--neon-glow);
animation: scan-line 3s linear infinite;
opacity: 0.3;
pointer-events: none;
}
@keyframes terminal-cursor {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.terminal-cursor {
display: inline-block;
width: 10px;
height: 1.2em;
background: var(--neon);
box-shadow: 0 0 8px var(--neon);
animation: terminal-cursor 0.8s ease-in-out infinite;
vertical-align: text-bottom;
margin-left: 2px;
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fade-in-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.shimmer {
background: linear-gradient(
90deg,
transparent 0%,
rgba(0,255,157,0.08) 50%,
transparent 100%
);
background-size: 200% 100%;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes border-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* ===== LOG LINE ===== */
.log-line {
font-size: 0.78rem;
line-height: 1.7;
padding: 2px 0;
opacity: 0;
animation: fade-in-up 0.2s ease forwards;
}
.log-timestamp {
color: rgba(0,255,157,0.35);
font-size: 0.7rem;
margin-right: 8px;
}
.log-info {
color: rgba(0,255,157,0.85);
}
.log-warn {
color: #f0b000;
}
.log-error {
color: #ff3b5c;
}
.log-success {
color: #00ff9d;
font-weight: 700;
}
.log-scan {
color: #00d4ff;
}
.log-exploit {
color: #ff3b5c;
font-weight: 700;
}
.log-impact {
color: #b66dff;
font-weight: 700;
}
/* ===== HEX GRID BG ===== */
.hex-bg {
position: relative;
}
.hex-bg::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cg fill='none' stroke='%23122a1e' stroke-width='0.8'%3E%3Cpath d='M14 0L0 8v32l14 8 14-8V8z'/%3E%3C/g%3E%3C/svg%3E");
background-size: 28px 48px;
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
.hex-bg > * {
position: relative;
z-index: 1;
}
/* ===== AGENT CARD ===== */
.agent-card {
position: relative;
background: rgba(13, 20, 18, 0.6);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.agent-card:hover {
border-color: rgba(0,255,157,0.4);
transform: translateY(-4px);
box-shadow: 0 8px 40px rgba(0,255,157,0.1), 0 0 60px rgba(0,255,157,0.05);
}
.agent-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: rgba(0,255,157,0.04);
transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.agent-card:hover::before {
left: 100%;
}
.agent-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 0 8px currentColor;
}
/* ===== TABLE ===== */
.claw-table {
width: 100%;
border-collapse: collapse;
}
.claw-table th {
background: rgba(0,255,157,0.04);
border-bottom: 1px solid var(--border);
color: var(--neon);
font-family: 'Orbitron', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 12px 16px;
text-align: left;
}
.claw-table td {
border-bottom: 1px solid rgba(26,46,34,0.5);
padding: 12px 16px;
font-size: 0.82rem;
transition: background 0.3s ease;
}
.claw-table tr:hover td {
background: rgba(0,255,157,0.03);
}
.claw-table tr:last-child td {
border-bottom: none;
}
/* ===== SEVERITY BADGES ===== */
.severity-critical {
display: inline-block;
background: rgba(255,59,92,0.12);
border: 1px solid rgba(255,59,92,0.4);
color: #ff3b5c;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px 10px;
border-radius: 4px;
text-shadow: 0 0 8px rgba(255,59,92,0.5);
}
.severity-high {
display: inline-block;
background: rgba(255,59,92,0.08);
border: 1px solid rgba(255,59,92,0.25);
color: #ff3b5c;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px 10px;
border-radius: 4px;
}
.severity-medium {
display: inline-block;
background: rgba(240,176,0,0.08);
border: 1px solid rgba(240,176,0,0.25);
color: #f0b000;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px 10px;
border-radius: 4px;
}
.severity-low {
display: inline-block;
background: rgba(0,212,255,0.08);
border: 1px solid rgba(0,212,255,0.25);
color: #00d4ff;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px 10px;
border-radius: 4px;
}
.severity-info {
display: inline-block;
background: rgba(0,255,157,0.06);
border: 1px solid rgba(0,255,157,0.2);
color: var(--neon-dim);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px 10px;
border-radius: 4px;
}
/* ===== MINI MAP ===== */
.minimap-cell {
width: 6px;
height: 6px;
border-radius: 1px;
transition: all 0.4s ease;
}
.minimap-cell.verified {
background: var(--neon);
box-shadow: 0 0 4px var(--neon);
}
.minimap-cell.discovered {
background: rgba(0,255,157,0.3);
}
.minimap-cell.scanning {
background: #f0b000;
box-shadow: 0 0 4px #f0b000;
}
.minimap-cell.vuln {
background: #ff3b5c;
box-shadow: 0 0 4px #ff3b5c;
}
/* ===== SCROLLBAR FOR LOGS ===== */
.log-scroll::-webkit-scrollbar {
width: 4px;
}
.log-scroll::-webkit-scrollbar-thumb {
background: rgba(0,255,157,0.15);
border-radius: 2px;
}
.log-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(0,255,157,0.35);
}
/* ===== INPUT ===== */
.claw-input {
background: rgba(0,255,157,0.03);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--neon);
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
padding: 10px 14px;
width: 100%;
outline: none;
transition: all 0.35s ease;
}
.claw-input:focus {
border-color: var(--neon);
box-shadow: 0 0 15px rgba(0,255,157,0.15), inset 0 0 10px rgba(0,255,157,0.03);
}
.claw-input::placeholder {
color: rgba(0,255,157,0.25);
}
/* ===== CHIP ===== */
.claw-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(0,255,157,0.05);
border: 1px solid rgba(0,255,157,0.15);
border-radius: 6px;
padding: 4px 10px;
font-size: 0.72rem;
color: var(--neon);
letter-spacing: 0.5px;
}
/* ===== DIVIDER ===== */
.neon-divider {
height: 1px;
background: var(--border);
position: relative;
}
.neon-divider::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 1px;
background: var(--neon);
box-shadow: 0 0 8px var(--neon), 0 0 20px var(--neon-glow);
}
/* ===== STAGE INDICATOR ===== */
.stage-indicator {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 8px;
font-family: 'Orbitron', sans-serif;
font-size: 0.7rem;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.4s ease;
cursor: default;
}
.stage-indicator.active {
background: rgba(0,255,157,0.08);
border: 1px solid rgba(0,255,157,0.4);
color: var(--neon);
box-shadow: 0 0 20px rgba(0,255,157,0.1);
}
.stage-indicator.waiting {
background: rgba(0,255,157,0.02);
border: 1px solid var(--border);
color: rgba(0,255,157,0.3);
}
.stage-indicator.completed {
background: rgba(0,255,157,0.05);
border: 1px solid rgba(0,255,157,0.2);
color: var(--neon);
opacity: 0.6;
}
/* ===== ANIMATED BORDER ===== */
.animated-border {
position: relative;
border-radius: 12px;
overflow: hidden;
}
.animated-border::before {
content: '';
position: absolute;
inset: -2px;
background: conic-gradient(
from 0deg,
transparent 0%,
var(--neon) 15%,
transparent 30%,
transparent 70%,
var(--neon) 85%,
transparent 100%
);
border-radius: 14px;
animation: border-flow 4s linear infinite;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.animated-border:hover::before {
opacity: 0.5;
}
/* ===== TYPEWRITER ===== */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
.typewriter {
overflow: hidden;
white-space: nowrap;
animation: typing 2s steps(40, end);
}
/* ===== DOT PATTERN ===== */
.dot-pattern {
background-image: radial-gradient(circle, rgba(0,255,157,0.08) 1px, transparent 1px);
background-size: 20px 20px;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.claw-tab {
padding: 8px 14px;
font-size: 0.65rem;
}
.claw-btn {
padding: 10px 20px;
font-size: 0.75rem;
}
}
/* ===== TOOLTIP ===== */
.claw-tooltip {
position: relative;
}
.claw-tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: var(--panel);
border: 1px solid var(--border-hover);
border-radius: 6px;
padding: 6px 12px;
font-size: 0.7rem;
color: var(--neon);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
z-index: 100;
}
.claw-tooltip:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(-2px);
}
</style>
</head>
<body>
<!-- CRT Scanline Overlay -->
<div class="crt-overlay"></div>
<div class="noise-overlay"></div>
<!-- TOP HEADER -->
<header style="border-bottom: 1px solid var(--border); background: rgba(10,15,10,0.85); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 100;">
<div class="max-w-[1800px] mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
<div class="flex items-center gap-4">
<!-- Animated Logo SVG -->
<div class="relative w-10 h-10 flex-shrink-0">
<svg viewBox="0 0 40 40" class="w-full h-full" style="filter: drop-shadow(0 0 8px var(--neon));">
<polygon points="20,2 36,12 36,28 20,38 4,28 4,12" fill="none" stroke="var(--neon)" stroke-width="1.5" />
<polygon points="20,8 30,14 30,26 20,32 10,26 10,14" fill="none" stroke="var(--neon)" stroke-width="0.8" style="opacity: 0.6;" />
<circle cx="20" cy="20" r="3" fill="var(--neon)" style="filter: drop-shadow(0 0 6px var(--neon));" />
<line x1="20" y1="2" x2="20" y2="10" stroke="var(--neon)" stroke-width="0.5" style="opacity: 0.3;" />
<line x1="36" y1="12" x2="28" y2="16" stroke="var(--neon)" stroke-width="0.5" style="opacity: 0.3;" />
<line x1="36" y1="28" x2="28" y2="24" stroke="var(--neon)" stroke-width="0.5" style="opacity: 0.3;" />
<line x1="20" y1="38" x2="20" y2="30" stroke="var(--neon)" stroke-width="0.5" style="opacity: 0.3;" />
<line x1="4" y1="28" x2="12" y2="24" stroke="var(--neon)" stroke-width="0.5" style="opacity: 0.3;" />
<line x1="4" y1="12" x2="12" y2="16" stroke="var(--neon)" stroke-width="0.5" style="opacity: 0.3;" />
</svg>
<div class="absolute inset-0 rounded-full" style="border: 1px solid var(--neon); opacity: 0.15; animation: pulse-glow 3s ease-in-out infinite;"></div>
</div>
<div>
<h1 class="font-display text-lg sm:text-xl tracking-[0.2em] font-black glow-text">OPENCLAW</h1>
<p class="font-ui text-[0.6rem] sm:text-[0.65rem] tracking-[0.25em] text-claw-neonDim uppercase font-bold opacity-70 mt-[-2px]">Swarm Intelligence Platform</p>
</div>
</div>
<div class="flex items-center gap-3 sm:gap-6">
<!-- Target Indicator -->
<div class="hidden md:flex items-center gap-3 px-4 py-2 rounded-lg" style="background: rgba(0,255,157,0.03); border: 1px solid var(--border);">
<span class="agent-status-dot" style="background: #f0b000; color: #f0b000; animation: pulse-glow 1.5s ease-in-out infinite;"></span>
<span class="font-ui text-xs tracking-wider text-claw-neonDim uppercase font-bold" id="headerTarget">TARGET: <span class="text-claw-neon font-mono ml-1">example.com</span></span>
</div>
<!-- Swarm Status -->
<div class="flex items-center gap-2">
<div id="swarmStatusDot" class="agent-status-dot" style="background: #00ff9d; color: #00ff9d;"></div>
<span id="swarmStatusText" class="font-ui text-xs tracking-wider font-bold uppercase">SWARM: IDLE</span>
</div>
<!-- Clock -->
<div class="hidden sm:block font-mono text-xs text-claw-neonDim" id="clock">00:00:00 UTC</div>
<!-- Credits -->
<div class="hidden lg:block">
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="claw-chip glow-text text-xs hover:opacity-80 transition-opacity">
<span style="width:6px;height:6px;border-radius:50%;background:#00ff9d;display:inline-block;box-shadow:0 0 6px #00ff9d;"></span>
Built with anycoder
</a>
</div>
</div>
</div>
<!-- BOTTOM HEADER: Stage Pipeline -->
<div class="max-w-[1800px] mx-auto px-4 sm:px-6 py-2 flex items-center gap-2 overflow-x-auto" style="border-top: 1px solid rgba(26,46,34,0.5);">
<div class="stage-indicator waiting" id="stageSetup">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
Setup
</div>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(0,255,157,0.2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
<div class="stage-indicator waiting" id="stageTeam">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>
Team
</div>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(0,255,157,0.2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
<div class="stage-indicator waiting" id="stageRecon">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
Recon
</div>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(0,255,157,0.2)" stroke-width="2"><path d="M9 18l6-6-6-6