mzaxd/agent-park
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d59c5aaee6422ef8d03280f27d9594bf5e8efbf3
agent-park/design/homepage.html
T
mzaxdandClaude 4abe6715bb feat: 优化项目网站 UI/UX 并新增项目详情组件 
- 重构首页和项目列表页布局,优化视觉层次
- 新增 ProjectDetail、ProjectSidebar、RelatedProjects 组件
- 改进项目卡片样式,增加悬停效果
- 优化标签云和搜索栏交互体验
- 更新全局样式和 Tailwind 配置

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-26 16:36:33 +08:00

346 lines
20 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 Homepage</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@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: "#FFD700", // Gold/Yellow from MotherDuck
secondary: "#ff6f00", // Orange accent
"background-light": "#F7F5F0", // Off-white beige from MotherDuck
"background-dark": "#1a1a1a", // Dark charcoal for dark mode
"surface-light": "#FFFFFF",
"surface-dark": "#262626",
"border-light": "#000000",
"border-dark": "#4a4a4a",
"text-light": "#000000",
"text-dark": "#F7F5F0",
},
fontFamily: {
display: ['"Space Mono"', "monospace"], // Monospace for headings like MotherDuck
sans: ['"Inter"', "sans-serif"],
},
boxShadow: {
'neobrutalism': '4px 4px 0px 0px rgba(0,0,0,1)',
'neobrutalism-sm': '2px 2px 0px 0px rgba(0,0,0,1)',
'neobrutalism-hover': '2px 2px 0px 0px rgba(0,0,0,1)',
}
},
},
};
</script>
<style>::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
background-color: #475569;
}.neo-border {
border: 1px solid black;
}
.dark .neo-border {
border: 1px solid #4a4a4a;
}@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(2deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.floating-shape {
animation: float 6s ease-in-out infinite;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans antialiased min-h-screen transition-colors duration-200">
<div class="bg-primary w-full py-2 px-4 border-b border-black dark:border-border-dark flex justify-center items-center text-xs font-bold font-display tracking-wide text-black">
<span>DISCOVER THE FUTURE OF AI AGENTS </span>
<span class="material-icons text-sm ml-2">arrow_forward</span>
</div>
<header class="w-full border-b border-black 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-shrink-0 flex items-center gap-2">
<span class="material-icons text-3xl text-black dark:text-primary">smart_toy</span>
<span class="font-display font-bold text-xl tracking-tight">Agent Park</span>
</div>
<nav class="hidden md:flex space-x-8 items-center">
<a class="font-display text-sm font-bold hover:text-secondary dark:hover:text-primary transition-colors" href="#">HOME</a>
<a class="font-display text-sm font-bold hover:text-secondary dark:hover:text-primary transition-colors" href="#">PROJECTS</a>
<a class="font-display text-sm font-bold hover:text-secondary dark:hover:text-primary transition-colors" href="#">BLOG</a>
<a class="font-display text-sm font-bold hover:text-secondary dark:hover:text-primary transition-colors" href="#">ABOUT</a>
</nav>
<div class="hidden md:flex items-center space-x-4">
<button class="font-display text-sm font-bold hover:opacity-70">中文 / EN</button>
<a class="bg-white dark:bg-surface-dark border border-black dark:border-white px-4 py-2 font-display text-sm font-bold shadow-neobrutalism hover:shadow-neobrutalism-hover hover:translate-x-[2px] hover:translate-y-[2px] transition-all" href="#">
SUBMIT PROJECT
</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-text-light dark:text-text-dark hover:text-gray-600 focus:outline-none">
<span class="material-icons">menu</span>
</button>
</div>
</div>
</div>
</header>
<main class="relative overflow-hidden">
<div class="absolute top-20 left-10 w-24 h-24 border border-black dark:border-gray-600 rounded-full opacity-20 floating-shape hidden lg:block"></div>
<div class="absolute top-40 right-20 w-32 h-20 border border-black dark:border-gray-600 rounded-[2rem] transform -rotate-12 opacity-20 floating-shape hidden lg:block" style="animation-delay: 1s;"></div>
<section class="max-w-4xl mx-auto px-4 py-20 text-center relative z-10">
<h1 class="font-display text-5xl md:text-7xl font-bold mb-6 tracking-tight leading-tight">
AI PROJECT <br class="hidden md:block"/> NAVIGATOR
</h1>
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-10 max-w-2xl mx-auto font-sans">
Discover and explore high-quality AI projects from across the web. Curated for developers and enthusiasts.
</p>
<div class="max-w-2xl mx-auto relative group">
<div class="absolute -inset-1 bg-black dark:bg-primary rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-200"></div>
<div class="relative flex items-center">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-icons text-gray-400">search</span>
</div>
<input class="block w-full pl-12 pr-4 py-4 bg-surface-light dark:bg-surface-dark border-2 border-black dark:border-gray-600 text-text-light dark:text-text-dark placeholder-gray-500 focus:ring-0 focus:border-black dark:focus:border-primary font-display shadow-neobrutalism transition-all" placeholder="Search AI projects..." type="text"/>
<button class="absolute inset-y-2 right-2 px-4 bg-primary text-black font-bold font-display text-sm border border-black hover:bg-yellow-400 transition-colors">
SEARCH
</button>
</div>
</div>
</section>
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
<h2 class="font-display text-xl font-bold mb-6 border-b-2 border-black dark:border-gray-700 pb-2 inline-block">BROWSE BY TAGS</h2>
<div class="flex flex-wrap gap-3">
<a class="px-4 py-2 bg-white dark:bg-surface-dark border border-black dark:border-gray-500 font-display text-sm font-bold hover:bg-primary hover:text-black transition-colors shadow-neobrutalism-sm" href="#">
Coding Assistant <span class="ml-1 opacity-60 text-xs">2</span>
</a>
<a class="px-4 py-2 bg-white dark:bg-surface-dark border border-black dark:border-gray-500 font-display text-sm font-bold hover:bg-primary hover:text-black transition-colors shadow-neobrutalism-sm" href="#">
Chat AI <span class="ml-1 opacity-60 text-xs">2</span>
</a>
<a class="px-4 py-2 bg-white dark:bg-surface-dark border border-black dark:border-gray-500 font-display text-sm font-bold hover:bg-primary hover:text-black transition-colors shadow-neobrutalism-sm" href="#">
Data Analysis <span class="ml-1 opacity-60 text-xs">4</span>
</a>
<a class="px-4 py-2 bg-white dark:bg-surface-dark border border-black dark:border-gray-500 font-display text-sm font-bold hover:bg-primary hover:text-black transition-colors shadow-neobrutalism-sm" href="#">
Image Gen <span class="ml-1 opacity-60 text-xs">2</span>
</a>
<a class="px-4 py-2 bg-white dark:bg-surface-dark border border-black dark:border-gray-500 font-display text-sm font-bold hover:bg-primary hover:text-black transition-colors shadow-neobrutalism-sm" href="#">
Automation <span class="ml-1 opacity-60 text-xs">1</span>
</a>
<a class="px-4 py-2 bg-white dark:bg-surface-dark border border-black dark:border-gray-500 font-display text-sm font-bold hover:bg-primary hover:text-black transition-colors shadow-neobrutalism-sm" href="#">
LLMs <span class="ml-1 opacity-60 text-xs">8</span>
</a>
</div>
</section>
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-24">
<div class="flex items-end justify-between mb-8">
<h2 class="font-display text-3xl font-bold">FEATURED PROJECTS</h2>
<a class="hidden md:flex items-center font-display text-sm font-bold hover:underline" href="#">
VIEW ALL <span class="material-icons text-sm ml-1">arrow_forward</span>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="bg-white dark:bg-surface-dark border-2 border-black dark:border-gray-600 p-6 shadow-neobrutalism hover:shadow-neobrutalism-hover hover:-translate-y-1 transition-all duration-200 flex flex-col h-full">
<div class="flex justify-between items-start mb-4">
<h3 class="font-display text-2xl font-bold">n8n</h3>
<span class="material-icons text-gray-400">auto_awesome</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow font-sans leading-relaxed">
Open-source workflow automation tool. Connect various services and APIs through a visual interface to build complex automations without code.
</p>
<div class="mt-auto">
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Automation</span>
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Workflow</span>
</div>
<a class="inline-flex items-center font-display font-bold text-sm hover:text-secondary dark:hover:text-primary group" href="#">
VIEW DETAILS
<span class="material-icons text-sm ml-1 transform group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
</article>
<article class="bg-white dark:bg-surface-dark border-2 border-black dark:border-gray-600 p-6 shadow-neobrutalism hover:shadow-neobrutalism-hover hover:-translate-y-1 transition-all duration-200 flex flex-col h-full">
<div class="flex justify-between items-start mb-4">
<h3 class="font-display text-2xl font-bold">Stable Diffusion</h3>
<span class="material-icons text-gray-400">image</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow font-sans leading-relaxed">
Open-source image generation model. Supports local deployment and custom training, enabling powerful creative workflows.
</p>
<div class="mt-auto">
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Image Gen</span>
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Open Source</span>
</div>
<a class="inline-flex items-center font-display font-bold text-sm hover:text-secondary dark:hover:text-primary group" href="#">
VIEW DETAILS
<span class="material-icons text-sm ml-1 transform group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
</article>
<article class="bg-white dark:bg-surface-dark border-2 border-black dark:border-gray-600 p-6 shadow-neobrutalism hover:shadow-neobrutalism-hover hover:-translate-y-1 transition-all duration-200 flex flex-col h-full">
<div class="flex justify-between items-start mb-4">
<h3 class="font-display text-2xl font-bold">Midjourney</h3>
<span class="material-icons text-gray-400">palette</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow font-sans leading-relaxed">
Powerful AI image generation tool. Create exquisite images through text descriptions with industry-leading artistic quality.
</p>
<div class="mt-auto">
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Image Gen</span>
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Art</span>
</div>
<a class="inline-flex items-center font-display font-bold text-sm hover:text-secondary dark:hover:text-primary group" href="#">
VIEW DETAILS
<span class="material-icons text-sm ml-1 transform group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
</article>
<article class="bg-white dark:bg-surface-dark border-2 border-black dark:border-gray-600 p-6 shadow-neobrutalism hover:shadow-neobrutalism-hover hover:-translate-y-1 transition-all duration-200 flex flex-col h-full">
<div class="flex justify-between items-start mb-4">
<h3 class="font-display text-2xl font-bold">ChatGPT</h3>
<span class="material-icons text-gray-400">chat</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow font-sans leading-relaxed">
Large language model developed by OpenAI. Supports conversation, writing, coding, and a wide variety of tasks.
</p>
<div class="mt-auto">
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Chat AI</span>
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Coding Assistant</span>
</div>
<a class="inline-flex items-center font-display font-bold text-sm hover:text-secondary dark:hover:text-primary group" href="#">
VIEW DETAILS
<span class="material-icons text-sm ml-1 transform group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
</article>
<article class="bg-white dark:bg-surface-dark border-2 border-black dark:border-gray-600 p-6 shadow-neobrutalism hover:shadow-neobrutalism-hover hover:-translate-y-1 transition-all duration-200 flex flex-col h-full">
<div class="flex justify-between items-start mb-4">
<h3 class="font-display text-2xl font-bold">Claude</h3>
<span class="material-icons text-gray-400">psychology</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow font-sans leading-relaxed">
AI assistant developed by Anthropic. Excels at analysis, writing, and coding tasks with a focus on safety and reliability.
</p>
<div class="mt-auto">
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Chat AI</span>
<span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-mono border border-black dark:border-gray-500">Analysis</span>
</div>
<a class="inline-flex items-center font-display font-bold text-sm hover:text-secondary dark:hover:text-primary group" href="#">
VIEW DETAILS
<span class="material-icons text-sm ml-1 transform group-hover:translate-x-1 transition-transform">arrow_forward</span>
</a>
</div>
</article>
<article class="bg-primary border-2 border-black dark:border-gray-600 p-6 shadow-neobrutalism hover:shadow-neobrutalism-hover hover:-translate-y-1 transition-all duration-200 flex flex-col h-full justify-center items-center text-center">
<div class="bg-white p-4 rounded-full border border-black mb-4">
<span class="material-icons text-3xl text-black">add</span>
</div>
<h3 class="font-display text-2xl font-bold text-black mb-2">Submit Your Project</h3>
<p class="text-black mb-6 font-sans text-sm px-4">
Have an AI tool worth sharing? Add it to Agent Park.
</p>
<a class="bg-black text-white px-6 py-2 font-display text-sm font-bold border border-black hover:bg-white hover:text-black transition-colors" href="#">
SUBMIT NOW
</a>
</article>
</div>
<div class="mt-8 text-center md:hidden">
<a class="inline-flex items-center font-display text-sm font-bold border-b-2 border-black dark:border-white pb-1" href="#">
VIEW ALL PROJECTS <span class="material-icons text-sm ml-1">arrow_forward</span>
</a>
</div>
</section>
<section class="border-t-2 border-black dark:border-gray-600">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="bg-primary p-12 md:p-20 border-b md:border-b-0 md:border-r-2 border-black dark:border-gray-600 flex flex-col justify-center">
<h2 class="font-display text-4xl font-bold text-black mb-4">STAY UPDATED</h2>
<p class="font-sans text-black mb-8 max-w-md">
Get the latest AI tools and trends delivered straight to your inbox. No spam, just intelligence.
</p>
<form class="space-y-4 max-w-md">
<input class="w-full bg-background-light border border-black p-3 font-display text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-black" placeholder="E-mail" type="email"/>
<div class="flex items-center gap-2">
<input class="border-black text-black focus:ring-0" id="consent" type="checkbox"/>
<label class="text-xs font-bold font-display text-black" for="consent">Subscribe to Agent Park updates</label>
</div>
<button class="bg-white text-black font-display font-bold py-3 px-8 border border-black shadow-neobrutalism hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none transition-all">
SUBSCRIBE
</button>
</form>
</div>
<div class="bg-background-light dark:bg-background-dark p-12 md:p-20 relative overflow-hidden flex items-center justify-center">
<div class="relative w-64 h-64">
<div class="absolute inset-0 border-2 border-black dark:border-gray-500 bg-white dark:bg-surface-dark transform rotate-3"></div>
<div class="absolute inset-0 border-2 border-black dark:border-gray-500 bg-primary transform -rotate-3 translate-x-4 translate-y-4 opacity-80 mix-blend-multiply dark:mix-blend-normal dark:opacity-50"></div>
<div class="absolute inset-0 flex items-center justify-center z-10">
<span class="material-icons text-8xl text-black dark:text-white">rocket_launch</span>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-background-light dark:bg-background-dark border-t border-black dark:border-gray-700 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
<div>
<h4 class="font-display font-bold text-lg mb-4">Agent Park</h4>
<ul class="space-y-2 text-sm font-sans 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-lg mb-4">Resources</h4>
<ul class="space-y-2 text-sm font-sans 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-lg mb-4">Legal</h4>
<ul class="space-y-2 text-sm font-sans text-gray-600 dark:text-gray-400">
<li><a class="hover:text-black dark:hover:text-white" href="#">Privacy Policy</a></li>
<li><a class="hover:text-black dark:hover:text-white" href="#">Terms of Service</a></li>
</ul>
</div>
<div>
<h4 class="font-display font-bold text-lg mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a class="w-10 h-10 border border-black dark:border-gray-500 flex items-center justify-center hover:bg-primary hover:text-black transition-colors" href="#">
<span class="font-display font-bold">X</span>
</a>
<a class="w-10 h-10 border border-black dark:border-gray-500 flex items-center justify-center hover:bg-primary hover:text-black transition-colors" href="#">
<span class="font-display font-bold">Li</span>
</a>
<a class="w-10 h-10 border border-black dark:border-gray-500 flex items-center justify-center hover:bg-primary hover:text-black transition-colors" href="#">
<span class="font-display font-bold">Gh</span>
</a>
</div>
</div>
</div>
<div class="border-t border-black dark:border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-sm text-gray-500 font-display">© 2025 Agent Park. All rights reserved.</p>
<div class="mt-4 md:mt-0 font-display text-sm font-bold">
DESIGNED FOR AI BUILDERS
</div>
</div>
</div>
</footer>
</body></html>
Reference in New Issue View Git Blame Copy Permalink