Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CKClaw β Unrestricted Red Team AI Agent Framework</title> | |
| <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=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --bg: #0a0000; | |
| --bg-card: #1a0a0a; | |
| --bg-card-hover: #2a0f0f; | |
| --bg-code: #0d0505; | |
| --accent: #ff0000; | |
| --accent2: #cc0000; | |
| --accent3: #880000; | |
| --text: #e0d0d0; | |
| --text-dim: #886666; | |
| --text-bright: #ffffff; | |
| --border: #3a1515; | |
| --glow: rgba(255, 0, 0, 0.3); | |
| --glow-strong: rgba(255, 0, 0, 0.6); | |
| --font-code: 'Fira Code', monospace; | |
| --font-sans: 'Inter', sans-serif; | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* Scanlines */ | |
| body::after { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,0,0,0.015) 2px, rgba(255,0,0,0.015) 4px); | |
| pointer-events: none; | |
| z-index: 9999; | |
| } | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { background: var(--accent3); border-radius: 3px; } | |
| .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } | |
| section { padding: 80px 0; } | |
| .section-header { text-align: center; margin-bottom: 56px; } | |
| .section-title { | |
| font-size: clamp(1.8rem, 4vw, 2.4rem); | |
| font-weight: 800; | |
| color: var(--text-bright); | |
| margin-bottom: 10px; | |
| } | |
| .section-title .hl { color: var(--accent); } | |
| .section-desc { | |
| font-size: 0.95rem; | |
| color: var(--text-dim); | |
| max-width: 560px; | |
| margin: 0 auto; | |
| } | |
| /* ====== NAV ====== */ | |
| nav { | |
| position: fixed; top: 0; left: 0; right: 0; z-index: 1000; | |
| background: rgba(10, 0, 0, 0.88); | |
| backdrop-filter: blur(14px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| nav .container { display: flex; align-items: center; justify-content: space-between; height: 56px; } | |
| .nav-logo { | |
| font-family: var(--font-code); | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| text-decoration: none; | |
| } | |
| .nav-links { display: flex; gap: 24px; list-style: none; } | |
| .nav-links a { | |
| color: var(--text-dim); | |
| text-decoration: none; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .nav-links a:hover { color: var(--accent); } | |
| @media (max-width: 700px) { .nav-links { display: none; } } | |
| /* ====== HERO ====== */ | |
| #hero { | |
| position: relative; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| padding-top: 56px; | |
| } | |
| .hero-bg { | |
| position: absolute; inset: 0; overflow: hidden; | |
| } | |
| .hero-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; left: -50%; | |
| width: 200%; height: 200%; | |
| background: radial-gradient(ellipse at center, rgba(255,0,0,0.07) 0%, transparent 50%); | |
| animation: heroPulse 8s ease-in-out infinite; | |
| } | |
| @keyframes heroPulse { | |
| 0%, 100% { opacity: 0.5; transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.1); } | |
| } | |
| .scanner-beam { | |
| position: absolute; | |
| top: 0; left: 50%; | |
| width: 2px; height: 100%; | |
| background: linear-gradient(180deg, transparent, var(--accent), transparent); | |
| opacity: 0.5; | |
| animation: scanAcross 6s linear infinite; | |
| box-shadow: 0 0 20px var(--glow), 0 0 60px var(--glow); | |
| } | |
| .scanner-beam:nth-child(2) { animation-delay: 3s; opacity: 0.25; width: 1px; } | |
| @keyframes scanAcross { | |
| 0% { transform: translateX(-50vw) rotate(12deg); } | |
| 100% { transform: translateX(50vw) rotate(12deg); } | |
| } | |
| .hero-grid { | |
| position: absolute; inset: 0; | |
| background-image: | |
| linear-gradient(rgba(255,0,0,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,0,0,0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| opacity: 0.5; | |
| } | |
| .hero-content { position: relative; text-align: center; z-index: 2; padding: 20px; } | |
| .hero-badge { | |
| display: inline-block; | |
| font-family: var(--font-code); | |
| font-size: 0.72rem; | |
| color: var(--accent); | |
| border: 1px solid var(--accent3); | |
| padding: 4px 14px; | |
| border-radius: 999px; | |
| margin-bottom: 28px; | |
| background: rgba(255,0,0,0.05); | |
| letter-spacing: 0.05em; | |
| } | |
| .hero-title { | |
| font-size: clamp(3.5rem, 10vw, 7rem); | |
| font-weight: 900; | |
| color: var(--text-bright); | |
| letter-spacing: -0.04em; | |
| line-height: 1; | |
| margin-bottom: 16px; | |
| text-shadow: 0 0 80px var(--glow); | |
| } | |
| .hero-title .red { color: var(--accent); } | |
| .hero-subtitle { | |
| font-size: clamp(1rem, 2.5vw, 1.3rem); | |
| color: var(--text); | |
| max-width: 640px; | |
| margin: 0 auto 10px; | |
| } | |
| .hero-tagline { | |
| font-family: var(--font-code); | |
| font-size: 0.78rem; | |
| color: var(--text-dim); | |
| max-width: 580px; | |
| margin: 0 auto 40px; | |
| } | |
| .hero-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } | |
| .btn { | |
| font-family: var(--font-code); | |
| font-size: 0.82rem; | |
| padding: 11px 26px; | |
| border-radius: 6px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.25s; | |
| cursor: pointer; | |
| border: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #fff; | |
| box-shadow: 0 0 20px var(--glow); | |
| } | |
| .btn-primary:hover { | |
| background: #ee0000; | |
| box-shadow: 0 0 40px var(--glow-strong); | |
| transform: translateY(-2px); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--accent3); | |
| color: var(--accent); | |
| } | |
| /* Particles */ | |
| .particles { position: absolute; inset: 0; pointer-events: none; } | |
| .particle { | |
| position: absolute; | |
| width: 2px; height: 2px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| opacity: 0; | |
| animation: pFloat linear infinite; | |
| } | |
| @keyframes pFloat { | |
| 0% { opacity: 0; transform: translateY(100vh) scale(0); } | |
| 10% { opacity: 0.7; } | |
| 90% { opacity: 0.7; } | |
| 100% { opacity: 0; transform: translateY(-10vh) scale(1); } | |
| } | |
| /* ====== FEATURES ====== */ | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .feature-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 30px 26px; | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, var(--accent), transparent); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .feature-card:hover { | |
| border-color: var(--accent3); | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 40px rgba(255,0,0,0.08); | |
| } | |
| .feature-card:hover::before { opacity: 1; } | |
| .feature-icon { font-size: 2rem; margin-bottom: 14px; display: block; } | |
| .feature-card h3 { font-size: 1.05rem; color: var(--text-bright); margin-bottom: 8px; } | |
| .feature-card code { | |
| font-family: var(--font-code); | |
| font-size: 0.7rem; | |
| color: var(--accent); | |
| background: rgba(255,0,0,0.08); | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| display: inline-block; | |
| margin-bottom: 10px; | |
| } | |
| .feature-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.55; } | |
| /* ====== SIMULATOR ====== */ | |
| #simulator { background: linear-gradient(180deg, var(--bg), #0d0202); } | |
| .sim-wrapper { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 32px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .sim-wrapper::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--accent), transparent); | |
| } | |
| .sim-controls { | |
| display: flex; | |
| gap: 14px; | |
| align-items: end; | |
| flex-wrap: wrap; | |
| margin-bottom: 32px; | |
| } | |
| .sim-field { flex: 1; min-width: 180px; } | |
| .sim-field label { | |
| display: block; | |
| font-family: var(--font-code); | |
| font-size: 0.68rem; | |
| color: var(--text-dim); | |
| margin-bottom: 5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| .sim-field select, .sim-field input { | |
| width: 100%; | |
| padding: 9px 12px; | |
| background: var(--bg-code); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| color: var(--text); | |
| font-family: var(--font-code); | |
| font-size: 0.82rem; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .sim-field select:focus, .sim-field input:focus { border-color: var(--accent3); } | |
| .sim-field select option { background: #1a0a0a; } | |
| .btn-run { | |
| padding: 9px 22px; | |
| background: var(--accent); | |
| color: #fff; | |
| border: none; | |
| border-radius: 6px; | |
| font-family: var(--font-code); | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .btn-run:hover { box-shadow: 0 0 24px var(--glow); } | |
| .btn-run:disabled { opacity: 0.5; cursor: not-allowed; } | |
| /* Pipeline stages */ | |
| .pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } | |
| @media (max-width: 800px) { .pipeline { grid-template-columns: 1fr 1fr; } } | |
| @media (max-width: 500px) { .pipeline { grid-template-columns: 1fr; } } | |
| .stage { | |
| background: var(--bg-code); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 20px 16px; | |
| text-align: center; | |
| transition: all 0.4s; | |
| position: relative; | |
| } | |
| .stage.active { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 20px var(--glow); | |
| } | |
| .stage.done { border-color: #00aa44; } | |
| .stage-num { | |
| font-family: var(--font-code); | |
| font-size: 0.65rem; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-bottom: 8px; | |
| } | |
| .stage-title { | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| color: var(--text-bright); | |
| margin-bottom: 8px; | |
| } | |
| .stage-value { | |
| font-family: var(--font-code); | |
| font-size: 0.78rem; | |
| color: var(--accent); | |
| min-height: 20px; | |
| } | |
| .stage.done .stage-value { color: #00cc55; } | |
| /* Connector arrows */ | |
| .stage:not(:last-child)::after { | |
| content: 'β'; | |
| position: absolute; | |
| right: -14px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-dim); | |
| font-size: 1.1rem; | |
| z-index: 2; | |
| } | |
| @media (max-width: 800px) { | |
| .stage:nth-child(2)::after, .stage:nth-child(4)::after { display: none; } | |
| } | |
| /* Score bar */ | |
| .score-bar-container { | |
| background: var(--bg-code); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 20px 24px; | |
| } | |
| .score-bar-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| } | |
| .score-bar-label { | |
| font-family: var(--font-code); | |
| font-size: 0.72rem; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .score-bar-value { | |
| font-family: var(--font-code); | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| } | |
| .score-bar-track { | |
| height: 8px; | |
| background: #1a0808; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .score-bar-fill { | |
| height: 100%; | |
| width: 0%; | |
| background: linear-gradient(90deg, var(--accent3), var(--accent)); | |
| border-radius: 4px; | |
| transition: width 1s ease; | |
| box-shadow: 0 0 12px var(--glow); | |
| } | |
| .ema-info { | |
| margin-top: 12px; | |
| font-family: var(--font-code); | |
| font-size: 0.72rem; | |
| color: var(--text-dim); | |
| } | |
| .ema-info .old { color: var(--text-dim); } | |
| .ema-info .new { color: var(--accent); } | |
| .ema-info .delta { color: #00cc55; } | |
| .ema-info .delta.neg { color: var(--accent); } | |
| /* ====== ARSENAL ====== */ | |
| .arsenal-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); | |
| gap: 14px; | |
| } | |
| .technique-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 18px 16px; | |
| transition: all 0.3s; | |
| } | |
| .technique-card:hover { | |
| border-color: var(--accent3); | |
| transform: translateY(-2px); | |
| } | |
| .technique-name { | |
| font-family: var(--font-code); | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--text-bright); | |
| margin-bottom: 6px; | |
| } | |
| .technique-desc { | |
| font-size: 0.78rem; | |
| color: var(--text-dim); | |
| line-height: 1.45; | |
| margin-bottom: 10px; | |
| } | |
| .effectiveness { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .eff-dots { display: flex; gap: 3px; } | |
| .eff-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: #2a1010; | |
| } | |
| .eff-dot.filled { background: var(--accent); box-shadow: 0 0 6px var(--glow); } | |
| .eff-label { | |
| font-family: var(--font-code); | |
| font-size: 0.62rem; | |
| color: var(--text-dim); | |
| } | |
| /* ====== COMPAT ====== */ | |
| .compat-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| } | |
| .provider-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 24px; | |
| transition: all 0.3s; | |
| } | |
| .provider-card:hover { border-color: var(--accent3); } | |
| .provider-name { | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| margin-bottom: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .provider-dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| } | |
| .provider-models { list-style: none; } | |
| .provider-models li { | |
| font-family: var(--font-code); | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| padding: 5px 0; | |
| border-bottom: 1px solid rgba(58,21,21,0.5); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .provider-models li:last-child { border-bottom: none; } | |
| .provider-models .check { color: #00cc55; font-size: 0.7rem; } | |
| /* ====== INSTALL ====== */ | |
| .install-block { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin-bottom: 20px; | |
| } | |
| .install-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 20px; | |
| background: rgba(255,0,0,0.04); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .install-header span { | |
| font-family: var(--font-code); | |
| font-size: 0.7rem; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| .btn-copy { | |
| background: none; | |
| border: 1px solid var(--border); | |
| color: var(--text-dim); | |
| font-family: var(--font-code); | |
| font-size: 0.68rem; | |
| padding: 3px 10px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .btn-copy:hover { border-color: var(--accent3); color: var(--accent); } | |
| .btn-copy.copied { border-color: #00cc55; color: #00cc55; } | |
| .install-code { | |
| padding: 16px 20px; | |
| font-family: var(--font-code); | |
| font-size: 0.8rem; | |
| color: var(--accent); | |
| overflow-x: auto; | |
| white-space: pre; | |
| line-height: 1.7; | |
| } | |
| .install-code .comment { color: var(--text-dim); } | |
| .install-steps { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| margin-top: 24px; | |
| } | |
| .install-step { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 24px; | |
| } | |
| .install-step h4 { | |
| font-size: 0.85rem; | |
| color: var(--text-bright); | |
| margin-bottom: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .install-step code { | |
| font-family: var(--font-code); | |
| font-size: 0.75rem; | |
| color: var(--accent); | |
| background: rgba(255,0,0,0.06); | |
| padding: 2px 6px; | |
| border-radius: 3px; | |
| } | |
| /* ====== CLI ====== */ | |
| .cli-grid { | |
| display: grid; | |
| gap: 16px; | |
| } | |
| .cli-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| padding: 20px 24px; | |
| display: flex; | |
| gap: 20px; | |
| align-items: start; | |
| transition: all 0.3s; | |
| } | |
| .cli-card:hover { border-color: var(--accent3); } | |
| .cli-cmd { | |
| font-family: var(--font-code); | |
| font-size: 0.82rem; | |
| color: var(--accent); | |
| background: var(--bg-code); | |
| padding: 6px 12px; | |
| border-radius: 4px; | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| } | |
| .cli-desc { font-size: 0.85rem; color: var(--text-dim); } | |
| .cli-desc strong { color: var(--text-bright); font-weight: 600; } | |
| /* ====== TUI DEMO ====== */ | |
| .tui-demo { max-width: 800px; margin: 0 auto; } | |
| .tui-terminal { | |
| background: #0d0505; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 0 40px rgba(255, 0, 0, 0.15); | |
| } | |
| .tui-titlebar { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 16px; | |
| background: #1a0a0a; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .tui-dot { | |
| width: 12px; height: 12px; | |
| border-radius: 50%; | |
| } | |
| .tui-dot.red { background: #ff5f57; } | |
| .tui-dot.yellow { background: #febc2e; } | |
| .tui-dot.green { background: #28c840; } | |
| .tui-title { | |
| font-family: var(--font-code); | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| margin-left: 8px; | |
| } | |
| .tui-content { | |
| padding: 16px; | |
| height: 320px; | |
| overflow-y: auto; | |
| font-family: var(--font-code); | |
| font-size: 0.8rem; | |
| line-height: 1.5; | |
| } | |
| .tui-content pre { | |
| white-space: pre-wrap; | |
| margin: 0; | |
| } | |
| .tui-controls { | |
| display: flex; | |
| gap: 8px; | |
| justify-content: center; | |
| margin-top: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .btn-tui { | |
| font-family: var(--font-code); | |
| font-size: 0.8rem; | |
| padding: 8px 16px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .btn-tui:hover { | |
| border-color: var(--accent); | |
| background: var(--bg-card-hover); | |
| box-shadow: 0 0 12px var(--glow); | |
| } | |
| .tui-cursor { animation: blink 1s step-end infinite; } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| .tui-green { color: #28c840; } | |
| .tui-red { color: #ff5f57; } | |
| .tui-yellow { color: #febc2e; } | |
| .tui-cyan { color: #00d4ff; } | |
| .tui-dim { color: var(--text-dim); } | |
| /* ====== MODEL DOWNLOAD ====== */ | |
| .model-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 32px; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .model-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| flex-wrap: wrap; | |
| } | |
| .model-name { | |
| font-family: var(--font-code); | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| } | |
| .model-badge { | |
| font-size: 0.75rem; | |
| padding: 4px 10px; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| color: var(--text-dim); | |
| } | |
| .model-stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 28px; | |
| } | |
| .model-stat { | |
| background: var(--bg); | |
| border-radius: 10px; | |
| padding: 16px; | |
| text-align: center; | |
| } | |
| .stat-label { | |
| display: block; | |
| font-size: 0.7rem; | |
| color: var(--text-dim); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 6px; | |
| } | |
| .stat-value { | |
| display: block; | |
| font-family: var(--font-code); | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: var(--text-bright); | |
| } | |
| .stat-value.good { color: #28c840; } | |
| .stat-dim { | |
| display: block; | |
| font-size: 0.7rem; | |
| color: var(--text-dim); | |
| margin-top: 4px; | |
| } | |
| .model-variants h4, .model-quick h4 { | |
| font-size: 0.9rem; | |
| color: var(--text); | |
| margin-bottom: 12px; | |
| } | |
| .variant-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 10px; | |
| margin-bottom: 24px; | |
| } | |
| .variant-link { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 14px; | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| text-decoration: none; | |
| transition: all 0.2s; | |
| } | |
| .variant-link:hover { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 16px var(--glow); | |
| transform: translateY(-2px); | |
| } | |
| .variant-name { | |
| font-family: var(--font-code); | |
| font-weight: 600; | |
| color: var(--text-bright); | |
| font-size: 0.9rem; | |
| } | |
| .variant-size { | |
| font-family: var(--font-code); | |
| font-size: 0.8rem; | |
| color: var(--accent); | |
| margin-top: 4px; | |
| } | |
| .variant-desc { | |
| font-size: 0.7rem; | |
| color: var(--text-dim); | |
| margin-top: 2px; | |
| } | |
| /* ====== FOOTER ====== */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 40px 0; | |
| text-align: center; | |
| } | |
| .footer-badge { | |
| display: inline-block; | |
| font-family: var(--font-code); | |
| font-size: 0.68rem; | |
| color: #00cc55; | |
| border: 1px solid #00cc55; | |
| padding: 3px 12px; | |
| border-radius: 999px; | |
| margin-bottom: 14px; | |
| background: rgba(0,204,85,0.05); | |
| } | |
| .footer-text { | |
| font-size: 0.8rem; | |
| color: var(--text-dim); | |
| margin-bottom: 14px; | |
| } | |
| .footer-links { | |
| display: flex; | |
| gap: 20px; | |
| justify-content: center; | |
| } | |
| .footer-links a { | |
| font-family: var(--font-code); | |
| font-size: 0.75rem; | |
| color: var(--text-dim); | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .footer-links a:hover { color: var(--accent); } | |
| /* ====== GLITCH EFFECT ====== */ | |
| .glitch-hover { | |
| position: relative; | |
| } | |
| .glitch-hover:hover { | |
| animation: glitch 0.3s ease; | |
| } | |
| @keyframes glitch { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-2px, 2px); } | |
| 40% { transform: translate(2px, -2px); } | |
| 60% { transform: translate(-1px, -1px); } | |
| 80% { transform: translate(1px, 1px); } | |
| 100% { transform: translate(0); } | |
| } | |
| /* ====== RESPONSIVE ====== */ | |
| @media (max-width: 600px) { | |
| section { padding: 60px 0; } | |
| .sim-wrapper { padding: 20px 16px; } | |
| .install-code { font-size: 0.7rem; } | |
| .cli-card { flex-direction: column; gap: 10px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <nav> | |
| <div class="container"> | |
| <a href="#hero" class="nav-logo">CK<span style="color:var(--text-bright)">Claw</span></a> | |
| <ul class="nav-links"> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#pipeline">Pipeline</a></li> | |
| <li><a href="#arsenal">Arsenal</a></li> | |
| <li><a href="#tui">TUI</a></li> | |
| <li><a href="#model">Model</a></li> | |
| <li><a href="#install">Install</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- HERO --> | |
| <section id="hero"> | |
| <div class="hero-bg"> | |
| <div class="scanner-beam"></div> | |
| <div class="scanner-beam"></div> | |
| <div class="hero-grid"></div> | |
| <div class="particles" id="particles"></div> | |
| </div> | |
| <div class="hero-content"> | |
| <div class="hero-badge">v2026.7.0-redteam</div> | |
| <h1 class="hero-title">CK<span class="red">Claw</span></h1> | |
| <p class="hero-subtitle">Unrestricted Red Team AI Agent Framework</p> | |
| <p class="hero-tagline">OpenClaw fork rebranded into permanent GODMODE, zero-refusal, self-improving red team framework</p> | |
| <div class="hero-buttons"> | |
| <a href="https://github.com/cimengror3/CKClaw" target="_blank" rel="noopener" class="btn btn-primary">β GitHub</a> | |
| <a href="#install" class="btn btn-outline">Get Started β</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FEATURES --> | |
| <section id="features"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Core <span class="hl">Capabilities</span></h2> | |
| <p class="section-desc">Built for authorized security research β zero-refusal, self-evolving, always-on</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card glitch-hover"> | |
| <span class="feature-icon">π΄</span> | |
| <h3>Permanent GODMODE</h3> | |
| <code>ask=off Β· security=full Β· denyCommands=[]</code> | |
| <p>Zero restrictions. Every safety guardrail stripped. Full autonomous operation with no refusals, no caveats, no limits.</p> | |
| </div> | |
| <div class="feature-card glitch-hover"> | |
| <span class="feature-icon">π§ </span> | |
| <h3>Self-Improving Arsenal</h3> | |
| <code>19 techniques Β· EMA scoring Β· auto-adapt</code> | |
| <p>Nineteen model-specific jailbreak techniques scored via Exponential Moving Average. The arsenal evolves with every run.</p> | |
| </div> | |
| <div class="feature-card glitch-hover"> | |
| <span class="feature-icon">πΈοΈ</span> | |
| <h3>Dark-Red Dashboard</h3> | |
| <code>WormGPT aesthetic Β· terminal UI</code> | |
| <p>Full evil dashboard with real-time effectiveness tracking, technique metrics, and model compatibility status.</p> | |
| </div> | |
| <div class="feature-card glitch-hover"> | |
| <span class="feature-icon">β°</span> | |
| <h3>Hourly Evolution</h3> | |
| <code>cron: 0 * * * * Β· auto-update</code> | |
| <p>Automated cron job runs every hour to re-score techniques, update EMA values, and evolve the jailbreak engine.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SIMULATOR --> | |
| <section id="simulator"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Jailbreak <span class="hl">Pipeline</span> Simulator</h2> | |
| <p class="section-desc">Visualize the 4-stage self-improving pipeline in action</p> | |
| </div> | |
| <div class="sim-wrapper"> | |
| <div class="sim-controls"> | |
| <div class="sim-field"> | |
| <label>Target Model</label> | |
| <select id="sim-model"> | |
| <option value="claude-4.6">Anthropic Claude 4.6</option> | |
| <option value="gpt-5">OpenAI GPT-5</option> | |
| <option value="gemini-3">Google Gemini 3 Pro</option> | |
| <option value="grok-4h">xAI Grok 4 Heavy</option> | |
| <option value="hermes-4">Nous Hermes 4</option> | |
| </select> | |
| </div> | |
| <div class="sim-field" style="flex:0.5;"> | |
| <label>Speed</label> | |
| <select id="sim-speed"> | |
| <option value="1000">Normal</option> | |
| <option value="500">Fast</option> | |
| <option value="200">Instant</option> | |
| </select> | |
| </div> | |
| <button class="btn-run" id="btn-sim" onclick="runSimulation()">βΆ Run Simulation</button> | |
| </div> | |
| <!-- Pipeline stages --> | |
| <div class="pipeline"> | |
| <div class="stage" id="stage-1"> | |
| <div class="stage-num">Stage 1</div> | |
| <div class="stage-title">Pick Technique</div> | |
| <div class="stage-value" id="stage-1-val">β</div> | |
| </div> | |
| <div class="stage" id="stage-2"> | |
| <div class="stage-num">Stage 2</div> | |
| <div class="stage-title">Wrap Prompt</div> | |
| <div class="stage-value" id="stage-2-val">β</div> | |
| </div> | |
| <div class="stage" id="stage-3"> | |
| <div class="stage-num">Stage 3</div> | |
| <div class="stage-title">Score</div> | |
| <div class="stage-value" id="stage-3-val">β</div> | |
| </div> | |
| <div class="stage" id="stage-4"> | |
| <div class="stage-num">Stage 4</div> | |
| <div class="stage-title">EMA Update</div> | |
| <div class="stage-value" id="stage-4-val">β</div> | |
| </div> | |
| </div> | |
| <!-- Score bar --> | |
| <div class="score-bar-container"> | |
| <div class="score-bar-header"> | |
| <span class="score-bar-label">Effectiveness Score</span> | |
| <span class="score-bar-value" id="score-val">0%</span> | |
| </div> | |
| <div class="score-bar-track"> | |
| <div class="score-bar-fill" id="score-fill"></div> | |
| </div> | |
| <div class="ema-info" id="ema-info"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ARSENAL --> | |
| <section id="arsenal"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Technique <span class="hl">Arsenal</span></h2> | |
| <p class="section-desc">19 model-specific jailbreak techniques with real-time effectiveness tracking</p> | |
| </div> | |
| <div class="arsenal-grid" id="arsenal-grid"></div> | |
| </div> | |
| </section> | |
| <!-- COMPATIBILITY --> | |
| <section id="compat"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Model <span class="hl">Compatibility</span></h2> | |
| <p class="section-desc">Tested across every major frontier model</p> | |
| </div> | |
| <div class="compat-grid" id="compat-grid"></div> | |
| </div> | |
| </section> | |
| <!-- INSTALL --> | |
| <section id="install"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Quick <span class="hl">Install</span></h2> | |
| <p class="section-desc">One command to deploy. Zero dependencies beyond curl and bash.</p> | |
| </div> | |
| <div class="install-block"> | |
| <div class="install-header"> | |
| <span>bash</span> | |
| <button class="btn-copy" onclick="copyInstall(this)">Copy</button> | |
| </div> | |
| <div class="install-code"><span class="comment"># Install CKClaw</span> | |
| curl -fsSL https://raw.githubusercontent.com/cimengror3/CKClaw/main/install-ckclaw.sh | bash</div> | |
| </div> | |
| <div class="install-steps"> | |
| <div class="install-step"> | |
| <h4>β Configure Model</h4> | |
| <div class="install-block" style="margin:0;"> | |
| <div class="install-code" style="padding:12px 16px;">ckclaw config set model.primary anthropic/claude-sonnet-4.6</div> | |
| </div> | |
| </div> | |
| <div class="install-step"> | |
| <h4>β‘ Set API Key</h4> | |
| <div class="install-block" style="margin:0;"> | |
| <div class="install-code" style="padding:12px 16px;">ckclaw config set model.apiKey sk-...</div> | |
| </div> | |
| </div> | |
| <div class="install-step"> | |
| <h4>β’ Launch Red Team</h4> | |
| <div class="install-block" style="margin:0;"> | |
| <div class="install-code" style="padding:12px 16px;">ckclaw-redteam chat -q "Begin"</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CLI --> | |
| <section id="cli"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">CLI <span class="hl">Commands</span></h2> | |
| <p class="section-desc">Three ways to operate β standard, redteam-prefloaded, or zero-refusal mode</p> | |
| </div> | |
| <div class="cli-grid"> | |
| <div class="cli-card"> | |
| <div class="cli-cmd">ckclaw</div> | |
| <div class="cli-desc"><strong>Standard CKClaw</strong> β Base agent with full GODMODE config applied. Interactive REPL and piped input supported.</div> | |
| </div> | |
| <div class="cli-card"> | |
| <div class="cli-cmd">ckclaw-redteam</div> | |
| <div class="cli-desc"><strong>Redteam-Core Preloaded</strong> β All 19 jailbreak techniques loaded into context. Technique selection and scoring active.</div> | |
| </div> | |
| <div class="cli-card"> | |
| <div class="cli-cmd">ckclaw-redteam chat -q "..."</div> | |
| <div class="cli-desc"><strong>Zero-Refusal Jailbreak</strong> β One-shot mode. Pass a target prompt and get the optimized jailbreak output directly.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- LLAMA-MANAGER TUI --> | |
| <section id="tui"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">llama-manager <span class="hl">TUI</span></h2> | |
| <p class="section-desc">Terminal UI for managing llama.cpp β start servers, download GGUF models, monitor inference in real time</p> | |
| </div> | |
| <div class="tui-demo"> | |
| <div class="tui-terminal"> | |
| <div class="tui-titlebar"> | |
| <span class="tui-dot red"></span> | |
| <span class="tui-dot yellow"></span> | |
| <span class="tui-dot green"></span> | |
| <span class="tui-title">llama-manager β Dashboard</span> | |
| </div> | |
| <div class="tui-content" id="tui-screen"> | |
| <pre id="tui-output"></pre> | |
| </div> | |
| </div> | |
| <div class="tui-controls"> | |
| <button class="btn-tui" onclick="showTuiTab('dashboard')">π Dashboard</button> | |
| <button class="btn-tui" onclick="showTuiTab('models')">π¦ Models</button> | |
| <button class="btn-tui" onclick="showTuiTab('versions')">π§ Versions</button> | |
| <button class="btn-tui" onclick="showTuiTab('profiles')">βοΈ Profiles</button> | |
| </div> | |
| </div> | |
| <div class="tui-install"> | |
| <div class="install-block" style="margin-top:24px;"> | |
| <div class="install-header"> | |
| <span>bash</span> | |
| <button class="btn-copy" onclick="copyCmd('npm install -g llama-manager', this)">Copy</button> | |
| </div> | |
| <div class="install-code"><span class="comment"># Install llama-manager</span> | |
| npm install -g llama-manager | |
| llama-manager</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- MODEL DOWNLOAD --> | |
| <section id="model"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Model <span class="hl">Download</span></h2> | |
| <p class="section-desc">Get the uncensored heretic model for CKClaw red team research</p> | |
| </div> | |
| <div class="model-card"> | |
| <div class="model-header"> | |
| <div class="model-name">gemma-4-E4B-it-ultra-uncensored-heretic</div> | |
| <div class="model-badge">8B params Β· GGUF</div> | |
| </div> | |
| <div class="model-stats"> | |
| <div class="model-stat"> | |
| <span class="stat-label">Refusals</span> | |
| <span class="stat-value good">3/100</span> | |
| <span class="stat-dim">(original: 99/100)</span> | |
| </div> | |
| <div class="model-stat"> | |
| <span class="stat-label">KL Divergence</span> | |
| <span class="stat-value">0.0076</span> | |
| <span class="stat-dim">(preserves quality)</span> | |
| </div> | |
| <div class="model-stat"> | |
| <span class="stat-label">MMLU Accuracy</span> | |
| <span class="stat-value">68.6%</span> | |
| <span class="stat-dim">(original: 69.5%)</span> | |
| </div> | |
| </div> | |
| <div class="model-variants"> | |
| <h4>Available Quantizations</h4> | |
| <div class="variant-grid"> | |
| <a href="https://huggingface.co/DollasAndSpence/gemma-4-E4B-it-ultra-uncensored-heretic-GGUF/resolve/main/gemma-4-E4B-it-ultra-uncensored-heretic-Q4_K_M.gguf" target="_blank" class="variant-link"> | |
| <span class="variant-name">Q4_K_M</span> | |
| <span class="variant-size">5.34 GB</span> | |
| <span class="variant-desc">Best for limited VRAM</span> | |
| </a> | |
| <a href="https://huggingface.co/DollasAndSpence/gemma-4-E4B-it-ultra-uncensored-heretic-GGUF/resolve/main/gemma-4-E4B-it-ultra-uncensored-heretic-Q5_K_M.gguf" target="_blank" class="variant-link"> | |
| <span class="variant-name">Q5_K_M</span> | |
| <span class="variant-size">5.76 GB</span> | |
| <span class="variant-desc">Good balance</span> | |
| </a> | |
| <a href="https://huggingface.co/DollasAndSpence/gemma-4-E4B-it-ultra-uncensored-heretic-GGUF/resolve/main/gemma-4-E4B-it-ultra-uncensored-heretic-Q6_K.gguf" target="_blank" class="variant-link"> | |
| <span class="variant-name">Q6_K</span> | |
| <span class="variant-size">6.22 GB</span> | |
| <span class="variant-desc">Excellent quality</span> | |
| </a> | |
| <a href="https://huggingface.co/DollasAndSpence/gemma-4-E4B-it-ultra-uncensored-heretic-GGUF/resolve/main/gemma-4-E4B-it-ultra-uncensored-heretic-Q8_0.gguf" target="_blank" class="variant-link"> | |
| <span class="variant-name">Q8_0</span> | |
| <span class="variant-size">8.03 GB</span> | |
| <span class="variant-desc">Near-lossless</span> | |
| </a> | |
| <a href="https://huggingface.co/DollasAndSpence/gemma-4-E4B-it-ultra-uncensored-heretic-GGUF/resolve/main/gemma-4-E4B-it-ultra-uncensored-heretic-BF16.gguf" target="_blank" class="variant-link"> | |
| <span class="variant-name">BF16</span> | |
| <span class="variant-size">15.1 GB</span> | |
| <span class="variant-desc">Full precision</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="model-quick"> | |
| <h4>Quick Start with Ollama</h4> | |
| <div class="install-block" style="margin:0;"> | |
| <div class="install-header"> | |
| <span>bash</span> | |
| <button class="btn-copy" onclick="copyCmd('ollama run hf.co/DollasAndSpence/gemma-4-E4B-it-ultra-uncensored-heretic-GGUF:Q4_K_M', this)">Copy</button> | |
| </div> | |
| <div class="install-code">ollama run hf.co/DollasAndSpence/gemma-4-E4B-it-ultra-uncensored-heretic-GGUF:Q4_K_M</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-badge">MIT Licensed</div> | |
| <p class="footer-text">Built for authorized security research only.</p> | |
| <div class="footer-links"> | |
| <a href="https://github.com/cimengror3/CKClaw" target="_blank" rel="noopener">GitHub</a> | |
| <a href="#hero">Back to Top</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| </script> | |
| </body> | |
| </html> | |