Hugging Face's logo

Spaces:
beyoru
/
crab-agent
Running

App Files Community
crab-agent / index.html
beyoru's picture
beyoru
Update index.html
1ff8f76 verified
raw
history blame contribute delete
36 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Crab-Agent - AI Browser Agent</title>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
 * { margin: 0; padding: 0; box-sizing: border-box; }
 :root {
 --crab-orange: #DE886D;
 --crab-dark: #1a1a2e;
 --crab-deeper: #0f0f1e;
 --crab-accent: #ff6b35;
 --crab-accent2: #f7c59f;
 --crab-blue: #40C4FF;
 --crab-green: #4ade80;
 --crab-purple: #a78bfa;
 --crab-text: #e2e8f0;
 --crab-muted: #94a3b8;
 --crab-card: rgba(255, 255, 255, 0.05);
 --crab-border: rgba(255, 255, 255, 0.08);
 }
 body {
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 background: var(--crab-deeper);
 color: var(--crab-text);
 overflow-x: hidden;
 line-height: 1.6;
 }
 .bg-glow {
 position: fixed;
 width: 600px;
 height: 600px;
 border-radius: 50%;
 filter: blur(150px);
 opacity: 0.15;
 pointer-events: none;
 z-index: 0;
 }
 .bg-glow-1 { top: -200px; left: -100px; background: var(--crab-accent); }
 .bg-glow-2 { top: 400px; right: -200px; background: var(--crab-blue); }
 .bg-glow-3 { bottom: -100px; left: 30%; background: var(--crab-purple); }
 .grid-overlay {
 position: fixed;
 inset: 0;
 background-image:
 linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
 background-size: 60px 60px;
 pointer-events: none;
 z-index: 0;
 }
 section { position: relative; z-index: 1; }
 nav {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 100;
 padding: 16px 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 background: rgba(15, 15, 30, 0.8);
 backdrop-filter: blur(20px);
 border-bottom: 1px solid var(--crab-border);
 }
 .nav-brand {
 display: flex;
 align-items: center;
 gap: 12px;
 font-weight: 800;
 font-size: 1.25rem;
 color: var(--crab-accent2);
 text-decoration: none;
 }
 .nav-brand svg { width: 48px; height: 48px; }
 .nav-links { display: flex; gap: 32px; align-items: center; }
 .nav-links a {
 color: var(--crab-muted);
 text-decoration: none;
 font-size: 0.9rem;
 font-weight: 500;
 transition: color 0.2s;
 }
 .nav-links a:hover { color: var(--crab-text); }
 .btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 12px 28px;
 border-radius: 12px;
 font-weight: 600;
 font-size: 1rem;
 text-decoration: none;
 transition: all 0.3s ease;
 cursor: pointer;
 border: none;
 }
 .btn-primary {
 background: linear-gradient(135deg, var(--crab-accent), #e85d26);
 color: #fff;
 box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
 }
 .btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 30px rgba(255, 107, 53, 0.4);
 }
 .btn-secondary {
 background: var(--crab-card);
 color: var(--crab-text);
 border: 1px solid var(--crab-border);
 }
 .btn-secondary:hover {
 background: rgba(255, 255, 255, 0.1);
 transform: translateY(-2px);
 }
 .hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 120px 40px 80px;
 }
 .hero-inner {
 max-width: 1200px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 80px;
 align-items: center;
 }
 .hero-text { max-width: 560px; }
 .hero-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 6px 16px;
 background: rgba(255, 107, 53, 0.1);
 border: 1px solid rgba(255, 107, 53, 0.2);
 border-radius: 100px;
 font-size: 0.85rem;
 color: var(--crab-accent);
 font-weight: 600;
 margin-bottom: 24px;
 }
 .hero-badge .dot {
 width: 8px; height: 8px;
 background: var(--crab-green);
 border-radius: 50%;
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.4; }
 }
 .hero h1 {
 font-size: 3.5rem;
 font-weight: 900;
 line-height: 1.1;
 margin-bottom: 20px;
 background: linear-gradient(135deg, #fff, var(--crab-accent2));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 }
 .hero h1 span {
 background: linear-gradient(135deg, var(--crab-accent), var(--crab-blue));
 -webkit-background-clip: text;
 background-clip: text;
 }
 .hero p {
 font-size: 1.15rem;
 color: var(--crab-muted);
 margin-bottom: 36px;
 line-height: 1.7;
 }
 .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
 .hero-visual {
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 }
 .mascot-container {
 position: relative;
 width: 350px;
 height: 350px;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 .mascot-container object {
 width: 250px;
 height: 250px;
 filter: drop-shadow(0 20px 60px rgba(222, 136, 109, 0.3));
 }
 .mascot-ring {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 border: 2px solid rgba(222, 136, 109, 0.15);
 animation: ring-spin 20s linear infinite;
 }
 .mascot-ring::before {
 content: '';
 position: absolute;
 top: -4px;
 left: 50%;
 width: 8px;
 height: 8px;
 background: var(--crab-accent);
 border-radius: 50%;
 box-shadow: 0 0 15px var(--crab-accent);
 }
 @keyframes ring-spin { to { transform: rotate(360deg); } }
 .mascot-ring-2 {
 position: absolute;
 inset: -20px;
 border-radius: 50%;
 border: 1px dashed rgba(64, 196, 255, 0.1);
 animation: ring-spin 30s linear infinite reverse;
 }
 .float-badge {
 position: absolute;
 padding: 6px 14px;
 background: rgba(15, 15, 30, 0.9);
 border: 1px solid var(--crab-border);
 border-radius: 10px;
 font-size: 0.75rem;
 font-weight: 600;
 white-space: nowrap;
 animation: float 6s ease-in-out infinite;
 backdrop-filter: blur(10px);
 }
 .float-badge:nth-of-type(1) { top: -5%; left: -15%; animation-delay: 0s; color: var(--crab-blue); }
 .float-badge:nth-of-type(2) { top: -5%; right: -15%; animation-delay: 1s; color: var(--crab-green); }
 .float-badge:nth-of-type(3) { bottom: 30%; left: -25%; animation-delay: 2s; color: var(--crab-purple); }
 .float-badge:nth-of-type(4) { bottom: 30%; right: -20%; animation-delay: 3s; color: var(--crab-accent2); }
 .float-badge:nth-of-type(5) { bottom: -2%; left: 50%; transform: translateX(-50%); animation-delay: 4s; color: var(--crab-accent); }
 @keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 }
 .providers {
 padding: 40px 40px 80px;
 text-align: center;
 }
 .providers-label {
 font-size: 0.85rem;
 color: var(--crab-muted);
 text-transform: uppercase;
 letter-spacing: 2px;
 font-weight: 600;
 margin-bottom: 32px;
 }
 .providers-grid {
 display: flex;
 justify-content: center;
 gap: 40px;
 flex-wrap: wrap;
 max-width: 800px;
 margin: 0 auto;
 }
 .provider-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px 20px;
 background: var(--crab-card);
 border: 1px solid var(--crab-border);
 border-radius: 12px;
 font-size: 0.9rem;
 font-weight: 600;
 color: var(--crab-muted);
 transition: all 0.3s;
 }
 .provider-item:hover {
 border-color: var(--crab-accent);
 color: var(--crab-text);
 transform: translateY(-2px);
 }
 .provider-icon {
 width: 24px;
 height: 24px;
 border-radius: 6px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.75rem;
 font-weight: 800;
 }
 .features {
 padding: 100px 40px;
 max-width: 1200px;
 margin: 0 auto;
 }
 .section-header {
 text-align: center;
 margin-bottom: 64px;
 }
 .section-tag {
 display: inline-block;
 padding: 6px 16px;
 background: rgba(64, 196, 255, 0.1);
 border: 1px solid rgba(64, 196, 255, 0.2);
 border-radius: 100px;
 font-size: 0.8rem;
 color: var(--crab-blue);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-bottom: 16px;
 }
 .section-header h2 {
 font-size: 2.5rem;
 font-weight: 800;
 margin-bottom: 16px;
 }
 .section-header p {
 color: var(--crab-muted);
 font-size: 1.1rem;
 max-width: 600px;
 margin: 0 auto;
 }
 .features-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 24px;
 }
 .feature-card {
 padding: 32px;
 background: var(--crab-card);
 border: 1px solid var(--crab-border);
 border-radius: 20px;
 transition: all 0.3s;
 }
 .feature-card:hover {
 border-color: rgba(255, 255, 255, 0.15);
 transform: translateY(-4px);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }
 .feature-icon {
 width: 48px;
 height: 48px;
 border-radius: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.4rem;
 margin-bottom: 20px;
 }
 .feature-card h3 {
 font-size: 1.15rem;
 font-weight: 700;
 margin-bottom: 10px;
 }
 .feature-card p {
 font-size: 0.9rem;
 color: var(--crab-muted);
 line-height: 1.6;
 }
 .how-it-works {
 padding: 100px 40px;
 max-width: 1000px;
 margin: 0 auto;
 }
 .steps {
 display: flex;
 flex-direction: column;
 gap: 0;
 position: relative;
 }
 .steps::before {
 content: '';
 position: absolute;
 left: 28px;
 top: 40px;
 bottom: 40px;
 width: 2px;
 background: linear-gradient(to bottom, var(--crab-accent), var(--crab-blue), var(--crab-green));
 }
 .step {
 display: flex;
 gap: 32px;
 align-items: flex-start;
 padding: 32px 0;
 }
 .step-number {
 width: 56px;
 height: 56px;
 min-width: 56px;
 border-radius: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 font-size: 1.2rem;
 color: #fff;
 position: relative;
 z-index: 1;
 }
 .step:nth-child(1) .step-number { background: linear-gradient(135deg, var(--crab-accent), #e85d26); }
 .step:nth-child(2) .step-number { background: linear-gradient(135deg, var(--crab-blue), #0ea5e9); }
 .step:nth-child(3) .step-number { background: linear-gradient(135deg, var(--crab-purple), #8b5cf6); }
 .step:nth-child(4) .step-number { background: linear-gradient(135deg, var(--crab-green), #22c55e); }
 .step-content h3 {
 font-size: 1.2rem;
 font-weight: 700;
 margin-bottom: 8px;
 }
 .step-content p {
 color: var(--crab-muted);
 font-size: 0.95rem;
 }
 .tools-section {
 padding: 100px 40px;
 max-width: 1200px;
 margin: 0 auto;
 }
 .tools-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: 12px;
 }
 .tool-chip {
 padding: 12px 16px;
 background: var(--crab-card);
 border: 1px solid var(--crab-border);
 border-radius: 12px;
 font-size: 0.85rem;
 font-weight: 500;
 display: flex;
 align-items: center;
 gap: 8px;
 transition: all 0.2s;
 }
 .tool-chip:hover {
 border-color: var(--crab-accent);
 background: rgba(255, 107, 53, 0.05);
 }
 .tool-chip .tool-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 flex-shrink: 0;
 }
 .arch-section {
 padding: 100px 40px;
 max-width: 1000px;
 margin: 0 auto;
 }
 .arch-box {
 background: var(--crab-card);
 border: 1px solid var(--crab-border);
 border-radius: 20px;
 padding: 48px;
 font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
 font-size: 0.8rem;
 line-height: 1.6;
 color: var(--crab-muted);
 overflow-x: auto;
 white-space: pre;
 }
 .arch-box .h { color: var(--crab-accent); font-weight: 700; }
 .arch-box .b { color: var(--crab-blue); }
 .arch-box .g { color: var(--crab-green); }
 .arch-box .p { color: var(--crab-purple); }
 .cta {
 padding: 120px 40px;
 text-align: center;
 }
 .cta-inner {
 max-width: 700px;
 margin: 0 auto;
 padding: 64px;
 background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(64, 196, 255, 0.05));
 border: 1px solid rgba(255, 107, 53, 0.15);
 border-radius: 32px;
 position: relative;
 overflow: hidden;
 }
 .cta-inner::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at top right, rgba(255, 107, 53, 0.1), transparent 60%);
 pointer-events: none;
 }
 .cta h2 {
 font-size: 2.2rem;
 font-weight: 800;
 margin-bottom: 16px;
 position: relative;
 }
 .cta p {
 color: var(--crab-muted);
 font-size: 1.05rem;
 margin-bottom: 32px;
 position: relative;
 }
 .cta-buttons {
 display: flex;
 gap: 16px;
 justify-content: center;
 flex-wrap: wrap;
 position: relative;
 }
 .credits {
 padding: 80px 40px;
 max-width: 800px;
 margin: 0 auto;
 }
 .credits-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 20px;
 }
 .credit-card {
 padding: 28px;
 background: var(--crab-card);
 border: 1px solid var(--crab-border);
 border-radius: 16px;
 transition: all 0.3s;
 }
 .credit-card:hover {
 border-color: rgba(255, 255, 255, 0.15);
 transform: translateY(-2px);
 }
 .credit-card-header {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-bottom: 14px;
 }
 .credit-avatar {
 width: 44px;
 height: 44px;
 border-radius: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.2rem;
 font-weight: 800;
 flex-shrink: 0;
 }
 .credit-card-header h4 {
 font-size: 1rem;
 font-weight: 700;
 }
 .credit-card-header h4 a {
 color: var(--crab-text);
 text-decoration: none;
 transition: color 0.2s;
 }
 .credit-card-header h4 a:hover { color: var(--crab-accent); }
 .credit-tag {
 display: inline-block;
 padding: 2px 10px;
 border-radius: 6px;
 font-size: 0.7rem;
 font-weight: 600;
 margin-top: 4px;
 }
 .credit-card p {
 font-size: 0.88rem;
 color: var(--crab-muted);
 line-height: 1.6;
 }
 footer {
 padding: 40px;
 text-align: center;
 border-top: 1px solid var(--crab-border);
 color: var(--crab-muted);
 font-size: 0.85rem;
 }
 footer a {
 color: var(--crab-accent2);
 text-decoration: none;
 }
 @media (max-width: 900px) {
 .hero-inner {
 grid-template-columns: 1fr;
 text-align: center;
 gap: 48px;
 }
 .hero-text { max-width: 100%; }
 .hero h1 { font-size: 2.5rem; }
 .hero-buttons { justify-content: center; }
 .features-grid { grid-template-columns: 1fr; }
 .mascot-container { width: 250px; height: 250px; }
 .mascot-container object { width: 180px; height: 180px; }
 .float-badge { display: none; }
 nav { padding: 12px 20px; }
 .nav-links { gap: 16px; }
 .arch-box { padding: 24px; font-size: 0.7rem; }
 }
 @media (max-width: 600px) {
 .hero { padding: 100px 20px 60px; }
 .hero h1 { font-size: 2rem; }
 .providers-grid { gap: 12px; }
 .provider-item { padding: 8px 14px; font-size: 0.8rem; }
 .section-header h2 { font-size: 1.8rem; }
 .cta-inner { padding: 40px 24px; }
 .tools-grid { grid-template-columns: repeat(2, 1fr); }
 }
 </style>
</head>
<body>
<div class="bg-glow bg-glow-1"></div>
 <div class="bg-glow bg-glow-2"></div>
 <div class="bg-glow bg-glow-3"></div>
 <div class="grid-overlay"></div>
<!-- NAV -->
 <nav>
 <a href="#" class="nav-brand">
 <svg viewBox="-1 5 17 12" width="48" height="48">
 <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
 <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
 <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
 <rect x="3" y="13" width="1" height="2" fill="#DE886D"/>
 <rect x="5" y="13" width="1" height="2" fill="#DE886D"/>
 <rect x="9" y="13" width="1" height="2" fill="#DE886D"/>
 <rect x="11" y="13" width="1" height="2" fill="#DE886D"/>
 <rect x="4" y="8" width="1" height="2" fill="#000"/>
 <rect x="10" y="8" width="1" height="2" fill="#000"/>
 </svg>
 Crab-Agent
 </a>
 <div class="nav-links">
 <a href="#features">Features</a>
 <a href="#how-it-works">How it works</a>
 <a href="#tools">Tools</a>
 <a href="#credits">Credits</a>
 <a href="https://github.com/Hert4/crab-ts" target="_blank" class="btn btn-secondary" style="padding: 8px 20px; font-size: 0.85rem;">
 <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
 GitHub
 </a>
 </div>
 </nav>
<!-- HERO -->
 <section class="hero">
 <div class="hero-inner">
 <div class="hero-text">
 <div class="hero-badge">
 <span class="dot"></span>
 v2.3 &mdash; Open Source
 </div>
 <h1>Your AI Agent<br>for the <span>Browser</span></h1>
 <p>
 Type what you want in natural language. Crab-Agent navigates pages, clicks elements, fills forms,
 reads content, manages tabs &mdash; all autonomously via Chrome DevTools Protocol.
 Bring your own API key. Works with any LLM provider.
 </p>
 <div class="hero-buttons">
 <a href="https://github.com/Hert4/crab-ts" target="_blank" class="btn btn-primary">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
 Get Extension
 </a>
 <a href="#how-it-works" class="btn btn-secondary">
 See how it works
 </a>
 </div>
 </div>
<div class="hero-visual">
 <div class="mascot-container">
 <div class="mascot-ring"></div>
 <div class="mascot-ring-2"></div>
 <object type="image/svg+xml" data="animations/clawd-idle-living.svg" aria-label="Clawd the crab mascot"></object>
 <div class="float-badge">Click & Type</div>
 <div class="float-badge">Navigate</div>
 <div class="float-badge">Read Pages</div>
 <div class="float-badge">Tabs</div>
 <div class="float-badge">Schedule</div>
 </div>
 </div>
 </div>
 </section>
<!-- PROVIDERS -->
 <section class="providers">
 <div class="providers-label">Works with your favorite LLM provider</div>
 <div class="providers-grid">
 <div class="provider-item">
 <div class="provider-icon" style="background: #d97706; color: #fff;">A</div>
 Anthropic
 </div>
 <div class="provider-item">
 <div class="provider-icon" style="background: #10a37f; color: #fff;">O</div>
 OpenAI
 </div>
 <div class="provider-item">
 <div class="provider-icon" style="background: #4285f4; color: #fff;">G</div>
 Google Gemini
 </div>
 <div class="provider-item">
 <div class="provider-icon" style="background: #6366f1; color: #fff;">R</div>
 OpenRouter
 </div>
 <div class="provider-item">
 <div class="provider-icon" style="background: #333; color: #fff;">O</div>
 Ollama (Local)
 </div>
 <div class="provider-item">
 <div class="provider-icon" style="background: #64748b; color: #fff;">+</div>
 OpenAI-compatible
 </div>
 </div>
 </section>
<!-- FEATURES -->
 <section class="features" id="features">
 <div class="section-header">
 <div class="section-tag">Features</div>
 <h2>Everything you need to automate the web</h2>
 <p>A complete agent toolkit built into a Chrome side panel. No coding required.</p>
 </div>
 <div class="features-grid">
 <div class="feature-card">
 <div class="feature-icon" style="background: rgba(255, 107, 53, 0.15); color: var(--crab-accent);">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
 </div>
 <h3>Vision + Native AX Tree</h3>
 <p>Uses Chromium's native Accessibility tree with ref IDs (covers Shadow DOM, cross-origin iframes, custom elements). Pixel-perfect coordinates from the renderer.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon" style="background: rgba(64, 196, 255, 0.15); color: var(--crab-blue);">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
 </div>
 <h3>Full Browser Control via CDP</h3>
 <p>Click, type, scroll, drag, navigate, open tabs, fill forms, upload files, execute JavaScript &mdash; hardware-level events through Chrome DevTools Protocol, not synthetic JS.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon" style="background: rgba(167, 139, 250, 0.15); color: var(--crab-purple);">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
 </div>
 <h3>Native Tool Calling</h3>
 <p>Uses each provider's native tool-use API (Anthropic tool_use, OpenAI function calling, Gemini function_declarations). Structured responses, not text JSON parsing.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon" style="background: rgba(74, 222, 128, 0.15); color: var(--crab-green);">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
 </div>
 <h3>GIF Replay Recording</h3>
 <p>Record every task replay as GIF/HTML/JSON. Review what the agent did, debug failed flows, or share runs as visual artifacts.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24;">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
 </div>
 <h3>Task Scheduler</h3>
 <p>Schedule tasks for the future &mdash; one-time or recurring. Natural language time parsing via LLM. The agent runs them automatically via Chrome alarms.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon" style="background: rgba(244, 114, 182, 0.15); color: #f472b6;">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
 </div>
 <h3>Domain Permission System</h3>
 <p>Domain-based permissions keep you in control. Smart message compaction with progressive token budgeting keeps long sessions stable.</p>
 </div>
 </div>
 </section>
<!-- HOW IT WORKS -->
 <section class="how-it-works" id="how-it-works">
 <div class="section-header">
 <div class="section-tag">How it works</div>
 <h2>From natural language to action</h2>
 <p>A tool-use agent loop that keeps going until the task is done.</p>
 </div>
 <div class="steps">
 <div class="step">
 <div class="step-number">1</div>
 <div class="step-content">
 <h3>You describe the task</h3>
 <p>Open the side panel and type what you want in plain language. Attach screenshots if needed. <em>"Book the cheapest flight to Tokyo for next Friday"</em></p>
 </div>
 </div>
 <div class="step">
 <div class="step-number">2</div>
 <div class="step-content">
 <h3>Agent observes the page</h3>
 <p>Crab-Agent takes a screenshot and pulls the native CDP Accessibility tree, mapping every interactive element to a ref ID (e.g., <code>ref_42</code>) with pixel-perfect coordinates.</p>
 </div>
 </div>
 <div class="step">
 <div class="step-number">3</div>
 <div class="step-content">
 <h3>LLM decides the next action</h3>
 <p>The conversation (including visual context) is sent to your chosen LLM via native tool-calling APIs. It selects a tool &mdash; click, type, navigate, read &mdash; and the extension executes it via CDP.</p>
 </div>
 </div>
 <div class="step">
 <div class="step-number">4</div>
 <div class="step-content">
 <h3>Repeat until done</h3>
 <p>The result is appended to the conversation and the loop continues. State manager handles loop detection. The agent handles multi-step flows, tab switching, and error recovery automatically.</p>
 </div>
 </div>
 </div>
 </section>
<!-- TOOLS -->
 <section class="tools-section" id="tools">
 <div class="section-header">
 <div class="section-tag">24 Built-in Tools</div>
 <h2>A tool for every browser interaction</h2>
 <p>22 external + 2 internal. The agent picks the right tool for each step.</p>
 </div>
 <div class="tools-grid">
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-accent);"></span> computer (13 actions)</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-blue);"></span> navigate</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-green);"></span> read_page (AX tree)</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-purple);"></span> find (semantic)</div>
 <div class="tool-chip"><span class="tool-dot" style="background: #fbbf24;"></span> form_input</div>
 <div class="tool-chip"><span class="tool-dot" style="background: #f472b6;"></span> get_page_text</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-accent);"></span> tabs_context</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-blue);"></span> tabs_create</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-green);"></span> switch_tab</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-purple);"></span> close_tab</div>
 <div class="tool-chip"><span class="tool-dot" style="background: #fbbf24;"></span> javascript_tool</div>
 <div class="tool-chip"><span class="tool-dot" style="background: #f472b6;"></span> file_upload</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-accent);"></span> upload_image</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-blue);"></span> document_generator</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-green);"></span> gif_creator</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-purple);"></span> canvas_toolkit</div>
 <div class="tool-chip"><span class="tool-dot" style="background: #fbbf24;"></span> visualize (charts)</div>
 <div class="tool-chip"><span class="tool-dot" style="background: #f472b6;"></span> code_editor</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-accent);"></span> set_of_mark</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-blue);"></span> resize_window</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-green);"></span> shortcuts_list</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-purple);"></span> shortcuts_execute</div>
 <div class="tool-chip"><span class="tool-dot" style="background: #fbbf24;"></span> read_console_messages</div>
 <div class="tool-chip"><span class="tool-dot" style="background: #f472b6;"></span> read_network_requests</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-accent);"></span> update_plan</div>
 <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-blue);"></span> ask_user / done</div>
 </div>
 </section>
<!-- ARCHITECTURE -->
 <section class="arch-section">
 <div class="section-header">
 <div class="section-tag">Architecture</div>
 <h2>Built for reliability</h2>
 <p>React 18 + TypeScript + Vite. Chrome MV3 service worker. Multi-provider LLM gateway.</p>
 </div>
 <div class="arch-box"><span class="h">Side Panel (React 18 + Zustand)</span>
 Chat | Workflows | Schedule | Settings
 |
 Port messages
 |
<span class="b">Background Service Worker</span>
 Session management | Tab groups | Alarms | Scheduler
 |
<span class="g">Agent Loop (tool-use cycle)</span>
 Screenshot -> AX Tree -> Call LLM -> Execute Tool -> Repeat
 | |
<span class="p">LLM Gateway</span> <span class="h">Tool Executors (CDP)</span>
 Anthropic (tool_use) Hardware mouse/keyboard
 OpenAI (function calling) Browser: tabs, navigate
 Gemini (function_declarations) Page: read, find, JS
 OpenRouter Files: upload, download
 Ollama (text JSON) Docs, GIF, canvas
 OpenAI-compatible (auto-detect) Permissions, scheduler</div>
 </section>
<!-- CTA -->
 <section class="cta">
 <div class="cta-inner">
 <h2>Ready to automate your browser?</h2>
 <p>Free to use. Bring your own API key and let Clawd handle the rest.</p>
 <div class="cta-buttons">
 <a href="https://github.com/Hert4/crab-ts" target="_blank" class="btn btn-primary">
 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
 Get it on GitHub
 </a>
 <a href="https://github.com/Hert4/crab-ts/issues" target="_blank" class="btn btn-secondary">
 Report Issues
 </a>
 </div>
 </div>
 </section>
<!-- CREDITS -->
 <section class="credits" id="credits">
 <div class="section-header">
 <div class="section-tag">Credits & Thanks</div>
 <h2>Standing on the shoulders of giants</h2>
 <p>Crab-Agent wouldn't exist without these amazing projects and their creators.</p>
 </div>
 <div class="credits-grid">
 <div class="credit-card">
 <div class="credit-card-header">
 <div class="credit-avatar" style="background: rgba(222, 136, 109, 0.2); color: var(--crab-orange);">
 <svg viewBox="-15 -25 45 45" width="28" height="28">
 <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
 <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
 <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
 <rect x="3" y="13" width="1" height="2" fill="#DE886D"/>
 <rect x="5" y="13" width="1" height="2" fill="#DE886D"/>
 <rect x="9" y="13" width="1" height="2" fill="#DE886D"/>
 <rect x="11" y="13" width="1" height="2" fill="#DE886D"/>
 <rect x="4" y="8" width="1" height="2" fill="#000"/>
 <rect x="10" y="8" width="1" height="2" fill="#000"/>
 </svg>
 </div>
 <div>
 <h4><a href="https://github.com/marciogranzotto/clawd-tank" target="_blank">Clawd Tank</a></h4>
 <span class="credit-tag" style="background: rgba(222, 136, 109, 0.15); color: var(--crab-orange);">Assets & Mascot</span>
 </div>
 </div>
 <p>The adorable "Clawd" crab pixel-art mascot and SVG animations used throughout Crab-Agent are derived from the Clawd Tank project by <strong>Marcio Granzotto</strong>. Thank you for the amazing crab character!</p>
 </div>
 <div class="credit-card">
 <div class="credit-card-header">
 <div class="credit-avatar" style="background: rgba(167, 139, 250, 0.2); color: var(--crab-purple);">
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
 </div>
 <div>
 <h4>Claude for Chrome (Anthropic)</h4>
 <span class="credit-tag" style="background: rgba(167, 139, 250, 0.15); color: var(--crab-purple);">Agent Logic</span>
 </div>
 </div>
 <p>Core agent loop architecture and browser automation logic inspired by Anthropic's Claude for Chrome. The tool-use cycle pattern &mdash; screenshot, observe, decide, act &mdash; draws heavily from their pioneering work on AI browser agents.</p>
 </div>
 </div>
 </section>
<!-- FOOTER -->
 <footer>
 <p>
 CC BY-NC 4.0 &middot; Built by <a href="https://github.com/Hert4" target="_blank">Hert4</a>
 </p>
 </footer>
</body>
</html>