mzaxd/agent-park
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
269c4a95730836a43732bd85a9bfcaabca15f56a
agent-park/design/detail.html
T
mzaxdandClaude cae5686d2d feat: 添加 GitHub 统计数据展示功能 
新增 GitHub 统计卡片和徽章组件，在项目卡片、详情页和侧边栏中展示 GitHub stars、forks 等统计数据

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-30 14:14:02 +08:00

434 lines
27 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Agent Park - Project Details</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&amp;family=Inter:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#FFE100", // The vibrant yellow seen in headers and buttons
"primary-dark": "#e5cb00",
"background-light": "#F6F3EB", // Light beige background
"background-dark": "#121212", // Dark mode background
"surface-light": "#FFFFFF",
"surface-dark": "#1E1E1E",
"text-light": "#000000",
"text-dark": "#E0E0E0",
"border-light": "#000000",
"border-dark": "#333333",
},
fontFamily: {
display: ["Space Mono", "monospace"], // For headers and buttons
body: ["Inter", "sans-serif"], // For body text
},
borderRadius: {
DEFAULT: "0px", // Sharp corners generally seen in the design
'md': "2px",
},
boxShadow: {
'brutal': '4px 4px 0px 0px rgba(0,0,0,1)', // Brutalist shadow style
'brutal-hover': '2px 2px 0px 0px rgba(0,0,0,1)',
'brutal-dark': '4px 4px 0px 0px rgba(255,255,255,0.2)',
}
},
},
};
</script>
<style>::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #94a3b8;
}
.dark ::-webkit-scrollbar-thumb {
background-color: #475569;
}.prose h2, .prose h3 {
font-family: 'Space Mono', monospace;
font-weight: 700;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-body min-h-screen flex flex-col transition-colors duration-200">
<div class="bg-primary text-black text-xs font-bold py-2 text-center uppercase tracking-widest border-b border-border-light dark:border-border-dark font-display">
Discover the future of AI Agents <span class="material-icons text-sm align-middle ml-1">arrow_forward</span>
</div>
<nav class="border-b border-border-light dark:border-border-dark bg-background-light dark:bg-background-dark sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<a class="flex items-center gap-2 group" href="#">
<span class="material-icons text-2xl group-hover:rotate-12 transition-transform">smart_toy</span>
<span class="font-display font-bold text-lg tracking-tight">Agent Park</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a class="text-sm font-display font-bold hover:underline decoration-2 underline-offset-4" href="#">HOME</a>
<a class="text-sm font-display font-bold hover:underline decoration-2 underline-offset-4" href="#">PROJECTS</a>
<a class="text-sm font-display font-bold hover:underline decoration-2 underline-offset-4" href="#">BLOG</a>
<a class="text-sm font-display font-bold hover:underline decoration-2 underline-offset-4" href="#">ABOUT</a>
</div>
<div class="hidden md:flex items-center gap-4">
<div class="text-xs font-display font-bold border-r border-border-light dark:border-border-dark pr-4 mr-2">
<span class="cursor-pointer hover:text-gray-600 dark:hover:text-gray-300">中文</span> / <span class="cursor-pointer hover:text-gray-600 dark:hover:text-gray-300">EN</span>
</div>
<a class="font-display text-xs font-bold uppercase border border-border-light dark:border-white px-4 py-2 hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-all shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,1)] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none" href="#">
Submit Project
</a>
</div>
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<span class="material-icons">menu</span>
</button>
</div>
</div>
</div>
</nav>
<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="mb-8">
<a class="inline-flex items-center text-sm font-display font-bold text-gray-500 hover:text-black dark:text-gray-400 dark:hover:text-white transition-colors group" href="#">
<span class="material-icons text-base mr-1 group-hover:-translate-x-1 transition-transform">arrow_back</span>
BACK TO PROJECTS
</a>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
<div class="lg:col-span-8">
<header class="mb-10 relative">
<div class="absolute -top-10 -right-10 w-24 h-24 border border-black dark:border-white opacity-20 rounded-full hidden md:block" style="border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;"></div>
<h1 class="font-display text-4xl md:text-6xl font-bold mb-6 leading-tight uppercase relative z-10">
AutoGPT X
</h1>
<div class="flex flex-wrap items-center gap-4 text-sm font-mono text-gray-600 dark:text-gray-400 mb-8 pb-8 border-b border-gray-300 dark:border-gray-700">
<div class="flex items-center gap-2">
<span class="material-icons text-base">calendar_today</span>
<span>Added Oct 24, 2023</span>
</div>
<span class="hidden sm:inline text-gray-300">|</span>
<div class="flex items-center gap-2">
<span class="material-icons text-base">category</span>
<span>Autonomous Agent</span>
</div>
<span class="hidden sm:inline text-gray-300">|</span>
<div class="flex items-center gap-2">
<span class="material-icons text-base">code</span>
<span>Open Source</span>
</div>
</div>
<div class="flex flex-wrap gap-3 mb-8">
<span class="px-3 py-1 border border-black dark:border-gray-500 text-xs font-display font-bold uppercase bg-white dark:bg-gray-800">Python</span>
<span class="px-3 py-1 border border-black dark:border-gray-500 text-xs font-display font-bold uppercase bg-white dark:bg-gray-800">LLM</span>
<span class="px-3 py-1 border border-black dark:border-gray-500 text-xs font-display font-bold uppercase bg-white dark:bg-gray-800">Automation</span>
<span class="px-3 py-1 border border-black dark:border-gray-500 text-xs font-display font-bold uppercase bg-white dark:bg-gray-800">GPT-4</span>
</div>
<div class="relative w-full aspect-video border-2 border-black dark:border-gray-600 bg-gray-100 dark:bg-gray-800 mb-10 overflow-hidden shadow-brutal dark:shadow-none">
<img alt="AutoGPT X Interface Abstract Visualization" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAvvUwvvv9eQigRJYV_SkkRfdJYe8PSpnsqNqriFIrtYb3ZxrfwipLWMSn-m8oQB9oT1LuynQY8q6o3m_GOFZGK0yM2nLxapj0EbrWKj49NN3JdO6I65VMXvnlM56uRAHXh-JKoIaFFlQRUg0hlhLlc7Nc_UfniYNUpu_0CX6OPsJwYhIRaAMeqjgLuWTfLA6cKNtkixtbNr9K7AI5puEIJjPLs7tQuUC5_7NjEiFSbBPFg_pO95-buoa59aO4_Qafu600RkDE9lDQ"/>
<div class="absolute bottom-4 right-4 bg-white dark:bg-black px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">v2.0.1 Stable</div>
</div>
</header>
<article class="prose prose-lg dark:prose-invert max-w-none prose-headings:font-display prose-a:text-blue-600 dark:prose-a:text-blue-400 hover:prose-a:text-blue-800 dark:hover:prose-a:text-blue-300 prose-img:border-2 prose-img:border-black dark:prose-img:border-gray-600 prose-img:shadow-brutal dark:prose-img:shadow-none">
<p class="lead font-display text-xl mb-8">
AutoGPT X is an experimental open-source application showcasing the capabilities of the GPT-4 language model. This program, driven by GPT-4, chains together LLM "thoughts", to autonomously achieve whatever goal you set.
</p>
<h2>Overview</h2>
<p>
Unlike typical AI chatbots that require constant prompting, AutoGPT X takes a single goal and breaks it down into sub-tasks. It utilizes the internet for searching and gathering information, manages long-term and short-term memory, and can execute code or scripts to accomplish complex workflows.
</p>
<p>
As one of the first examples of GPT-4 running fully autonomously, AutoGPT X pushes the boundaries of what is possible with AI agents. It serves as a framework for building sophisticated AI assistants capable of performing real-world tasks with minimal human intervention.
</p>
<h3>Key Features</h3>
<ul class="list-disc pl-6 space-y-2 marker:text-black dark:marker:text-white">
<li><strong>Internet Access:</strong> Searches and gathers information autonomously.</li>
<li><strong>Long-Term Memory:</strong> Retains context over extended sessions.</li>
<li><strong>GPT-4 Powered:</strong> Leverages the reasoning capabilities of state-of-the-art LLMs.</li>
<li><strong>File Management:</strong> Can read and write files to your local system.</li>
<li><strong>Extensible:</strong> Plugin system allows for custom integrations.</li>
</ul>
<h3>Getting Started</h3>
<p>
To install AutoGPT X, you will need Python 3.10 or later. Clone the repository and install the dependencies:
</p>
<pre class="bg-gray-100 dark:bg-gray-800 border border-black dark:border-gray-600 p-4 font-mono text-sm overflow-x-auto"><code>git clone https://github.com/agentpark/autogpt-x.git
cd autogpt-x
pip install -r requirements.txt
python main.py</code></pre>
<blockquote>
"The goal of AutoGPT X is to make GPT-4 fully autonomous."
</blockquote>
<h2>Use Cases</h2>
<p>
Developers and enthusiasts are using AutoGPT X for a variety of tasks, including:
</p>
<ul class="list-disc pl-6 space-y-2 marker:text-black dark:marker:text-white">
<li>Automated market research and report generation.</li>
<li>Code debugging and autonomous software development.</li>
<li>Personal assistant tasks like booking flights or ordering food.</li>
<li>Content creation and social media management.</li>
</ul>
</article>
<div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center gap-6">
<div class="flex gap-4">
<button class="p-2 border border-black dark:border-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" title="Share on X">
<span class="material-icons text-lg">share</span>
</button>
<button class="p-2 border border-black dark:border-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" title="Copy Link">
<span class="material-icons text-lg">link</span>
</button>
</div>
<div class="flex items-center gap-2">
<span class="text-sm font-display font-bold text-gray-500">DID THIS AGENT FIX THIS?</span>
<button class="px-4 py-2 bg-primary text-black font-display font-bold text-xs uppercase border border-black hover:bg-yellow-400 transition-colors shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px]">Yes, it rocks</button>
</div>
</div>
</div>
<aside class="lg:col-span-4 space-y-8">
<div class="bg-white dark:bg-surface-dark border-2 border-black dark:border-gray-600 p-6 shadow-brutal dark:shadow-brutal-dark">
<h3 class="font-display font-bold text-lg mb-6 uppercase border-b-2 border-primary pb-2 inline-block">Project Links</h3>
<div class="space-y-4">
<a class="flex items-center justify-between group p-3 border border-gray-200 dark:border-gray-700 hover:border-black dark:hover:border-white transition-colors bg-gray-50 dark:bg-gray-800" href="#">
<div class="flex items-center gap-3">
<span class="material-icons">language</span>
<span class="font-bold text-sm">Official Website</span>
</div>
<span class="material-icons text-sm group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
<a class="flex items-center justify-between group p-3 border border-gray-200 dark:border-gray-700 hover:border-black dark:hover:border-white transition-colors bg-gray-50 dark:bg-gray-800" href="#">
<div class="flex items-center gap-3">
<span class="material-icons">code</span>
<span class="font-bold text-sm">GitHub Repo</span>
</div>
<span class="material-icons text-sm group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
<a class="flex items-center justify-between group p-3 border border-gray-200 dark:border-gray-700 hover:border-black dark:hover:border-white transition-colors bg-gray-50 dark:bg-gray-800" href="#">
<div class="flex items-center gap-3">
<span class="material-icons">description</span>
<span class="font-bold text-sm">Documentation</span>
</div>
<span class="material-icons text-sm group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
<div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
<!-- 方案A: GitHub 专用统计卡片 - 分离 GitHub 数据和其他元数据 -->
<div class="mb-6">
<div class="bg-gray-100 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 text-black dark:text-white p-4">
<h3 class="font-display text-xs uppercase tracking-widest mb-3 flex items-center gap-2">
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 16 16">
<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-3.14-.95-3.14-.95-.43-.92-.1-1.25-.1-1.25.2-.05.41.08.95.08 2.76 1.89 3.78 1.89 3.78 1.69 2.88 4.44 2.05 5.53-.16.47-.86-.94-1.25-1.14-.42-.26-.89-.04-1.25.23-.89.65-2.18.95-3.3 1.01-.22.01-.44.05-.66.12-.26.11-.53.03-.72-.13-.22-.18-.44-.49-.44-.49-.25-.95-.08-1.25.23-.72.72-1.87 2.05-2.84 2.85-.13.11-.24.26-.24.42 0 .33.27.76.76.76 1.16 0 .87.72 1.96 2.05 2.4 2.82.2.06.43.09.65.05.31-.06.6-.17.87-.33.26-.16.48-.36.63-.57.23-.21.47-.44.64-.67.19-.26.35-.54.48-.83.11-.26.17-.54.17-.82 0-.47-.27-.91-.66-1.1-.67-.34-1.45-.51-2.32-.51-.88 0-1.67.18-2.35.53-.26.13-.5.25-.73.36-.22.1-.42.23-.58.37-.14.13-.26.26-.34.4-.07.14-.1.29-.1.44 0 .18.09.34.25.46.13.11.29.18.46.18.19 0 .38-.06.55-.17.15-.11.28-.24.39-.39.1-.15.18-.31.23-.48.05-.18.06-.36.06-.54 0-.3-.17-.57-.44-.74-.23-.17-.5-.26-.78-.26-.28 0-.55.09-.79.26-.23.17-.41.39-.54.64-.12.24-.17.5-.17.77 0 .26.17.5.43.67.25.17.57.26.89.26.31 0 .6-.09.85-.26.23-.17.41-.39.54-.64.12-.24.18-.5.18-.77 0-.26-.17-.5-.43-.67-.26-.17-.57-.26-.89-.26-.31 0-.6.09-.85.26-.23.17-.41.39-.54.64-.12.24-.17.5-.17.77zM8 15c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"/>
</svg>
GitHub Statistics
</h3>
<!-- 使用 Shields.io 徽章网格显示所有 GitHub 实时数据 -->
<div class="grid grid-cols-2 gap-3">
<a href="https://github.com/agentpark/autogpt-x/stargazers" class="group" title="View stars on GitHub">
<div class="flex items-center gap-2 hover:bg-white dark:hover:bg-black hover:bg-opacity-50 p-2 rounded transition-colors">
<svg class="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
</svg>
<div>
<div class="text-[9px] uppercase font-mono text-gray-500">Stars</div>
<div class="font-display font-bold text-lg">142k</div>
</div>
</div>
</a>
<a href="https://github.com/agentpark/autogpt-x/network/members" class="group" title="View forks on GitHub">
<div class="flex items-center gap-2 hover:bg-white dark:hover:bg-black hover:bg-opacity-50 p-2 rounded transition-colors">
<svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 16 16">
<path d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"/>
</svg>
<div>
<div class="text-[9px] uppercase font-mono text-gray-500">Forks</div>
<div class="font-display font-bold text-lg">34k</div>
</div>
</div>
</a>
<a href="https://github.com/agentpark/autogpt-x/issues" class="group" title="View issues on GitHub">
<div class="flex items-center gap-2 hover:bg-white dark:hover:bg-black hover:bg-opacity-50 p-2 rounded transition-colors">
<svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/>
<path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"/>
</svg>
<div>
<div class="text-[9px] uppercase font-mono text-gray-500">Issues</div>
<div class="font-display font-bold text-lg">892</div>
</div>
</div>
</a>
<a href="https://github.com/agentpark/autogpt-x/blob/main/LICENSE" class="group" title="View license on GitHub">
<div class="flex items-center gap-2 hover:bg-white dark:hover:bg-black hover:bg-opacity-50 p-2 rounded transition-colors">
<svg class="w-4 h-4 text-purple-600" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 1.75c4.556 0 8.25 3.694 8.25 8.25 0 1.356-.344 2.647-.956 3.78-.556.057-1.072.25-1.444.525-.436.32-.688.742-.688 1.25 0 .469.253.891.688 1.25.47.4.869.496 1.444.525 2.09-.613 3.325-1.438 4.188-.47.48-1.088.79-1.5.79-.406-.006-.738-.274-.96-.638-.31-.494-.672-.59-1.031-.59-.25 0-.476.088-.656.25-.182.163-.39.25-.625.25-.238 0-.447-.087-.625-.25-.178-.164-.395-.25-.641-.25-.356 0-.722.096-1.031.59-.413.584-.554.29-1.5-.79-.612.313-1.156.48-1.625.525-.47-.22-.906-.25-1.444-.525-.612-1.133-.956-3.78-.956-4.556 0-8.25 3.694-8.25 8.25zM4.5 9a.5.5 0 01.5-.5h6a.5.5 0 010 1h-6a.5.5 0 01-.5-.5z"/>
</svg>
<div>
<div class="text-[9px] uppercase font-mono text-gray-500">License</div>
<div class="font-display font-bold text-lg">MIT</div>
</div>
</div>
</a>
</div>
<div class="mt-3 pt-3 border-t border-gray-300 dark:border-gray-600">
<div class="flex items-center justify-between text-xs font-mono">
<span class="text-gray-500">Last commit</span>
<span class="font-display font-bold">2 days ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-primary border-2 border-black p-6 relative overflow-hidden shadow-brutal dark:shadow-none group cursor-pointer hover:bg-yellow-400 transition-colors">
<div class="absolute top-0 right-0 w-20 h-20 bg-white opacity-20 transform rotate-45 translate-x-10 -translate-y-10"></div>
<div class="absolute bottom-0 left-0 w-16 h-16 bg-black opacity-10 rounded-full transform -translate-x-8 translate-y-8"></div>
<div class="relative z-10 text-center">
<div class="w-12 h-12 bg-white rounded-full border-2 border-black flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
<span class="material-icons text-2xl">rocket_launch</span>
</div>
<h3 class="font-display font-bold text-xl mb-2">Build Your Own Agent?</h3>
<p class="text-sm font-medium mb-6">Start using our API to build custom agents in minutes.</p>
<button class="w-full bg-black text-white font-display font-bold py-3 text-sm uppercase hover:bg-gray-800 transition-colors shadow-none">
Get Started Now
</button>
</div>
</div>
<div class="sticky top-24 bg-background-light dark:bg-background-dark border border-gray-300 dark:border-gray-700 p-6 hidden lg:block">
<h3 class="font-display font-bold text-sm uppercase tracking-widest mb-4 text-gray-500 dark:text-gray-400">On this page</h3>
<ul class="space-y-3 text-sm border-l-2 border-gray-200 dark:border-gray-700 pl-4">
<li><a class="text-black dark:text-white font-bold border-l-2 border-black dark:border-white -ml-[18px] pl-4 block" href="#">Overview</a></li>
<li><a class="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors block" href="#">Key Features</a></li>
<li><a class="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors block" href="#">Getting Started</a></li>
<li><a class="text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors block" href="#">Use Cases</a></li>
</ul>
</div>
</aside>
</div>
<section class="mt-20 pt-12 border-t border-black dark:border-gray-700">
<div class="flex justify-between items-end mb-8">
<h2 class="font-display text-3xl font-bold uppercase">Related Projects</h2>
<a class="font-display text-xs font-bold uppercase hover:underline flex items-center gap-1 group" href="#">
View All <span class="material-icons text-sm group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="border-2 border-black dark:border-gray-600 p-6 bg-white dark:bg-surface-dark hover:shadow-brutal hover:-translate-y-1 transition-all duration-200 cursor-pointer flex flex-col h-full dark:hover:shadow-brutal-dark">
<div class="flex justify-between items-start mb-4">
<h3 class="font-display text-xl font-bold">BabyAGI</h3>
<span class="material-icons text-gray-400">psychology</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-6 flex-grow line-clamp-3">
Task-driven autonomous agent that uses OpenAI and Pinecone APIs to create, prioritize, and execute tasks.
</p>
<div class="flex gap-2 mb-6">
<span class="text-[10px] uppercase font-bold border border-gray-300 dark:border-gray-600 px-2 py-1">Python</span>
<span class="text-[10px] uppercase font-bold border border-gray-300 dark:border-gray-600 px-2 py-1">Task</span>
</div>
<div class="mt-auto pt-4 border-t border-gray-100 dark:border-gray-700">
<span class="text-xs font-display font-bold uppercase flex items-center group">
View Details <span class="material-icons text-sm ml-1 group-hover:translate-x-1 transition-transform">arrow_forward</span>
</span>
</div>
</div>
<div class="border-2 border-black dark:border-gray-600 p-6 bg-white dark:bg-surface-dark hover:shadow-brutal hover:-translate-y-1 transition-all duration-200 cursor-pointer flex flex-col h-full dark:hover:shadow-brutal-dark">
<div class="flex justify-between items-start mb-4">
<h3 class="font-display text-xl font-bold">LangChain</h3>
<span class="material-icons text-gray-400">link</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-6 flex-grow line-clamp-3">
Building applications with LLMs through composability. The standard framework for chaining LLM capabilities.
</p>
<div class="flex gap-2 mb-6">
<span class="text-[10px] uppercase font-bold border border-gray-300 dark:border-gray-600 px-2 py-1">Framework</span>
<span class="text-[10px] uppercase font-bold border border-gray-300 dark:border-gray-600 px-2 py-1">Python</span>
</div>
<div class="mt-auto pt-4 border-t border-gray-100 dark:border-gray-700">
<span class="text-xs font-display font-bold uppercase flex items-center group">
View Details <span class="material-icons text-sm ml-1 group-hover:translate-x-1 transition-transform">arrow_forward</span>
</span>
</div>
</div>
<div class="border-2 border-black dark:border-gray-600 p-6 bg-white dark:bg-surface-dark hover:shadow-brutal hover:-translate-y-1 transition-all duration-200 cursor-pointer flex flex-col h-full dark:hover:shadow-brutal-dark">
<div class="flex justify-between items-start mb-4">
<h3 class="font-display text-xl font-bold">GodMode</h3>
<span class="material-icons text-gray-400">bolt</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-6 flex-grow line-clamp-3">
A dedicated web platform to access the powers of AutoGPT and BabyAGI directly from your browser.
</p>
<div class="flex gap-2 mb-6">
<span class="text-[10px] uppercase font-bold border border-gray-300 dark:border-gray-600 px-2 py-1">Web</span>
<span class="text-[10px] uppercase font-bold border border-gray-300 dark:border-gray-600 px-2 py-1">UI</span>
</div>
<div class="mt-auto pt-4 border-t border-gray-100 dark:border-gray-700">
<span class="text-xs font-display font-bold uppercase flex items-center group">
View Details <span class="material-icons text-sm ml-1 group-hover:translate-x-1 transition-transform">arrow_forward</span>
</span>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-background-light dark:bg-background-dark border-t border-border-light dark:border-border-dark py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
<div class="col-span-1 md:col-span-1">
<a class="flex items-center gap-2 mb-4" href="#">
<span class="material-icons text-2xl">smart_toy</span>
<span class="font-display font-bold text-lg tracking-tight">Agent Park</span>
</a>
<p class="text-sm text-gray-600 dark:text-gray-400">
Discover and explore high-quality AI projects from across the web. Curated for developers and enthusiasts.
</p>
</div>
<div>
<h4 class="font-display font-bold text-sm uppercase mb-4">Agent Park</h4>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><a class="hover:text-black dark:hover:text-white" href="#">About Us</a></li>
<li><a class="hover:text-black dark:hover:text-white" href="#">Contact</a></li>
<li><a class="hover:text-black dark:hover:text-white" href="#">Careers</a></li>
</ul>
</div>
<div>
<h4 class="font-display font-bold text-sm uppercase mb-4">Resources</h4>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><a class="hover:text-black dark:hover:text-white" href="#">Blog</a></li>
<li><a class="hover:text-black dark:hover:text-white" href="#">Newsletter</a></li>
<li><a class="hover:text-black dark:hover:text-white" href="#">Documentation</a></li>
</ul>
</div>
<div>
<h4 class="font-display font-bold text-sm uppercase mb-4">Follow Us</h4>
<div class="flex gap-2">
<a class="w-8 h-8 flex items-center justify-center border border-gray-400 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors font-display font-bold" href="#">X</a>
<a class="w-8 h-8 flex items-center justify-center border border-gray-400 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors font-display font-bold" href="#">Li</a>
<a class="w-8 h-8 flex items-center justify-center border border-gray-400 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-colors font-display font-bold" href="#">Gh</a>
</div>
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-xs font-mono text-gray-500 uppercase">
<p>© 2025 Agent Park. All rights reserved.</p>
<p>Designed for AI Builders</p>
</div>
</div>
</footer>
<script>
// Simple mobile menu toggle
const btn = document.querySelector("button.mobile-menu-button");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
// In a real scenario, this would toggle a hidden mobile menu div
alert("Mobile menu clicked (implementation simplified for this demo)");
});
</script>
</body></html>
Reference in New Issue View Git Blame Copy Permalink