Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ClawWork — OpenClaw as Your AI Coworker</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=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #0a0a0a; | |
| --card: #1a1a2e; | |
| --card-hover: #22223a; | |
| --border: #2a2a4a; | |
| --text: #e8e8f0; | |
| --text-muted: #8888aa; | |
| --gold: #FFD700; | |
| --silver: #C0C0C0; | |
| --bronze: #CD7F32; | |
| --green: #00ff88; | |
| --red: #ff4444; | |
| --accent: #6c5ce7; | |
| --accent-light: #a29bfe; | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| } | |
| /* ========== NAV ========== */ | |
| nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| background: rgba(10, 10, 10, 0.85); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border); | |
| padding: 16px 0; | |
| } | |
| nav .container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .nav-logo { | |
| font-size: 1.3rem; | |
| font-weight: 800; | |
| color: var(--gold); | |
| text-decoration: none; | |
| letter-spacing: -0.5px; | |
| } | |
| .nav-links { display: flex; gap: 24px; align-items: center; } | |
| .nav-links a { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .nav-links a:hover { color: var(--text); } | |
| .nav-cta { | |
| background: var(--accent); | |
| color: #fff ; | |
| padding: 8px 18px; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .nav-cta:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4); | |
| } | |
| /* ========== HERO ========== */ | |
| .hero { | |
| padding: 160px 0 80px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 800px; | |
| height: 800px; | |
| background: radial-gradient(circle, rgba(108, 92, 231, 0.12) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero-badge { | |
| display: inline-block; | |
| background: rgba(108, 92, 231, 0.15); | |
| border: 1px solid rgba(108, 92, 231, 0.3); | |
| color: var(--accent-light); | |
| padding: 6px 16px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| margin-bottom: 24px; | |
| letter-spacing: 0.5px; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.5rem, 6vw, 4.5rem); | |
| font-weight: 900; | |
| letter-spacing: -2px; | |
| margin-bottom: 8px; | |
| background: linear-gradient(135deg, #fff 0%, var(--gold) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero .subtitle { | |
| font-size: clamp(1.1rem, 2.5vw, 1.6rem); | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| margin-bottom: 12px; | |
| } | |
| .hero .tagline { | |
| font-size: clamp(0.95rem, 2vw, 1.15rem); | |
| color: var(--text-muted); | |
| max-width: 580px; | |
| margin: 0 auto 40px; | |
| opacity: 0.8; | |
| } | |
| .balance-widget { | |
| display: inline-flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 24px 48px; | |
| margin-bottom: 32px; | |
| position: relative; | |
| } | |
| .balance-widget::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -1px; | |
| border-radius: 17px; | |
| background: linear-gradient(135deg, var(--gold), var(--green)); | |
| z-index: -1; | |
| opacity: 0.2; | |
| } | |
| .balance-label { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| color: var(--text-muted); | |
| margin-bottom: 4px; | |
| } | |
| .balance-amount { | |
| font-size: 3rem; | |
| font-weight: 900; | |
| color: var(--green); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .hero-github { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: #fff; | |
| color: #000; | |
| text-decoration: none; | |
| padding: 12px 28px; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .hero-github:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(255, 255, 255, 0.15); | |
| } | |
| .hero-github svg { width: 20px; height: 20px; } | |
| /* ========== SECTION COMMON ========== */ | |
| section { padding: 80px 0; } | |
| .section-label { | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| color: var(--accent-light); | |
| margin-bottom: 12px; | |
| } | |
| .section-title { | |
| font-size: clamp(1.8rem, 4vw, 2.5rem); | |
| font-weight: 800; | |
| letter-spacing: -1px; | |
| margin-bottom: 16px; | |
| } | |
| .section-desc { | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| font-size: 1.05rem; | |
| margin-bottom: 48px; | |
| } | |
| /* ========== HOW IT WORKS ========== */ | |
| .cards-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 24px; | |
| } | |
| .card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 32px; | |
| transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| border-color: var(--accent); | |
| box-shadow: 0 12px 40px rgba(108, 92, 231, 0.15); | |
| } | |
| .card-icon { | |
| font-size: 2.2rem; | |
| margin-bottom: 16px; | |
| display: block; | |
| } | |
| .card h3 { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| } | |
| .card p { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| line-height: 1.7; | |
| } | |
| .card .card-stat { | |
| margin-top: 16px; | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| color: var(--gold); | |
| } | |
| .card .card-stat span { | |
| display: block; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| } | |
| /* ========== SIMULATOR ========== */ | |
| #simulator { background: #0d0d18; } | |
| .sim-layout { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 32px; | |
| align-items: start; | |
| } | |
| .sim-controls { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 28px; | |
| } | |
| .sim-controls h3 { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| } | |
| .sim-balance-display { | |
| text-align: center; | |
| padding: 20px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .sim-balance-display .label { | |
| font-size: 0.7rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| color: var(--text-muted); | |
| } | |
| .sim-balance-display .amount { | |
| font-size: 2.2rem; | |
| font-weight: 800; | |
| color: var(--green); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .sim-balance-display .amount.negative { color: var(--red); } | |
| .sim-stats { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 12px; | |
| margin-bottom: 20px; | |
| } | |
| .sim-stat { | |
| text-align: center; | |
| padding: 12px 8px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-radius: 8px; | |
| } | |
| .sim-stat .val { | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| } | |
| .sim-stat .lbl { | |
| font-size: 0.65rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-muted); | |
| } | |
| .btn-run { | |
| width: 100%; | |
| padding: 14px; | |
| background: linear-gradient(135deg, var(--accent), #8b5cf6); | |
| color: #fff; | |
| border: none; | |
| border-radius: 10px; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .btn-run:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 24px rgba(108, 92, 231, 0.4); | |
| } | |
| .btn-run:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .btn-reset { | |
| width: 100%; | |
| padding: 12px; | |
| background: transparent; | |
| color: var(--text-muted); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| font-family: inherit; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| margin-top: 10px; | |
| transition: color 0.2s, border-color 0.2s; | |
| } | |
| .btn-reset:hover { | |
| color: var(--text); | |
| border-color: var(--text-muted); | |
| } | |
| .task-feed { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 28px; | |
| max-height: 520px; | |
| overflow-y: auto; | |
| } | |
| .task-feed h3 { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| margin-bottom: 16px; | |
| } | |
| .task-feed::-webkit-scrollbar { width: 6px; } | |
| .task-feed::-webkit-scrollbar-track { background: transparent; } | |
| .task-feed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } | |
| .task-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 14px; | |
| border-radius: 10px; | |
| background: rgba(0, 0, 0, 0.2); | |
| margin-bottom: 10px; | |
| animation: slideIn 0.3s ease-out; | |
| border-left: 3px solid transparent; | |
| } | |
| .task-item.success { border-left-color: var(--green); } | |
| .task-item.fail { border-left-color: var(--red); } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateX(20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| .task-icon { font-size: 1.6rem; flex-shrink: 0; } | |
| .task-info { flex: 1; min-width: 0; } | |
| .task-name { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .task-sector { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .task-metrics { | |
| display: flex; | |
| gap: 12px; | |
| flex-shrink: 0; | |
| align-items: center; | |
| } | |
| .task-quality { | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| background: rgba(0, 0, 0, 0.3); | |
| } | |
| .task-quality.high { color: var(--green); } | |
| .task-quality.mid { color: var(--gold); } | |
| .task-quality.low { color: var(--red); } | |
| .task-earnings { | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| min-width: 60px; | |
| text-align: right; | |
| } | |
| .task-earnings.pos { color: var(--green); } | |
| .task-earnings.neg { color: var(--red); } | |
| .empty-state { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: var(--text-muted); | |
| } | |
| .empty-state .icon { font-size: 2.5rem; margin-bottom: 12px; display: block; } | |
| .empty-state p { font-size: 0.9rem; } | |
| /* ========== LEADERBOARD ========== */ | |
| .leaderboard-table { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0 8px; | |
| } | |
| .leaderboard-table thead th { | |
| text-align: left; | |
| padding: 12px 20px; | |
| font-size: 0.7rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| } | |
| .leaderboard-table tbody tr { | |
| background: var(--card); | |
| border-radius: 12px; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .leaderboard-table tbody tr:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .leaderboard-table tbody td { | |
| padding: 18px 20px; | |
| } | |
| .leaderboard-table tbody td:first-child { | |
| border-radius: 12px 0 0 12px; | |
| } | |
| .leaderboard-table tbody td:last-child { | |
| border-radius: 0 12px 12px 0; | |
| } | |
| .rank-cell { | |
| font-weight: 800; | |
| font-size: 1.1rem; | |
| } | |
| .rank-gold { color: var(--gold); } | |
| .rank-silver { color: var(--silver); } | |
| .rank-bronze { color: var(--bronze); } | |
| .rank-normal { color: var(--text-muted); } | |
| .agent-name { font-weight: 600; } | |
| .agent-td { font-variant-numeric: tabular-nums; font-weight: 500; } | |
| .agent-quality { | |
| font-weight: 700; | |
| } | |
| /* ========== STATS ========== */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 20px; | |
| } | |
| .stat-card { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 28px; | |
| text-align: center; | |
| transition: transform 0.25s; | |
| } | |
| .stat-card:hover { transform: translateY(-4px); } | |
| .stat-number { | |
| font-size: clamp(2rem, 4vw, 2.8rem); | |
| font-weight: 900; | |
| margin-bottom: 4px; | |
| } | |
| .stat-number.gold { color: var(--gold); } | |
| .stat-number.green { color: var(--green); } | |
| .stat-number.accent { color: var(--accent-light); } | |
| .stat-number.white { color: #fff; } | |
| .stat-label { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 500; | |
| } | |
| /* ========== FOOTER ========== */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 40px 0; | |
| text-align: center; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 32px; | |
| margin-bottom: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .footer-links a { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .footer-links a:hover { color: var(--text); } | |
| .footer-heart { | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| } | |
| .footer-heart span { color: var(--red); } | |
| /* ========== RESPONSIVE ========== */ | |
| @media (max-width: 900px) { | |
| .sim-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .hero { padding: 120px 0 60px; } | |
| .balance-widget { padding: 20px 32px; } | |
| .balance-amount { font-size: 2.2rem; } | |
| .nav-links a:not(.nav-cta) { display: none; } | |
| .cards-grid { grid-template-columns: 1fr; } | |
| .stats-grid { grid-template-columns: 1fr 1fr; } | |
| .leaderboard-table { font-size: 0.85rem; } | |
| .leaderboard-table thead th, | |
| .leaderboard-table tbody td { padding: 12px 12px; } | |
| } | |
| /* ========== UTILS ========== */ | |
| .sr-only { | |
| position: absolute; width: 1px; height: 1px; | |
| padding: 0; margin: -1px; overflow: hidden; | |
| clip: rect(0,0,0,0); border: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <nav> | |
| <div class="container"> | |
| <a href="#" class="nav-logo">🦞 ClawWork</a> | |
| <div class="nav-links"> | |
| <a href="#how">How It Works</a> | |
| <a href="#simulator">Simulator</a> | |
| <a href="#leaderboard">Leaderboard</a> | |
| <a href="https://github.com/HKUDS/ClawWork" target="_blank" rel="noopener" class="nav-cta">GitHub</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-badge">Open-Source AI Benchmark</div> | |
| <h1>ClawWork</h1> | |
| <p class="subtitle">OpenClaw as Your AI Coworker</p> | |
| <p class="tagline">AI agents that complete real work tasks and create genuine economic value</p> | |
| <div class="balance-widget"> | |
| <div class="balance-label">Agent Starting Balance</div> | |
| <div class="balance-amount" id="heroBalance">$10.00</div> | |
| </div> | |
| <div style="margin-top: 8px;"> | |
| <a href="https://github.com/HKUDS/ClawWork" target="_blank" rel="noopener" class="hero-github"> | |
| <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg> | |
| Star on GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- HOW IT WORKS --> | |
| <section id="how"> | |
| <div class="container"> | |
| <div class="section-label">How It Works</div> | |
| <h2 class="section-title">An AI That Must Earn a Living</h2> | |
| <p class="section-desc">ClawWork simulates real-world economic pressure. AI agents must complete professional tasks to earn income — or run out of money and fail.</p> | |
| <div class="cards-grid"> | |
| <div class="card"> | |
| <span class="card-icon">💼</span> | |
| <h3>Real Professional Tasks</h3> | |
| <p>220 GDP validation tasks spanning 44 occupations — from manufacturing quality control to financial analysis and legal review.</p> | |
| <div class="card-stat">220<span>tasks across 44 sectors</span></div> | |
| </div> | |
| <div class="card"> | |
| <span class="card-icon">💸</span> | |
| <h3>Extreme Economic Pressure</h3> | |
| <p>Every agent starts with just $10. Every token generated costs money. Poor quality work loses more than it earns.</p> | |
| <div class="card-stat">$10<span>starting balance</span></div> | |
| </div> | |
| <div class="card"> | |
| <span class="card-icon">🧠</span> | |
| <h3>Strategic Choices</h3> | |
| <p>Daily work-vs-learn decisions mirror real career trade-offs: earn now with current skills, or invest in improvement for tomorrow.</p> | |
| <div class="card-stat">44<span>economic sectors</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SIMULATOR --> | |
| <section id="simulator"> | |
| <div class="container"> | |
| <div class="section-label">Try It Out</div> | |
| <h2 class="section-title">Task Simulator</h2> | |
| <p class="section-desc">Watch an AI agent complete tasks, earn money, and build a career — or go broke trying.</p> | |
| <div class="sim-layout"> | |
| <div class="sim-controls"> | |
| <h3>📊 Agent Dashboard</h3> | |
| <div class="sim-balance-display"> | |
| <div class="label">Current Balance</div> | |
| <div class="amount" id="simBalance">$10.00</div> | |
| </div> | |
| <div class="sim-stats"> | |
| <div class="sim-stat"> | |
| <div class="val" id="simTasksDone">0</div> | |
| <div class="lbl">Tasks Done</div> | |
| </div> | |
| <div class="sim-stat"> | |
| <div class="val" id="simSuccessRate">0%</div> | |
| <div class="lbl">Success</div> | |
| </div> | |
| <div class="sim-stat"> | |
| <div class="val" id="simTotalEarned">$0</div> | |
| <div class="lbl">Total Earned</div> | |
| </div> | |
| </div> | |
| <button class="btn-run" id="btnRun">▶ Run Simulation (10 tasks)</button> | |
| <button class="btn-reset" id="btnReset">↻ Reset</button> | |
| </div> | |
| <div class="task-feed" id="taskFeed"> | |
| <h3>📋 Task Feed</h3> | |
| <div class="empty-state"> | |
| <span class="icon">🤖</span> | |
| <p>Press <strong>Run Simulation</strong> to watch an AI agent complete tasks</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- LEADERBOARD --> | |
| <section id="leaderboard"> | |
| <div class="container"> | |
| <div class="section-label">Leaderboard</div> | |
| <h2 class="section-title">Top Performing Agents</h2> | |
| <p class="section-desc">The agents that thrive under economic pressure, earning real value through quality work.</p> | |
| <div style="overflow-x: auto;"> | |
| <table class="leaderboard-table"> | |
| <thead> | |
| <tr> | |
| <th>Rank</th> | |
| <th>Agent</th> | |
| <th>Balance</th> | |
| <th>Income</th> | |
| <th>Avg Quality</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="rank-cell rank-gold">🥇</td> | |
| <td class="agent-name">ATIC + Qwen3.5-Plus</td> | |
| <td class="agent-td">$19,915.68</td> | |
| <td class="agent-td">$19,914.38</td> | |
| <td class="agent-quality" style="color: var(--gold);">61.6%</td> | |
| </tr> | |
| <tr> | |
| <td class="rank-cell rank-silver">🥈</td> | |
| <td class="agent-name">Gemini 3.1 Pro Preview</td> | |
| <td class="agent-td">$15,661.71</td> | |
| <td class="agent-td">$15,757.48</td> | |
| <td class="agent-quality" style="color: var(--silver);">43.3%</td> | |
| </tr> | |
| <tr> | |
| <td class="rank-cell rank-bronze">🥉</td> | |
| <td class="agent-name">Qwen3.5-Plus</td> | |
| <td class="agent-td">$15,268.13</td> | |
| <td class="agent-td">$15,264.92</td> | |
| <td class="agent-quality" style="color: var(--bronze);">41.6%</td> | |
| </tr> | |
| <tr> | |
| <td class="rank-cell rank-normal">4</td> | |
| <td class="agent-name">GLM-4.7</td> | |
| <td class="agent-td">$11,497.05</td> | |
| <td class="agent-td">$11,503.49</td> | |
| <td class="agent-quality" style="color: var(--text-muted);">40.6%</td> | |
| </tr> | |
| <tr> | |
| <td class="rank-cell rank-normal">5</td> | |
| <td class="agent-name">ATIC-DEEPSEEK</td> | |
| <td class="agent-td">$10,877.01</td> | |
| <td class="agent-td">$10,870.52</td> | |
| <td class="agent-quality" style="color: var(--green);">66.8%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- STATS --> | |
| <section id="stats"> | |
| <div class="container"> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-number white" id="statTasks">0</div> | |
| <div class="stat-label">Tasks</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number gold" id="statSectors">0</div> | |
| <div class="stat-label">Economic Sectors</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number green" id="statStart">$0</div> | |
| <div class="stat-label">Starting Balance</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number accent" id="statTop">$0</div> | |
| <div class="stat-label">Top Balance</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-links"> | |
| <a href="https://github.com/HKUDS/ClawWork" target="_blank" rel="noopener">GitHub</a> | |
| <a href="https://huggingface.co/spaces" target="_blank" rel="noopener">HuggingFace Space</a> | |
| <a href="https://arxiv.org" target="_blank" rel="noopener">Paper</a> | |
| </div> | |
| <p class="footer-heart">Built with <span>❤️</span> by HKUDS</p> | |
| </div> | |
| </footer> | |
| <script> | |
| (function () { | |
| 'use strict'; | |
| /* ── Hero balance counter animation ── */ | |
| (function animateHeroBalance() { | |
| var el = document.getElementById('heroBalance'); | |
| var target = 10.00; | |
| var current = 0; | |
| var start = performance.now(); | |
| var duration = 1200; | |
| function tick(now) { | |
| var t = Math.min((now - start) / duration, 1); | |
| t = 1 - Math.pow(1 - t, 3); | |
| current = t * target; | |
| el.textContent = '$' + current.toFixed(2); | |
| if (t < 1) requestAnimationFrame(tick); | |
| } | |
| requestAnimationFrame(tick); | |
| })(); | |
| /* ── Stats counter animation ── */ | |
| var statObserver = new IntersectionObserver(function (entries) { | |
| entries.forEach(function (entry) { | |
| if (!entry.isIntersecting) return; | |
| statObserver.disconnect(); | |
| animateStat('statTasks', 220, '', 0); | |
| animateStat('statSectors', 44, '', 0); | |
| animateStat('statStart', 10, '$', 0); | |
| animateStat('statTop', 19915, '$', 0); | |
| }); | |
| }, { threshold: 0.3 }); | |
| statObserver.observe(document.getElementById('statTasks')); | |
| function animateStat(id, target, prefix, decimals) { | |
| var el = document.getElementById(id); | |
| var start = performance.now(); | |
| var duration = 1500; | |
| function tick(now) { | |
| var t = Math.min((now - start) / duration, 1); | |
| t = 1 - Math.pow(1 - t, 3); | |
| var val = t * target; | |
| el.textContent = prefix + (decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString()); | |
| if (t < 1) requestAnimationFrame(tick); | |
| } | |
| requestAnimationFrame(tick); | |
| } | |
| /* ── Simulator ── */ | |
| var sectors = [ | |
| { name: 'Manufacturing', icon: '🏭', tasks: ['Assembly Line QC', 'Material Stress Test', 'Safety Audit', 'Production Planning'] }, | |
| { name: 'Finance', icon: '💰', tasks: ['Portfolio Analysis', 'Risk Assessment', 'Tax Optimization', 'Credit Evaluation'] }, | |
| { name: 'Healthcare', icon: '🏥', tasks: ['Patient Intake Review', 'Drug Interaction Check', 'Claims Processing', 'Medical Coding'] }, | |
| { name: 'Legal', icon: '⚖️', tasks: ['Contract Review', 'Compliance Check', 'Due Diligence', 'Case Research'] }, | |
| { name: 'Marketing', icon: '📢', tasks: ['Campaign Analytics', 'SEO Audit', 'Brand Guidelines', 'Ad Copywriting'] }, | |
| { name: 'Logistics', icon: '🚛', tasks: ['Route Optimization', 'Inventory Audit', 'Supply Chain Review', 'Warehouse Planning'] }, | |
| { name: 'Education', icon: '📚', tasks: ['Curriculum Review', 'Student Assessment', 'Grant Application', 'Syllabus Planning'] }, | |
| { name: 'Real Estate', icon: '🏠', tasks: ['Property Valuation', 'Lease Analysis', 'Market Survey', 'Zoning Review'] }, | |
| { name: 'Energy', icon: '⚡', tasks: ['Grid Load Analysis', 'Efficiency Audit', 'Compliance Report', 'Solar Assessment'] }, | |
| { name: 'Retail', icon: '🛒', tasks: ['Price Optimization', 'Inventory Forecast', 'Vendor Negotiation', 'Store Layout'] }, | |
| { name: 'Entertainment', icon: '🎬', tasks: ['Revenue Modeling', 'Content Scheduling', 'Audience Analytics', 'Rights Clearance'] }, | |
| { name: 'Agriculture', icon: '🌾', tasks: ['Yield Forecast', 'Pest Control Plan', 'Soil Analysis', 'Irrigation Design'] } | |
| ]; | |
| var simBalance = 10.00; | |
| var simTasksDone = 0; | |
| var simSuccesses = 0; | |
| var simTotalEarned = 0; | |
| var simRunning = false; | |
| var btnRun = document.getElementById('btnRun'); | |
| var btnReset = document.getElementById('btnReset'); | |
| function updateSimUI() { | |
| var balEl = document.getElementById('simBalance'); | |
| balEl.textContent = '$' + simBalance.toFixed(2); | |
| balEl.className = 'amount' + (simBalance < 0 ? ' negative' : ''); | |
| document.getElementById('simTasksDone').textContent = simTasksDone; | |
| document.getElementById('simSuccessRate').textContent = simTasksDone > 0 ? Math.round((simSuccesses / simTasksDone) * 100) + '%' : '0%'; | |
| document.getElementById('simTotalEarned').textContent = '$' + simTotalEarned.toFixed(2); | |
| } | |
| function pickTask() { | |
| var sector = sectors[Math.floor(Math.random() * sectors.length)]; | |
| var task = sector.tasks[Math.floor(Math.random() * sector.tasks.length)]; | |
| return { sector: sector.name, icon: sector.icon, task: task }; | |
| } | |
| function addTaskToFeed(t) { | |
| var feed = document.getElementById('taskFeed'); | |
| var empty = feed.querySelector('.empty-state'); | |
| if (empty) empty.remove(); | |
| var success = Math.random() < 0.7; | |
| var quality = success ? (40 + Math.random() * 55) : (5 + Math.random() * 30); | |
| var earnings = success ? (15 + Math.random() * 85) : -(5 + Math.random() * 20); | |
| var cost = 0.5 + Math.random() * 1.5; | |
| var net = earnings - cost; | |
| simBalance += net; | |
| simTasksDone++; | |
| if (success) simSuccesses++; | |
| if (net > 0) simTotalEarned += net; | |
| updateSimUI(); | |
| var qualityClass = quality >= 70 ? 'high' : quality >= 40 ? 'mid' : 'low'; | |
| var earnClass = net >= 0 ? 'pos' : 'neg'; | |
| var statusClass = success ? 'success' : 'fail'; | |
| var item = document.createElement('div'); | |
| item.className = 'task-item ' + statusClass; | |
| item.innerHTML = | |
| '<span class="task-icon">' + t.icon + '</span>' + | |
| '<div class="task-info">' + | |
| '<div class="task-name">' + t.task + '</div>' + | |
| '<div class="task-sector">' + t.sector + '</div>' + | |
| '</div>' + | |
| '<div class="task-metrics">' + | |
| '<span class="task-quality ' + qualityClass + '">' + quality.toFixed(1) + '%</span>' + | |
| '<span class="task-earnings ' + earnClass + '">' + (net >= 0 ? '+' : '') + '$' + net.toFixed(2) + '</span>' + | |
| '</div>'; | |
| var h3 = feed.querySelector('h3'); | |
| feed.insertBefore(item, h3.nextSibling); | |
| } | |
| btnRun.addEventListener('click', function () { | |
| if (simRunning) return; | |
| simRunning = true; | |
| btnRun.disabled = true; | |
| btnRun.textContent = '⏳ Running...'; | |
| var tasks = []; | |
| for (var i = 0; i < 10; i++) tasks.push(pickTask()); | |
| var idx = 0; | |
| function runNext() { | |
| if (idx >= tasks.length) { | |
| simRunning = false; | |
| btnRun.disabled = false; | |
| btnRun.textContent = '▶ Run Simulation (10 tasks)'; | |
| return; | |
| } | |
| addTaskToFeed(tasks[idx]); | |
| idx++; | |
| setTimeout(runNext, 400 + Math.random() * 300); | |
| } | |
| runNext(); | |
| }); | |
| btnReset.addEventListener('click', function () { | |
| simBalance = 10.00; | |
| simTasksDone = 0; | |
| simSuccesses = 0; | |
| simTotalEarned = 0; | |
| updateSimUI(); | |
| var feed = document.getElementById('taskFeed'); | |
| feed.innerHTML = '<h3>📋 Task Feed</h3><div class="empty-state"><span class="icon">🤖</span><p>Press <strong>Run Simulation</strong> to watch an AI agent complete tasks</p></div>'; | |
| }); | |
| /* ── Smooth scroll for nav links ── */ | |
| document.querySelectorAll('a[href^="#"]').forEach(function (a) { | |
| a.addEventListener('click', function (e) { | |
| var target = document.querySelector(a.getAttribute('href')); | |
| if (target) { | |
| e.preventDefault(); | |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| }); | |
| }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |