Spaces:
Running
Running
Download index.html from Frostbyte21/anycoder-b020eb09: direct link, hf CLI and curl.
- Browser
- Download file 27.3 kB
-
https://huggingface.co/spaces/Frostbyte21/anycoder-b020eb09/resolve/main/index.html
- Command line
-
hf download hf://spaces/Frostbyte21/anycoder-b020eb09/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Frostbyte21/anycoder-b020eb09/resolve/main/index.html
27.3 kB
| <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 |