release: v2.0 - 完整功能管理系统
主要功能: - 完整的Flask-Admin后台管理系统 - 网站/标签/新闻管理功能 - 用户登录认证系统 - 科技感/未来风UI设计 - 标签分类系统（取代传统分类） - 详情页面展示 - 数据库迁移脚本 - 书签导入解析工具 技术栈: - Flask + SQLAlchemy - Flask-Admin管理界面 - Bootstrap 4响应式设计 - 用户认证与权限管理 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jowe
357
stitch_ai_tool_detail_page/ai_tool_home_page/code.html
Normal file
357
stitch_ai_tool_detail_page/ai_tool_home_page/code.html
Normal file
@@ -0,0 +1,357 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ZJPB - AI Tool Discovery</title>
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#0ea5e9", // Sky Blue - Fresh and Techy
|
||||
secondary: "#8b5cf6", // Violet - Softened purple
|
||||
"page-bg": "#f8fafc", // Slate 50 - Very light grey/white
|
||||
"surface": "#ffffff", // Pure white
|
||||
"border-color": "#e2e8f0", // Slate 200 - Subtle borders
|
||||
"text-main": "#0f172a", // Slate 900 - High contrast text
|
||||
"text-muted": "#64748b", // Slate 500 - Secondary text
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Space Grotesk", "sans-serif"],
|
||||
"body": ["Noto Sans", "sans-serif"],
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-tech': 'linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%)',
|
||||
'gradient-text': 'linear-gradient(to right, #0ea5e9, #8b5cf6)',
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #0ea5e9, #a855f7);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 30px -10px rgba(14, 165, 233, 0.15);
|
||||
border-color: #0ea5e9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-page-bg text-text-main antialiased selection:bg-primary selection:text-white">
|
||||
<div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">
|
||||
<div class="fixed top-0 left-0 w-full h-96 bg-primary/10 blur-[120px] rounded-full pointer-events-none -translate-y-1/2"></div>
|
||||
<div class="fixed top-20 right-0 w-96 h-96 bg-secondary/10 blur-[100px] rounded-full pointer-events-none translate-x-1/3"></div>
|
||||
<header class="sticky top-0 z-50 w-full border-b border-solid border-border-color bg-surface/80 backdrop-blur-md">
|
||||
<div class="mx-auto flex h-16 max-w-[1440px] items-center justify-between px-6 lg:px-10">
|
||||
<div class="flex items-center gap-8">
|
||||
<a class="flex items-center gap-3 text-text-main hover:opacity-80 transition-opacity" href="#">
|
||||
<div class="flex items-center justify-center size-8 rounded-lg bg-gradient-tech text-white">
|
||||
<span class="material-symbols-outlined" style="font-size: 20px; font-weight: 700;">bolt</span>
|
||||
</div>
|
||||
<h2 class="text-text-main text-lg font-bold leading-tight tracking-tight">ZJPB</h2>
|
||||
</a>
|
||||
<nav class="hidden md:flex items-center gap-8">
|
||||
<a class="text-text-muted hover:text-primary text-sm font-medium transition-colors" href="#">Home</a>
|
||||
<a class="text-text-muted hover:text-primary text-sm font-medium transition-colors" href="#">Categories</a>
|
||||
<a class="text-text-muted hover:text-primary text-sm font-medium transition-colors" href="#">Community</a>
|
||||
<a class="text-text-muted hover:text-primary text-sm font-medium transition-colors" href="#">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="hidden lg:flex items-center bg-slate-100 border border-transparent rounded-full h-10 px-4 w-64 focus-within:border-primary focus-within:bg-white transition-all">
|
||||
<span class="material-symbols-outlined text-slate-400" style="font-size: 20px;">search</span>
|
||||
<input class="bg-transparent border-none text-text-main text-sm placeholder-slate-400 focus:ring-0 w-full ml-2" placeholder="Search AI tools..." type="text"/>
|
||||
</div>
|
||||
<button class="hidden sm:flex h-9 px-4 items-center justify-center rounded-lg text-sm font-bold text-text-muted hover:bg-slate-100 transition-colors">
|
||||
Log In
|
||||
</button>
|
||||
<button class="flex h-9 px-5 items-center justify-center rounded-lg bg-primary hover:bg-primary/90 text-white text-sm font-bold transition-colors shadow-[0_4px_14px_rgba(14,165,233,0.3)]">
|
||||
Sign Up
|
||||
</button>
|
||||
<button class="md:hidden text-text-main">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 flex flex-col items-center w-full px-6 lg:px-10 py-8">
|
||||
<div class="w-full max-w-[1200px] flex flex-col gap-10">
|
||||
<div class="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 pb-6 border-b border-border-color">
|
||||
<div class="flex flex-col gap-2 max-w-2xl">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-black tracking-tighter text-text-main mb-2">
|
||||
ZJPB - <span class="text-gradient">焦提示词</span>
|
||||
</h1>
|
||||
<p class="text-text-muted text-lg md:text-xl font-light">
|
||||
发现最新最好用的AI工具和产品. Discover the best AI tools tailored for your workflow.
|
||||
</p>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 bg-surface border border-border-color hover:border-primary text-text-main px-5 py-2.5 rounded-lg transition-all group whitespace-nowrap shadow-sm hover:shadow-md">
|
||||
<span class="material-symbols-outlined text-primary group-hover:scale-110 transition-transform">add_circle</span>
|
||||
<span class="font-bold text-sm">Submit a Tool</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-full overflow-x-auto pb-2 scrollbar-hide">
|
||||
<div class="flex gap-3 min-w-max">
|
||||
<button class="flex items-center h-9 px-5 rounded-full bg-primary text-white font-bold text-sm shadow-[0_2px_10px_rgba(14,165,233,0.3)]">
|
||||
All Tools
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-5 rounded-full bg-surface border border-border-color text-text-muted hover:text-primary hover:border-primary font-medium text-sm transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">chat</span> AI Chat
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-5 rounded-full bg-surface border border-border-color text-text-muted hover:text-primary hover:border-primary font-medium text-sm transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">image</span> Image Gen
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-5 rounded-full bg-surface border border-border-color text-text-muted hover:text-primary hover:border-primary font-medium text-sm transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">movie</span> Video
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-5 rounded-full bg-surface border border-border-color text-text-muted hover:text-primary hover:border-primary font-medium text-sm transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">edit_note</span> Writing
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-5 rounded-full bg-surface border border-border-color text-text-muted hover:text-primary hover:border-primary font-medium text-sm transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">code</span> Coding
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-5 rounded-full bg-surface border border-border-color text-text-muted hover:text-primary hover:border-primary font-medium text-sm transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">graphic_eq</span> Audio
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-5 rounded-full bg-surface border border-border-color text-text-muted hover:text-primary hover:border-primary font-medium text-sm transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">view_in_ar</span> 3D Assets
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-color bg-surface p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden shadow-sm">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="size-12 rounded-lg bg-cover bg-center shadow-md ring-1 ring-black/5" data-alt="ChatGPT logo icon green background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBStb1HsLpCc4Hlu8FzN0ecAT6pMnnu_pzF4cUUQDG6FdYLA65ua60D-3NxKDOHqkuVsgsy9ku-vUZ0_Jyc5O9Xi1NlwR5L7oC9gt_jretgJqsEeOk1dm2yo4GvB26KgmMWzpUKeCtIg1NyZDWRNJF3gfIVxF95sT29iy6tKSXsUdfVsOo-o_5kEpB3qCFKZdMo4fhOe8DVh4JnmmdZuS8z3PflupzZpru6F0QK3xL407vfIULuQ3L5NRtFdTfZs7O-elYl2FrwjJ_x');"></div>
|
||||
<div class="flex items-center justify-center size-8 rounded-full bg-slate-100 text-slate-400 group-hover:text-primary group-hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">arrow_outward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-text-main text-lg font-bold leading-tight group-hover:text-primary transition-colors">ChatGPT</h3>
|
||||
<p class="text-text-muted text-sm mt-2 line-clamp-2">OpenAI's advanced conversational model capable of understanding and generating human-like text.</p>
|
||||
</div>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-border-color">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Chat</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">NLP</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-slate-400 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>1.2M</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-color bg-surface p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden shadow-sm">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="size-12 rounded-lg bg-cover bg-center shadow-md ring-1 ring-black/5" data-alt="Midjourney logo icon blue background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBW8nuPBGShgvw9aCK5p0mKlki3EMfhi8ZZKvLTaM-QupUQDzsBx5wkIvN_Unyt30H2WHXBw5GB4Kz8gL68peWqK99Cpo6gRM-Bk3f94xWdYji9osPrreu5UMVtu2W1Rn8IyBCfPDUu3LJnbDd_viZz4nb04tliq9O_ezo8OCYMede7GZYxIxHTrEkhNBADzC2Z7KjeF-DR7fRBf4dxHYz5rJUGakf1qyEouaAlEDWMnBymOKFkQGK19UvizQiQIUeDFMGMxgL0ng_x');"></div>
|
||||
<div class="flex items-center justify-center size-8 rounded-full bg-slate-100 text-slate-400 group-hover:text-primary group-hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">arrow_outward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-text-main text-lg font-bold leading-tight group-hover:text-primary transition-colors">Midjourney</h3>
|
||||
<p class="text-text-muted text-sm mt-2 line-clamp-2">Hyper-realistic AI image generator that creates stunning visuals from text prompts.</p>
|
||||
</div>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-border-color">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Image</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Art</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-slate-400 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>850k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-color bg-surface p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden shadow-sm">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="size-12 rounded-lg bg-cover bg-center shadow-md ring-1 ring-black/5" data-alt="Jasper logo icon yellow background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAQv96KYBZ3uV5NpDJyuDzc5J-mGo3fTWcBzVv00wC062ApfHezk6XkvKI6lsad5hFopxB7Qqhbqifto971lBo_7ASfOFUvtSU-Z3omU0q4PGcmea1YR_Va7vKPBtpA1DS_uq779QNTY5oF_kjapJrp7-Nfi5tI0NfQ3kU5KOd-dwBrN2T1Md6nT1jUEeOKG3zEgmAfEYan4mQXQXpz7Ywh2ZaoFCOY0OTiJP9RAnzIYL0Tv-ywt3_r66CSTY5pyzfqqP7sUk4vegAv');"></div>
|
||||
<div class="flex items-center justify-center size-8 rounded-full bg-slate-100 text-slate-400 group-hover:text-primary group-hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">arrow_outward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-text-main text-lg font-bold leading-tight group-hover:text-primary transition-colors">Jasper AI</h3>
|
||||
<p class="text-text-muted text-sm mt-2 line-clamp-2">AI copywriter for marketing content, blog posts, and social media captions.</p>
|
||||
</div>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-border-color">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Writing</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Marketing</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-slate-400 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>300k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-color bg-surface p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden shadow-sm">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="size-12 rounded-lg bg-cover bg-center shadow-md ring-1 ring-black/5" data-alt="Runway logo icon pink background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAkmxk1Ar1KxgHHM5pKMer4rOra0KUieDAXhm9nE4sQp5WjsnGYENKmbM-EN-hRjhV7OC2ha7Go-Cl90HgfNpbgt--grIpJYKoUjgvsp0juLIDgX_fN4rKrjdkezxRU8YVJBuTaM3lWZJCptm3I6isDO10xidrChOc5kWV9SQny79KEVKENXxOJXEVT3c0m16M3JnGRTRmu-6EY8XU68-On78-7SXxLyP5TESi-ooZ2wHaOwxqJUwFb-oQyQoKAkXnzXAqGwwITBiLS');"></div>
|
||||
<div class="flex items-center justify-center size-8 rounded-full bg-slate-100 text-slate-400 group-hover:text-primary group-hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">arrow_outward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-text-main text-lg font-bold leading-tight group-hover:text-primary transition-colors">Runway Gen-2</h3>
|
||||
<p class="text-text-muted text-sm mt-2 line-clamp-2">Next-generation video creation tool that turns text into high-quality video clips.</p>
|
||||
</div>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-border-color">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Video</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Gen-AI</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-slate-400 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>420k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-color bg-surface p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden shadow-sm">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="size-12 rounded-lg bg-cover bg-center shadow-md ring-1 ring-black/5" data-alt="Copilot logo icon purple background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBki2piUPdnWstozizUU63ouakjjA3B4xN5uQs7rA84yX4NsYFIaNybtfVRy0bXUKfUBYdixo22jb3bbN6TlKindW5iQU0sJc3FF2GXS_CRpgLoNMLziOyf4rLArNmM2VoycHJ3DyrIsI8847xlO3BHrK8kyemNc9mBfaXyPnWsJ0hnF2lXfljCOcYNQTtY1qgzw5RfOHwA0NUnLwuRG53tU-mnJPPejbDyzW7YWdBnh9yTj3dnJJDOfzYiEx252wgf7Q6GBjTGrQnG');"></div>
|
||||
<div class="flex items-center justify-center size-8 rounded-full bg-slate-100 text-slate-400 group-hover:text-primary group-hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">arrow_outward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-text-main text-lg font-bold leading-tight group-hover:text-primary transition-colors">GitHub Copilot</h3>
|
||||
<p class="text-text-muted text-sm mt-2 line-clamp-2">Your AI pair programmer that helps you write better code faster.</p>
|
||||
</div>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-border-color">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Dev</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Coding</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-slate-400 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>1.5M</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-color bg-surface p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden shadow-sm">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="size-12 rounded-lg bg-cover bg-center shadow-md ring-1 ring-black/5" data-alt="ElevenLabs logo icon red background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBVqan6FEM01JlSNs0aKYTXdgzFAXn1xT_Yx0S3VszDGf5x0hsptwFAxMNtCEtJZOW65aZMncYKyPpzdAoIHLaBDk_ORHur89Redtuublqbd51Cr6sKVdMJ2VAAihNuVPsvpNBdIiLGuf40kXbe3HJrdYVNAKi27xcxBICheI4OzkFF7uJvChUyDbumqLRFUDMssCuxZIQYTeDKbTT628ZBFUN2H8u0RfVSPEyEhJVSE2NCAD4mH-dWGmsQzMWjmeZkwXJKpw1TGHFp');"></div>
|
||||
<div class="flex items-center justify-center size-8 rounded-full bg-slate-100 text-slate-400 group-hover:text-primary group-hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">arrow_outward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-text-main text-lg font-bold leading-tight group-hover:text-primary transition-colors">ElevenLabs</h3>
|
||||
<p class="text-text-muted text-sm mt-2 line-clamp-2">The most realistic AI voice generator and text-to-speech software.</p>
|
||||
</div>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-border-color">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Audio</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">TTS</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-slate-400 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>210k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-color bg-surface p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden shadow-sm">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="size-12 rounded-lg bg-cover bg-center shadow-md ring-1 ring-black/5" data-alt="Stable Diffusion logo icon teal background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB4zzlwlZK6dJVjV4vvFGvRmtsvd7dvQMCC1mAzFfEqA2sYnJnEdTDAF76lfVYkaKzibwuppHRIcEgbT8xaoWOBF1qdMiV3Qs3P9fEOLJ2jApPPqJyBnPXsvxFsI6FTlZ0SS_Rpblvjln_n_YLh8Wi_VWh8lCJirMM5vMCuyrNGK9Crxv3bnJzlbH34i9vmxSxSQ5uCmoAE5GPxkD23vzun9BBOKjRK-Ln7DhQ_bGhnVxkxEtM8Z-DVuGg2dNE7WnD7BEBXTOBh5XQa');"></div>
|
||||
<div class="flex items-center justify-center size-8 rounded-full bg-slate-100 text-slate-400 group-hover:text-primary group-hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">arrow_outward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-text-main text-lg font-bold leading-tight group-hover:text-primary transition-colors">Stable Diffusion</h3>
|
||||
<p class="text-text-muted text-sm mt-2 line-clamp-2">Open source latent text-to-image diffusion model for image generation.</p>
|
||||
</div>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-border-color">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Open Source</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Image</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-slate-400 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>950k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-color bg-surface p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden shadow-sm">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="size-12 rounded-lg bg-cover bg-center shadow-md ring-1 ring-black/5" data-alt="Notion AI logo icon indigo background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAgnpQqxiQhRd6xj43Q0hY2EQTna5khOzvl_NxO3OJN_7_nsfC0wP1x7ZmfBEvEEOoGi7NHVx6pvOpJb7Zk7dvUQWD64Y7Nrhc0mi0wsVIB1U8OfG1wioEusBqkI6zJQQh8W0om8gi2ubnJn2McHrvANulIAVnRxn1zPcy-SAnW1rLynAdVFKurBX5qK3BFBi_knAMoL8bTL_1LTxIdhdCggw6WeCGsFgUu6vqwjq9prGC-j94Fr8GibbjDSABY36P1OoZg59Aiv1M4');"></div>
|
||||
<div class="flex items-center justify-center size-8 rounded-full bg-slate-100 text-slate-400 group-hover:text-primary group-hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">arrow_outward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-text-main text-lg font-bold leading-tight group-hover:text-primary transition-colors">Notion AI</h3>
|
||||
<p class="text-text-muted text-sm mt-2 line-clamp-2">Access the limitless power of AI, right inside your Notion workspace.</p>
|
||||
</div>
|
||||
<div class="mt-auto flex items-center justify-between pt-4 border-t border-border-color">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-slate-100 text-slate-600 border border-slate-200">Productivity</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-slate-400 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>600k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center py-4">
|
||||
<nav class="flex items-center gap-2">
|
||||
<a class="flex size-10 items-center justify-center rounded-full border border-border-color text-text-muted hover:text-primary hover:border-primary transition-colors bg-surface" href="#">
|
||||
<span class="material-symbols-outlined text-base">chevron_left</span>
|
||||
</a>
|
||||
<a class="flex size-10 items-center justify-center rounded-full bg-primary text-white text-sm font-bold shadow-[0_4px_10px_rgba(14,165,233,0.3)]" href="#">1</a>
|
||||
<a class="flex size-10 items-center justify-center rounded-full border border-transparent hover:bg-slate-200 text-text-muted hover:text-text-main text-sm font-medium transition-colors" href="#">2</a>
|
||||
<a class="flex size-10 items-center justify-center rounded-full border border-transparent hover:bg-slate-200 text-text-muted hover:text-text-main text-sm font-medium transition-colors" href="#">3</a>
|
||||
<span class="flex size-10 items-center justify-center text-slate-400">...</span>
|
||||
<a class="flex size-10 items-center justify-center rounded-full border border-transparent hover:bg-slate-200 text-text-muted hover:text-text-main text-sm font-medium transition-colors" href="#">12</a>
|
||||
<a class="flex size-10 items-center justify-center rounded-full border border-border-color text-text-muted hover:text-primary hover:border-primary transition-colors bg-surface" href="#">
|
||||
<span class="material-symbols-outlined text-base">chevron_right</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="w-full border-t border-border-color bg-surface py-8 mt-auto">
|
||||
<div class="mx-auto max-w-[1200px] flex flex-col md:flex-row items-center justify-between gap-6 px-6 lg:px-10">
|
||||
<div class="flex items-center gap-2 text-text-muted text-sm">
|
||||
<span>© 2023 ZJPB AI Directory. All rights reserved.</span>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<a class="text-text-muted hover:text-primary transition-colors" href="#">
|
||||
<span class="text-sm font-medium">Twitter</span>
|
||||
</a>
|
||||
<a class="text-text-muted hover:text-primary transition-colors" href="#">
|
||||
<span class="text-sm font-medium">Discord</span>
|
||||
</a>
|
||||
<a class="text-text-muted hover:text-primary transition-colors" href="#">
|
||||
<span class="text-sm font-medium">Privacy Policy</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
BIN
stitch_ai_tool_detail_page/ai_tool_home_page/screen.png
Normal file
BIN
stitch_ai_tool_detail_page/ai_tool_home_page/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
Reference in New Issue
Block a user