ROO CODE

✨步子哥 · 2026-02-13T04:32:33+00:00

Roo-Code Poster :root { --bg-color: #0a0e17; --card-bg: #161b22; --primary: #7c3aed; /* Violet */ --secondary: #22d3ee; /* Cyan */ --accent: #f43f5e; /* Rose */ --text-main: #ffffff; --text-muted: #94a3b8; --font-title: 'Futura', sans-serif; --font-body: 'HarmonyOS Sans SC', 'PingFang HK', sans-serif; --font-code: 'Roboto Mono', monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #1a1a1a; font-family: var(--font-body); display: flex; justify-content: center; align-items: center; min-height: 100vh; } .poster-container { width: 720px; min-height: 960px; background-color: var(--bg-color); background-image: radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(34, 211, 238, 0.1) 0%, transparent 40%); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 60px 50px; color: var(--text-main); } /* Decorative Grid Background */ .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } header { z-index: 1; margin-bottom: 40px; position: relative; } .brand-tag { display: inline-block; background: rgba(124, 58, 237, 0.2); color: var(--primary); padding: 6px 12px; border-radius: 4px; font-size: 16px; font-weight: bold; margin-bottom: 16px; font-family: var(--font-code); border: 1px solid rgba(124, 58, 237, 0.3); } h1 { font-family: var(--font-title); font-size: 80px; line-height: 1; background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px; letter-spacing: -2px; } h2 { font-size: 32px; font-weight: 300; color: var(--text-muted); margin-bottom: 10px; } .main-content { flex: 1; display: flex; flex-direction: column; gap: 30px; z-index: 1; } .hero-card { background: var(--card-bg); border-radius: 20px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); position: relative; overflow: hidden; } .hero-card::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: var(--primary); } .hero-text { font-size: 24px; line-height: 1.5; color: #e2e8f0; } .hero-highlight { color: var(--secondary); font-weight: bold; } /* Modes Grid */ .modes-section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .mode-card { background: rgba(255, 255, 255, 0.05); padding: 24px; border-radius: 16px; display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.3s ease; border: 1px solid transparent; } .mode-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); } .mode-card.full-width { grid-column: span 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; } .mode-icon { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #4f46e5); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .mode-card.full-width .mode-icon { margin-bottom: 0; width: 48px; height: 48px; } .mode-icon i { font-size: 32px; color: white; } .mode-title { font-size: 22px; font-weight: bold; margin-bottom: 8px; color: white; } .mode-desc { font-size: 16px; color: var(--text-muted); line-height: 1.4; } /* Feature Highlights */ .features-row { display: flex; justify-content: space-between; gap: 20px; } .feature-item { flex: 1; background: linear-gradient(180deg, rgba(34, 211, 238, 0.1) 0%, transparent 100%); border-radius: 16px; padding: 20px; border: 1px solid rgba(34, 211, 238, 0.2); text-align: center; } .feature-item h3 { font-size: 28px; color: var(--secondary); margin-bottom: 8px; font-family: var(--font-title); } .feature-item p { font-size: 16px; color: #cbd5e1; } footer { margin-top: auto; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; z-index: 1; } .stats { display: flex; gap: 30px; } .stat-item { display: flex; flex-direction: column; } .stat-num { font-size: 36px; font-weight: bold; color: white; font-family: var(--font-title); } .stat-label { font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } .cta-btn { background: var(--secondary); color: var(--bg-color); padding: 16px 32px; border-radius: 50px; font-weight: bold; font-size: 18px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; box-shadow: 0 0 20px rgba(34, 211, 238, 0.4); } /* Decorative elements */ .corner-deco { position: absolute; width: 150px; height: 150px; border: 2px solid rgba(255, 255, 255, 0.05); border-radius: 50%; top: -50px; right: -50px; } .dot-pattern { position: absolute; bottom: 20px; right: 20px; width: 100px; height: 100px; background-image: radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px); background-size: 10px 10px; opacity: 0.3; } OPEN SOURCE AI ROO CODE Your AI-Powered Dev Team An AI coding agent that runs in VS Code. Goes beyond autocomplete by reading and writing across multiple files with deep project context. code Code Mode Implement, refactor, and optimize code automatically. architecture Architect Plan systems, specs, and migrations with precision. question_answer Ask Mode Get fast answers, explanations, and docs. bug_report Debug Trace issues, add logs, isolate root causes. tune Custom Modes Build specialized modes for your team or workflow. Model Agnostic Works with 10s of models VS Code Native Extension 22.2k GitHub Stars 1.25M Installs Install Now arrow_forward

Your AI-Powered Dev Team

An AI coding agent that runs in VS Code. Goes beyond autocomplete by reading and writing across multiple files with deep project context.

Code Mode

Implement, refactor, and optimize code automatically.

Architect

Plan systems, specs, and migrations with precision.

Ask Mode

Get fast answers, explanations, and docs.

Debug

Trace issues, add logs, isolate root causes.

Custom Modes

Build specialized modes for your team or workflow.

Model Agnostic

Works with 10s of models

VS Code

Native Extension

👍 1

ROO CODE Your AI-Powered Dev Team

Model Agnostic

VS Code

🌟 智谱 GLM-5 已上线