Spaces:

beyoru
/

crab-agent

Running

App Files Files Community

beyoru commited on Apr 13

Commit

4ed74a0

1 Parent(s): fdd946d

Update space

Browse files

Files changed (4) hide show

.gitattributes +0 -35
README.md +12 -6
index.html +981 -18
style.css +0 -28

.gitattributes DELETED Viewed

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -1,10 +1,16 @@
 ---
-title: Crab Agent
-emoji: 🌍
-colorFrom: pink
-colorTo: red
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Crab-Agent
+emoji: 🦀
+colorFrom: red
+colorTo: orange
 sdk: static
+pinned: true
+license: mit
+short_description: AI Browser Agent - Chrome Extension
 ---
+# Crab-Agent
+AI-powered Chrome extension that automates browser tasks using natural language.
+Visit this Space to learn more and get started!

index.html CHANGED Viewed

@@ -1,19 +1,982 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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;
+    }
+    /* Background effects */
+    .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 pattern overlay */
+    .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 ===== */
+    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); }
+    /* ===== BUTTONS ===== */
+    .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 ===== */
+    .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 mascot */
+    .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;
+    }
+    /* Floating tool badges around mascot */
+    .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-child(2) { top: 10%; left: -10%; animation-delay: 0s; color: var(--crab-blue); }
+    .float-badge:nth-child(3) { top: 5%; right: -5%; animation-delay: 1s; color: var(--crab-green); }
+    .float-badge:nth-child(4) { bottom: 25%; left: -15%; animation-delay: 2s; color: var(--crab-purple); }
+    .float-badge:nth-child(5) { bottom: 15%; right: -10%; animation-delay: 3s; color: var(--crab-accent2); }
+    .float-badge:nth-child(6) { top: 40%; left: -20%; animation-delay: 4s; color: var(--crab-accent); }
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+    /* ===== PROVIDERS ===== */
+    .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 ===== */
+    .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 ===== */
+    .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 SHOWCASE ===== */
+    .tools-section {
+      padding: 100px 40px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    .tools-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 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 DIAGRAM ===== */
+    .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 ===== */
+    .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 ===== */
+    .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 ===== */
+    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;
+    }
+    /* ===== RESPONSIVE ===== */
+    @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-agent-extension" 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.0 &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, records workflows &mdash; all autonomously.
+          Bring your own API key. Works with any LLM provider.
+        </p>
+        <div class="hero-buttons">
+          <a href="https://github.com/Hert4/crab-agent-extension" 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">Workflows</div>
+          <div class="float-badge">Memory</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 + DOM Understanding</h3>
+        <p>Takes screenshots and reads the full DOM tree with interactive element references. Sees your page like a human would.</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</h3>
+        <p>Click, type, scroll, drag, navigate, open tabs, fill forms, upload files, execute JavaScript &mdash; all via Chrome DevTools Protocol.</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>Persistent Memory</h3>
+        <p>Remembers your preferences, rules, and personal info across sessions. Dream consolidation keeps memory clean and relevant.</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>Workflow Recording</h3>
+        <p>Record browser interactions as reusable workflows. Replay them on demand or let the agent invoke them automatically.</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 with cron expressions. 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>Permission System</h3>
+        <p>You stay in control. Choose between Ask, Auto, or Strict modes. Sensitive pages always require explicit approval.</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 reads the DOM, building a map of every interactive element with coordinate references.</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 the visual context) is sent to your chosen LLM. 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. The agent handles multi-step flows, tab switching, form filling, and error recovery automatically.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- TOOLS -->
+  <section class="tools-section" id="tools">
+    <div class="section-header">
+      <div class="section-tag">30+ Built-in Tools</div>
+      <h2>A tool for every browser interaction</h2>
+      <p>The agent picks the right tool for each step. Here's what's in the toolkit.</p>
+    </div>
+    <div class="tools-grid">
+      <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-accent);"></span> computer (click/type/scroll)</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</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-purple);"></span> find (accessibility)</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> download_file</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> run_workflow</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-blue);"></span> schedule_task</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-green);"></span> memory (CRUD)</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-purple);"></span> suggest_rule</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: #fbbf24;"></span> update_plan</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: #f472b6;"></span> set_of_mark</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-accent);"></span> resize_window</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-blue);"></span> shortcuts_list</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-green);"></span> shortcuts_execute</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: var(--crab-purple);"></span> read_console</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: #fbbf24;"></span> read_network</div>
+      <div class="tool-chip"><span class="tool-dot" style="background: #f472b6;"></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>Chrome MV3 service worker, React side panel, multi-provider LLM gateway.</p>
+    </div>
+    <div class="arch-box"><span class="h">Side Panel (React + Zustand)</span>
+  Chat  |  Workflows  |  Schedule  |  Memory  |  Settings
+                        |
+                   Port messages
+                        |
+<span class="b">Background Service Worker</span>
+  Session management  |  Tab groups  |  Memory dreams  |  Alarms
+                        |
+<span class="g">Agent Loop (tool-use cycle)</span>
+  Screenshot -> Read DOM -> Call LLM -> Execute Tool -> Repeat
+          |                                    |
+<span class="p">LLM Gateway</span>                        <span class="h">Tool Executors</span>
+  Anthropic                          CDP: click, type, scroll
+  OpenAI                             Browser: tabs, navigate
+  Gemini                             Page: read, find, JS
+  OpenRouter                         Files: upload, download
+  Ollama                             Docs, GIF, workflows
+  OpenAI-compatible                  Memory, scheduler</div>
+  </section>
+  <!-- CTA -->
+  <section class="cta">
+    <div class="cta-inner">
+      <h2>Ready to automate your browser?</h2>
+      <p>Open source, 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-agent-extension" 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-agent-extension/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 Computer Use (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 computer-use approach. 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>
+      Built by <a href="https://github.com/Hert4" target="_blank">Hert4</a> &mdash;
+      Crab-Agent is open source under the MIT License.
+    </p>
+  </footer>
+</body>
 </html>

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}