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
108
stitch_ai_tool_detail_page/admin_login_page/code.html
Normal file
108
stitch_ai_tool_detail_page/admin_login_page/code.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Admin Login - AI Discovery</title>
|
||||
<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@300;400;500;600;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>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#0ea5e9", // Sky 500 - Clearer on light
|
||||
"primary-dark": "#0284c7", // Sky 600 - Hover state
|
||||
"background": "#f8fafc", // Slate 50 - Light, clean
|
||||
"surface": "#ffffff",
|
||||
"input-bg": "#ffffff",
|
||||
"input-border": "#e2e8f0", // Slate 200
|
||||
"text-main": "#0f172a", // Slate 900
|
||||
"text-secondary": "#334155", // Slate 700
|
||||
"text-muted": "#64748b", // Slate 500
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Space Grotesk", "sans-serif"],
|
||||
"body": ["Noto Sans", "sans-serif"],
|
||||
},
|
||||
backgroundImage: {
|
||||
// Very subtle grid for light mode
|
||||
'tech-grid': "radial-gradient(circle at center, rgba(14, 165, 233, 0.04) 0%, transparent 60%), linear-gradient(rgba(14, 165, 233, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 165, 233, 0.05) 1px, transparent 1px)",
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
.tech-bg-size {
|
||||
background-size: 100% 100%, 40px 40px, 40px 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-display text-text-main min-h-screen flex flex-col items-center justify-center relative overflow-hidden selection:bg-primary/20 selection:text-primary-dark">
|
||||
<div class="absolute inset-0 z-0 bg-tech-grid tech-bg-size pointer-events-none"></div>
|
||||
<div class="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-sky-200/40 rounded-full blur-[120px] pointer-events-none mix-blend-multiply"></div>
|
||||
<div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-indigo-100/60 rounded-full blur-[100px] pointer-events-none mix-blend-multiply"></div>
|
||||
<div class="w-full max-w-[480px] px-4 z-10 flex flex-col gap-6">
|
||||
<a class="group flex items-center gap-2 text-text-muted hover:text-text-main transition-colors w-fit" href="#">
|
||||
<div class="flex items-center justify-center w-8 h-8 rounded-full border border-input-border bg-white group-hover:border-primary/50 group-hover:bg-primary/5 transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">arrow_back</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium">Back to Home</span>
|
||||
</a>
|
||||
<div class="glass-panel border border-white rounded-2xl shadow-[0_4px_30px_rgba(0,0,0,0.03)] p-8 md:p-12 relative overflow-hidden ring-1 ring-black/5">
|
||||
<div class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary/50 to-transparent"></div>
|
||||
<div class="flex flex-col gap-2 mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 rounded-lg bg-primary/10 text-primary">
|
||||
<span class="material-symbols-outlined text-2xl">shield_person</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold tracking-widest uppercase text-primary">System Access</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-black tracking-tight text-text-main leading-tight">管理员登录</h1>
|
||||
<p class="text-text-muted text-base font-normal">Enter your credentials to access the AI Control Panel.</p>
|
||||
</div>
|
||||
<form class="flex flex-col gap-5">
|
||||
<div class="space-y-2">
|
||||
<label class="text-text-secondary text-sm font-semibold leading-normal" for="username">Username</label>
|
||||
<div class="relative group">
|
||||
<input class="form-input flex w-full h-12 pl-11 pr-4 rounded-lg text-text-main focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-input-border bg-input-bg focus:border-primary placeholder:text-slate-400 text-base font-normal leading-normal transition-all shadow-sm" id="username" placeholder="Enter your username" type="text"/>
|
||||
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors flex items-center justify-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-[20px]">person</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-end">
|
||||
<label class="text-text-secondary text-sm font-semibold leading-normal" for="password">Password</label>
|
||||
<a class="text-xs font-medium text-primary hover:text-primary-dark transition-colors mb-1" href="#">Forgot password?</a>
|
||||
</div>
|
||||
<div class="flex w-full items-stretch rounded-lg group relative">
|
||||
<input class="form-input flex w-full h-12 pl-11 pr-11 rounded-lg text-text-main focus:outline-0 focus:ring-2 focus:ring-primary/20 border border-input-border bg-input-bg focus:border-primary placeholder:text-slate-400 text-base font-normal leading-normal transition-all shadow-sm z-10" id="password" placeholder="Enter your password" type="password"/>
|
||||
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors flex items-center justify-center pointer-events-none z-20">
|
||||
<span class="material-symbols-outlined text-[20px]">lock</span>
|
||||
</div>
|
||||
<button class="absolute right-0 top-0 h-full px-3 text-slate-400 hover:text-text-secondary transition-colors flex items-center justify-center z-20 focus:outline-none" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">visibility_off</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="mt-4 flex w-full h-12 cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-primary text-white text-base font-bold leading-normal tracking-wide hover:bg-primary-dark transition-all active:scale-[0.98] shadow-lg shadow-primary/25 hover:shadow-primary/40" type="button">
|
||||
<span class="truncate">Login</span>
|
||||
</button>
|
||||
</form>
|
||||
<div class="mt-8 flex justify-center gap-6 border-t border-slate-100 pt-6">
|
||||
<p class="text-text-muted text-xs text-center font-medium">
|
||||
Protected by reCAPTCHA. <a class="underline hover:text-primary decoration-slate-300 hover:decoration-primary" href="#">Privacy</a> & <a class="underline hover:text-primary decoration-slate-300 hover:decoration-primary" href="#">Terms</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
BIN
stitch_ai_tool_detail_page/admin_login_page/screen.png
Normal file
BIN
stitch_ai_tool_detail_page/admin_login_page/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 KiB |
365
stitch_ai_tool_detail_page/admin_management_interface/code.html
Normal file
365
stitch_ai_tool_detail_page/admin_management_interface/code.html
Normal file
@@ -0,0 +1,365 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Admin Management Interface</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;700&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 = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#0ea5e9", // Sky 500
|
||||
"primary-hover": "#0284c7", // Sky 600
|
||||
"primary-light": "#e0f2fe", // Sky 100
|
||||
"surface": "#ffffff",
|
||||
"surface-highlight": "#f1f5f9", // Slate 100
|
||||
"border-subtle": "#e2e8f0", // Slate 200
|
||||
"text-main": "#0f172a", // Slate 900
|
||||
"text-secondary": "#64748b", // Slate 500
|
||||
"bg-main": "#f8fafc", // Slate 50
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Space Grotesk", "sans-serif"],
|
||||
"body": ["Noto Sans", "sans-serif"],
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, .font-display {
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
}::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-bg-main text-text-main overflow-hidden flex h-screen w-full">
|
||||
<aside class="flex flex-col w-64 h-full border-r border-border-subtle bg-surface flex-shrink-0 transition-all duration-300">
|
||||
<div class="p-6 flex items-center gap-3">
|
||||
<div class="size-8 text-primary">
|
||||
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path clip-rule="evenodd" d="M24 18.4228L42 11.475V34.3663C42 34.7796 41.7457 35.1504 41.3601 35.2992L24 42V18.4228Z" fill="currentColor" fill-rule="evenodd"></path>
|
||||
<path clip-rule="evenodd" d="M24 8.18819L33.4123 11.574L24 15.2071L14.5877 11.574L24 8.18819ZM9 15.8487L21 20.4805V37.6263L9 32.9945V15.8487ZM27 37.6263V20.4805L39 15.8487V32.9945L27 37.6263ZM25.354 2.29885C24.4788 1.98402 23.5212 1.98402 22.646 2.29885L4.98454 8.65208C3.7939 9.08038 3 10.2097 3 11.475V34.3663C3 36.0196 4.01719 37.5026 5.55962 38.098L22.9197 44.7987C23.6149 45.0671 24.3851 45.0671 25.0803 44.7987L42.4404 38.098C43.9828 37.5026 45 36.0196 45 34.3663V11.475C45 10.2097 44.2061 9.08038 43.0155 8.65208L25.354 2.29885Z" fill="currentColor" fill-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-text-main text-xl font-bold tracking-tight">AI Discovery</h1>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 flex flex-col gap-2 mt-4">
|
||||
<div class="px-3 py-2">
|
||||
<p class="text-text-secondary text-xs font-bold uppercase tracking-wider mb-2">Main Menu</p>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary-light/50 text-primary border border-primary/10 group transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-primary transition-colors">language</span>
|
||||
<span class="text-sm font-medium">Website Management</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-text-main transition-colors mt-1" href="#">
|
||||
<span class="material-symbols-outlined">label</span>
|
||||
<span class="text-sm font-medium">Tag Management</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-text-main transition-colors mt-1" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="text-sm font-medium">Administrators</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 mt-auto">
|
||||
<p class="text-text-secondary text-xs font-bold uppercase tracking-wider mb-2">System</p>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-text-main transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-sm font-medium">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-border-subtle">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 border border-border-subtle" data-alt="User profile picture showing a minimal avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDlD4gGno1M8YZQOQ6QyLdUZtaU7klHxTjeH2Kf3aH39GkQ56ld-iSPZ6RCbkxzCeXJzMq6_29atBkPks_wP-Q7pvpyNAAZW2FJKxOFTSrcQZp2O30dVhn-DPYELqG1fdqM-hPfluduBN-I0k_Q8cJrJ3LKVUUgnxsE8bWD4CSo8CoYvXmtK03j86TehszyrfWfKpoBcu8XaHpjh10EGoDHFYeSJ6AKJQDsp_0iz5LC4bOXvyg0_Nef5mQOBtQ9zKuKSbCYhRuu7Wyo");'></div>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<h2 class="text-text-main text-sm font-medium truncate">Admin User</h2>
|
||||
<p class="text-text-secondary text-xs truncate">admin@ai-discovery.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 flex flex-col h-full overflow-hidden bg-bg-main relative">
|
||||
<header class="h-16 border-b border-border-subtle bg-surface/90 backdrop-blur px-8 flex items-center justify-between shrink-0 z-20">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<a class="text-text-secondary hover:text-text-main transition-colors" href="#">Dashboard</a>
|
||||
<span class="text-text-secondary">/</span>
|
||||
<span class="text-text-main font-medium">Website Management</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative w-64 hidden md:block">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-text-secondary">
|
||||
<span class="material-symbols-outlined text-[20px]">search</span>
|
||||
</span>
|
||||
<input class="w-full bg-surface-highlight border-none rounded-lg py-2 pl-10 pr-4 text-sm text-text-main placeholder-text-secondary focus:ring-1 focus:ring-primary focus:bg-white transition-all shadow-sm" placeholder="Global search..." type="text"/>
|
||||
</div>
|
||||
<button class="relative text-text-secondary hover:text-text-main transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
<span class="absolute top-0 right-0 size-2 bg-primary rounded-full ring-2 ring-white"></span>
|
||||
</button>
|
||||
<button class="text-text-secondary hover:text-text-main transition-colors">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden p-8 scroll-smooth">
|
||||
<div class="max-w-[1400px] mx-auto flex flex-col gap-8 pb-10">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-text-main mb-2">Website Management</h1>
|
||||
<p class="text-text-secondary text-base">Manage and curate AI tools for the discovery platform.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 h-10 px-4 rounded-lg bg-surface border border-border-subtle hover:bg-surface-highlight text-text-main text-sm font-medium transition-colors shadow-sm">
|
||||
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
||||
<span>Filter</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-10 px-4 rounded-lg bg-surface border border-border-subtle hover:bg-surface-highlight text-text-main text-sm font-medium transition-colors shadow-sm">
|
||||
<span class="material-symbols-outlined text-[20px]">download</span>
|
||||
<span>Export</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8 items-start">
|
||||
<div class="xl:col-span-2 flex flex-col gap-4">
|
||||
<div class="bg-surface border border-border-subtle rounded-t-xl p-4 flex flex-col sm:flex-row justify-between items-center gap-4 shadow-sm">
|
||||
<div class="relative w-full sm:w-72">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-text-secondary">
|
||||
<span class="material-symbols-outlined text-[20px]">search</span>
|
||||
</span>
|
||||
<input class="w-full bg-surface border border-border-subtle rounded-lg py-2 pl-10 pr-4 text-sm text-text-main placeholder-text-secondary focus:ring-1 focus:ring-primary focus:border-primary" placeholder="Search websites..." type="text"/>
|
||||
</div>
|
||||
<div class="text-sm text-text-secondary">
|
||||
Showing <span class="text-text-main font-medium">1-10</span> of <span class="text-text-main font-medium">128</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface border border-border-subtle rounded-b-xl overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-highlight border-b border-border-subtle">
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary w-10">
|
||||
<input class="rounded bg-surface border-gray-300 text-primary focus:ring-primary focus:ring-offset-white" type="checkbox"/>
|
||||
</th>
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary">Website / Tool</th>
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary">Tags</th>
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary">Status</th>
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border-subtle">
|
||||
<tr class="group hover:bg-surface-highlight/50 transition-colors">
|
||||
<td class="p-4">
|
||||
<input class="rounded bg-surface border-gray-300 text-primary focus:ring-primary focus:ring-offset-white" type="checkbox"/>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-lg bg-cover bg-center shrink-0 border border-border-subtle" data-alt="Icon of Chat AI Tool" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB_TTlnbkP1ygA1GNesXOhx_H9yup1gOKwumL9Qnh8VcPEUlwDRA89LRKhO8tyDtOtvtfrGh7CRSnP5xMOyb_GvJgQ-FQToY20cgHuTpVeI97COVlA4e2wOp04SH5ogk98S2SFF4jtSoS7RldXDdaafrysnsulA7_euKFIDf42NTPk_YwR4aglKFOeiQCQT-ITD6hCZjE8kqEfam8E6onBbJ14KZt2sE8gn0VP-pzzgAgPlr3htq5j6T26Tijk8V7SIFQGlB20GjSsb");'></div>
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-text-main group-hover:text-primary transition-colors">ChatGPT</h3>
|
||||
<p class="text-xs text-text-secondary truncate max-w-[200px]">openai.com/chatgpt</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-surface-highlight text-text-secondary border border-border-subtle">LLM</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-surface-highlight text-text-secondary border border-border-subtle">Chatbot</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-50 text-green-700 border border-green-200">
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1.5 rounded-md hover:bg-primary-light hover:text-primary text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||
</button>
|
||||
<button class="p-1.5 rounded-md hover:bg-red-50 hover:text-red-600 text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-surface-highlight/50 transition-colors">
|
||||
<td class="p-4">
|
||||
<input class="rounded bg-surface border-gray-300 text-primary focus:ring-primary focus:ring-offset-white" type="checkbox"/>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-lg bg-cover bg-center shrink-0 border border-border-subtle" data-alt="Icon of Midjourney AI" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA-IWUA_5FInPrqeTtZDcb85HR0X3jABxlDeG811Bd-_2x4ISEl8huiNp-kAG75fBmopT3dd5nSp1E0wCtOxXMFoP6HR9nrg4PfNDxjLao4ulneOOrJMgL4LdtuXgKxrQHm1WDoG4TviJ-lIYXzLVI9Yw-9mjDFihMurEOdJlarrMZekyEVrogy_jliQPo3oXvcemTUiJAZz9UCwq8LOEr09EqzU25kXCXx3Z3B0XvdM6VDUrQN8mKtKU1eU9CVwsLJfOKZ09CpJIwx");'></div>
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-text-main group-hover:text-primary transition-colors">Midjourney</h3>
|
||||
<p class="text-xs text-text-secondary truncate max-w-[200px]">midjourney.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-surface-highlight text-text-secondary border border-border-subtle">Image Gen</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-surface-highlight text-text-secondary border border-border-subtle">Art</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-50 text-green-700 border border-green-200">
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1.5 rounded-md hover:bg-primary-light hover:text-primary text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||
</button>
|
||||
<button class="p-1.5 rounded-md hover:bg-red-50 hover:text-red-600 text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="group hover:bg-surface-highlight/50 transition-colors">
|
||||
<td class="p-4">
|
||||
<input class="rounded bg-surface border-gray-300 text-primary focus:ring-primary focus:ring-offset-white" type="checkbox"/>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-lg bg-cover bg-center shrink-0 border border-border-subtle" data-alt="Icon of Copy AI Tool" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB6XdW_8pAKAs4YPwwYM4bcub_ilJ2i6L7baANaKdNNmDP5k1TRngBOsHE0aTy6sBuBJG49alX-4PRkz55qTcxsrRy6_S8rqD5gCTWLquEDcjqfSai-s7GEdZcBCNJ6G5hEFJM7JFli5r5ETcPq2QBz_NQT0W94XYhzaYpZQVEX-su5ywWxAcrfOFrWrhwC5RCiZL0B7AinM4c1pRSfeDtDpVTzxTvx0MrDi6gBH-duuCUmbr0YjkqhyaZqpRpX-ZhW-JiJQ3sKPUCA");'></div>
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-text-main group-hover:text-primary transition-colors">Copy.ai</h3>
|
||||
<p class="text-xs text-text-secondary truncate max-w-[200px]">copy.ai</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-surface-highlight text-text-secondary border border-border-subtle">Writing</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-surface-highlight text-text-secondary border border-border-subtle">Marketing</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-50 text-yellow-700 border border-yellow-200">
|
||||
Pending
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1.5 rounded-md hover:bg-primary-light hover:text-primary text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||
</button>
|
||||
<button class="p-1.5 rounded-md hover:bg-red-50 hover:text-red-600 text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex items-center justify-between px-4 py-3 border-t border-border-subtle bg-surface">
|
||||
<div class="flex flex-1 justify-between sm:hidden">
|
||||
<a class="relative inline-flex items-center rounded-md border border-border-subtle bg-surface px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-highlight hover:text-text-main" href="#">Previous</a>
|
||||
<a class="relative ml-3 inline-flex items-center rounded-md border border-border-subtle bg-surface px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-highlight hover:text-text-main" href="#">Next</a>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-end">
|
||||
<nav aria-label="Pagination" class="isolate inline-flex -space-x-px rounded-md shadow-sm">
|
||||
<a class="relative inline-flex items-center rounded-l-md px-2 py-2 text-text-secondary ring-1 ring-inset ring-border-subtle hover:bg-surface-highlight focus:z-20 focus:outline-offset-0" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
|
||||
</a>
|
||||
<a aria-current="page" class="relative z-10 inline-flex items-center bg-primary px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" href="#">1</a>
|
||||
<a class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-text-secondary ring-1 ring-inset ring-border-subtle hover:bg-surface-highlight focus:z-20 focus:outline-offset-0" href="#">2</a>
|
||||
<a class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-text-secondary ring-1 ring-inset ring-border-subtle hover:bg-surface-highlight focus:z-20 focus:outline-offset-0" href="#">3</a>
|
||||
<a class="relative inline-flex items-center rounded-r-md px-2 py-2 text-text-secondary ring-1 ring-inset ring-border-subtle hover:bg-surface-highlight focus:z-20 focus:outline-offset-0" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:col-span-1">
|
||||
<div class="bg-surface border border-border-subtle rounded-xl shadow-lg shadow-slate-200/50 sticky top-8">
|
||||
<div class="px-6 py-4 border-b border-border-subtle flex justify-between items-center bg-surface-highlight/30 rounded-t-xl">
|
||||
<h2 class="text-lg font-bold text-text-main">Add New Website</h2>
|
||||
<span class="material-symbols-outlined text-text-secondary cursor-pointer hover:text-text-main">close</span>
|
||||
</div>
|
||||
<div class="p-6 flex flex-col gap-6">
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="text-sm font-medium text-text-main">Website URL <span class="text-primary">*</span></label>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface border border-border-subtle rounded-lg py-2.5 px-3 text-sm text-text-main placeholder-text-secondary focus:ring-1 focus:ring-primary focus:border-primary transition-all shadow-sm" placeholder="https://example.com" type="url"/>
|
||||
<div class="absolute inset-y-0 right-3 flex items-center">
|
||||
<span class="material-symbols-outlined text-green-500 text-[18px]" style="display:none;">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="flex items-center justify-center gap-2 w-full py-2 px-3 rounded-lg border border-primary/20 bg-primary-light/50 hover:bg-primary-light text-primary text-sm font-medium transition-colors group" type="button">
|
||||
<span class="material-symbols-outlined text-[18px] group-hover:animate-spin">autorenew</span>
|
||||
Auto-fetch Website Info
|
||||
</button>
|
||||
<p class="text-xs text-text-secondary mt-1">
|
||||
Our AI will attempt to scrape metadata and descriptions automatically.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="text-sm font-medium text-text-main">Tool Name</label>
|
||||
<input class="w-full bg-surface border border-border-subtle rounded-lg py-2.5 px-3 text-sm text-text-main placeholder-text-secondary focus:ring-1 focus:ring-primary focus:border-primary shadow-sm" placeholder="e.g. ChatGPT" type="text"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="text-sm font-medium text-text-main">Short Description</label>
|
||||
<textarea class="w-full bg-surface border border-border-subtle rounded-lg py-2.5 px-3 text-sm text-text-main placeholder-text-secondary focus:ring-1 focus:ring-primary focus:border-primary resize-none shadow-sm" placeholder="Enter a brief description of the AI tool..." rows="4"></textarea>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="text-sm font-medium text-text-main">Tags</label>
|
||||
<div class="p-3 bg-surface border border-border-subtle rounded-lg min-h-[44px] flex flex-wrap gap-2 shadow-sm">
|
||||
<span class="inline-flex items-center gap-1 px-2 py-1 rounded bg-surface-highlight text-xs text-text-main border border-border-subtle">
|
||||
Productivity
|
||||
<span class="material-symbols-outlined text-[14px] cursor-pointer hover:text-red-500 text-text-secondary">close</span>
|
||||
</span>
|
||||
<input class="bg-transparent border-none p-0 text-sm text-text-main placeholder-text-secondary focus:ring-0 w-24" placeholder="+ Add tag" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<label class="text-sm font-medium text-text-main">Active Status</label>
|
||||
<button class="w-11 h-6 bg-primary rounded-full relative cursor-pointer shadow-inner">
|
||||
<span class="absolute top-1 left-6 size-4 bg-white rounded-full shadow-sm transition-all"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 py-4 border-t border-border-subtle flex gap-3 bg-surface-highlight/30 rounded-b-xl">
|
||||
<button class="flex-1 py-2.5 rounded-lg bg-primary hover:bg-primary-hover text-white text-sm font-bold shadow-lg shadow-primary/20 transition-all">
|
||||
Save Website
|
||||
</button>
|
||||
<button class="px-4 py-2.5 rounded-lg border border-border-subtle bg-surface hover:bg-surface-highlight text-text-main text-sm font-medium transition-colors shadow-sm">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
BIN
stitch_ai_tool_detail_page/admin_management_interface/screen.png
Normal file
BIN
stitch_ai_tool_detail_page/admin_management_interface/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
351
stitch_ai_tool_detail_page/ai_tool_detail_page/code.html
Normal file
351
stitch_ai_tool_detail_page/ai_tool_detail_page/code.html
Normal file
@@ -0,0 +1,351 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>AI Tool Detail Page (Light Theme)</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&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 = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#0ea5e9", // Updated to sky-500 for better visibility on light
|
||||
"primary-dark": "#0284c7", // Sky-600
|
||||
"secondary": "#8b5cf6", // Violet-500
|
||||
"background": "#f8fafc", // Slate-50 - Light background
|
||||
"surface": "#ffffff", // White cards
|
||||
"surface-highlight": "#f1f5f9", // Slate-100 for inputs/tags
|
||||
"border": "#e2e8f0", // Slate-200
|
||||
"text-main": "#0f172a", // Slate-900
|
||||
"text-muted": "#64748b", // Slate-500
|
||||
"text-on-dark": "#ffffff",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Space Grotesk", "sans-serif"],
|
||||
"body": ["Noto Sans", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
|
||||
boxShadow: {
|
||||
"soft": "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)",
|
||||
"card": "0 0 0 1px rgba(226, 232, 240, 1), 0 2px 8px rgba(0, 0, 0, 0.05)",
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(226, 232, 240, 0.6);
|
||||
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.glass-header {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid rgba(226, 232, 240, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-text-main min-h-screen flex flex-col selection:bg-primary/20 selection:text-primary-dark">
|
||||
<div class="w-full glass-header sticky top-0 z-50">
|
||||
<div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<header class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-8 text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">token</span>
|
||||
</div>
|
||||
<h2 class="text-text-main text-xl font-bold tracking-tight">AI Discovery</h2>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-6">
|
||||
<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="#">Submit Tool</a>
|
||||
<a class="text-text-muted hover:text-primary text-sm font-medium transition-colors" href="#">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="hidden sm:flex relative group">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-text-muted text-[20px]">search</span>
|
||||
</div>
|
||||
<input class="bg-surface-highlight hover:bg-white focus:bg-white text-text-main text-sm rounded-lg pl-10 pr-4 py-2 w-48 focus:w-64 transition-all outline-none ring-0 border border-transparent focus:border-primary/50 placeholder:text-text-muted/70 shadow-sm" placeholder="Search tools..."/>
|
||||
</div>
|
||||
<button class="flex items-center justify-center rounded-lg h-9 px-4 bg-primary hover:bg-primary-dark text-white text-sm font-bold transition-colors shadow-sm hover:shadow-md">
|
||||
Log In
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
<main class="flex-grow w-full max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="mb-8">
|
||||
<button class="group flex items-center gap-2 text-text-muted hover:text-primary transition-colors text-sm font-bold">
|
||||
<span class="material-symbols-outlined text-[20px] group-hover:-translate-x-1 transition-transform">arrow_back</span>
|
||||
<span>Back to Home</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
|
||||
<div class="lg:col-span-8 flex flex-col gap-8">
|
||||
<div class="flex flex-col sm:flex-row gap-6 items-start">
|
||||
<div class="relative shrink-0">
|
||||
<div class="absolute -inset-2 bg-gradient-to-br from-primary/30 via-purple-300/30 to-secondary/30 rounded-3xl opacity-60 blur-xl"></div>
|
||||
<div class="relative size-[120px] rounded-xl bg-surface flex items-center justify-center overflow-hidden border border-border bg-cover bg-center shadow-soft" data-alt="Abstract neural network pattern in deep blue and purple" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAFm-_1orioA8YwgKaNGCzxomQeon7z13YmJCs2VpIoXP6J2a5kLgu_mC9IFA-cRA5s6yNaDPiWRxhF8tTX4FFOTbngaHydfCmAMNxU2EuZ2burR-hLOggJYl24v1Ry7GaNu6ETcYui4SIfvWqNs43vwA4vEmoogV3TxVzuDRDHsy5nj9ab4TnW4c5mVgqHPttLIF1NKTm6rtEcPnWW1jtCihIAAqZVnst9o0Z-IyAYGJoPjNajRdJZGR5NDfiBf-tdr79Bo42KY_DX');">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-text-main tracking-tight font-display mb-1">NeuroGen AI</h1>
|
||||
<a class="text-primary hover:text-primary-dark hover:underline text-base font-medium flex items-center gap-1" href="#">
|
||||
www.neurogen.ai
|
||||
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-highlight text-text-muted border border-border hover:border-primary/30 transition-colors cursor-default">Generative AI</span>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-highlight text-text-muted border border-border hover:border-primary/30 transition-colors cursor-default">Copywriting</span>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-highlight text-text-muted border border-border hover:border-primary/30 transition-colors cursor-default">Productivity</span>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-50 text-secondary border border-purple-100">Free Trial</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 mt-1 text-text-muted text-sm">
|
||||
<div class="flex items-center gap-2" title="Total Views">
|
||||
<span class="material-symbols-outlined text-[18px]">visibility</span>
|
||||
<span>12,450 Views</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2" title="Date Added">
|
||||
<span class="material-symbols-outlined text-[18px]">calendar_today</span>
|
||||
<span>Added Oct 24, 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-border"/>
|
||||
<div class="space-y-10">
|
||||
<section>
|
||||
<h3 class="text-xl font-bold text-text-main mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">info</span>
|
||||
Product Overview
|
||||
</h3>
|
||||
<p class="text-text-muted leading-relaxed text-lg font-body">
|
||||
NeuroGen AI is an advanced copywriting assistant designed to help marketers, writers, and businesses generate high-converting content in seconds. By leveraging state-of-the-art natural language processing models, it understands context, tone, and brand voice to deliver tailored outputs.
|
||||
</p>
|
||||
</section>
|
||||
<div class="rounded-xl overflow-hidden border border-border relative group aspect-video w-full bg-surface shadow-md">
|
||||
<div class="absolute inset-0 bg-cover bg-center" data-alt="Dashboard interface of NeuroGen AI showing analytics and text editor" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCtwM-4OkGIPG4sQqABpRcLvOgKvLzuyVlQJUVcU8SqFsVod_jck_vFm-q7UX70vUaaF7UPEa--rkf18dMi5_qYcXYsjTzd5ehM3ga_OoIr1r6wnRTnRxKcrUUC5USP72vdsFJkRFeKmH6epH1Avi5tglJ732VTvoNiuys499jctwZ67d4Yu8Slfn0EO4Ny8zIjzPRGLer8lMaEeZPMagNbgn4asMLvmDtTep3mgPzwTscfzoOFVChGqNak0ZmLyOiVY7vKIapdHyoz');">
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60"></div>
|
||||
<div class="absolute bottom-4 left-4">
|
||||
<p class="text-white font-medium text-sm bg-black/40 backdrop-blur-md px-3 py-1 rounded-lg border border-white/10">Dashboard Interface</p>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<h3 class="text-xl font-bold text-text-main mb-4">Detailed Description</h3>
|
||||
<div class="text-text-muted space-y-4 leading-relaxed font-body">
|
||||
<p>
|
||||
Writing high-quality content consistently is a challenge for modern businesses. NeuroGen AI bridges the gap between human creativity and machine speed. Unlike generic text generators, NeuroGen allows users to fine-tune specific parameters such as emotional resonance, sentence structure complexity, and SEO keyword density.
|
||||
</p>
|
||||
<p>
|
||||
The platform includes specialized templates for:
|
||||
</p>
|
||||
<ul class="list-disc pl-5 space-y-2 text-text-muted marker:text-primary">
|
||||
<li>Social media captions (Instagram, LinkedIn, Twitter)</li>
|
||||
<li>Long-form blog posts with automatic formatting</li>
|
||||
<li>Email marketing sequences</li>
|
||||
<li>Ad copy variants for A/B testing</li>
|
||||
</ul>
|
||||
<p>
|
||||
Security is paramount; NeuroGen ensures that your proprietary data is never used to train public models. Enterprise-grade encryption and team collaboration features make it a suitable choice for large organizations looking to scale their content operations.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="text-xl font-bold text-text-main mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-secondary">newspaper</span>
|
||||
Related News
|
||||
</h3>
|
||||
<div class="grid gap-4">
|
||||
<a class="group block p-5 rounded-xl border border-border bg-surface hover:shadow-soft hover:border-primary/30 transition-all" href="#">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-primary/10 text-primary-dark">Product Update</span>
|
||||
<span class="text-xs text-text-muted">2 days ago</span>
|
||||
</div>
|
||||
<h4 class="text-text-main font-bold text-base group-hover:text-primary transition-colors mb-2">NeuroGen 2.0 Released: Now with Multimodal capabilities</h4>
|
||||
<p class="text-sm text-text-muted line-clamp-2">The latest version introduces image analysis and generation alongside text, marking a significant step forward for content creators looking for all-in-one solutions.</p>
|
||||
</a>
|
||||
<a class="group block p-5 rounded-xl border border-border bg-surface hover:shadow-soft hover:border-primary/30 transition-all" href="#">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-purple-50 text-secondary">Industry News</span>
|
||||
<span class="text-xs text-text-muted">Oct 12, 2023</span>
|
||||
</div>
|
||||
<h4 class="text-text-main font-bold text-base group-hover:text-primary transition-colors mb-2">AI Copywriting Market Analysis Q3 2023</h4>
|
||||
<p class="text-sm text-text-muted line-clamp-2">NeuroGen AI has been named a "High Performer" in the latest G2 Grid Report for AI Writing Assistants, recognized for its ease of use and ROI.</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="text-xl font-bold text-text-main mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">auto_awesome</span>
|
||||
Similar Recommendations
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<a class="flex flex-col p-4 rounded-xl border border-border bg-surface hover:border-primary/50 hover:shadow-soft transition-all group h-full" href="#">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="size-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-500 flex items-center justify-center shadow-lg shadow-blue-500/20">
|
||||
<span class="text-white font-bold text-lg">J</span>
|
||||
</div>
|
||||
<div class="size-8 rounded-full bg-surface-highlight flex items-center justify-center text-text-muted group-hover:text-white group-hover:bg-primary group-hover:scale-110 transition-all">
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-text-main font-bold mb-1">Jasper AI</h4>
|
||||
<p class="text-xs text-text-muted line-clamp-2 mb-3">Enterprise-grade AI content platform for marketing teams and creators.</p>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-1 rounded bg-surface-highlight text-[10px] text-text-muted font-medium border border-border">Writing</span>
|
||||
<span class="px-2 py-1 rounded bg-surface-highlight text-[10px] text-text-muted font-medium border border-border">Marketing</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="flex flex-col p-4 rounded-xl border border-border bg-surface hover:border-primary/50 hover:shadow-soft transition-all group h-full" href="#">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="size-10 rounded-lg bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center shadow-lg shadow-emerald-500/20">
|
||||
<span class="text-white font-bold text-lg">C</span>
|
||||
</div>
|
||||
<div class="size-8 rounded-full bg-surface-highlight flex items-center justify-center text-text-muted group-hover:text-white group-hover:bg-primary group-hover:scale-110 transition-all">
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-text-main font-bold mb-1">Copy.ai</h4>
|
||||
<p class="text-xs text-text-muted line-clamp-2 mb-3">Generates high-quality copy for your business in seconds.</p>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-1 rounded bg-surface-highlight text-[10px] text-text-muted font-medium border border-border">Free Plan</span>
|
||||
<span class="px-2 py-1 rounded bg-surface-highlight text-[10px] text-text-muted font-medium border border-border">Social</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="flex flex-col p-4 rounded-xl border border-border bg-surface hover:border-primary/50 hover:shadow-soft transition-all group h-full" href="#">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="size-10 rounded-lg bg-gradient-to-br from-orange-400 to-red-500 flex items-center justify-center shadow-lg shadow-orange-500/20">
|
||||
<span class="text-white font-bold text-lg">W</span>
|
||||
</div>
|
||||
<div class="size-8 rounded-full bg-surface-highlight flex items-center justify-center text-text-muted group-hover:text-white group-hover:bg-primary group-hover:scale-110 transition-all">
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-text-main font-bold mb-1">Writesonic</h4>
|
||||
<p class="text-xs text-text-muted line-clamp-2 mb-3">AI writer that creates SEO-friendly content for blogs and websites.</p>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-1 rounded bg-surface-highlight text-[10px] text-text-muted font-medium border border-border">SEO</span>
|
||||
<span class="px-2 py-1 rounded bg-surface-highlight text-[10px] text-text-muted font-medium border border-border">Blogs</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a class="flex flex-col p-4 rounded-xl border border-border bg-surface hover:border-primary/50 hover:shadow-soft transition-all group h-full" href="#">
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="size-10 rounded-lg bg-gradient-to-br from-purple-400 to-fuchsia-500 flex items-center justify-center shadow-lg shadow-purple-500/20">
|
||||
<span class="text-white font-bold text-lg">R</span>
|
||||
</div>
|
||||
<div class="size-8 rounded-full bg-surface-highlight flex items-center justify-center text-text-muted group-hover:text-white group-hover:bg-primary group-hover:scale-110 transition-all">
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-text-main font-bold mb-1">Rytr</h4>
|
||||
<p class="text-xs text-text-muted line-clamp-2 mb-3">A better, faster way to write profile bios, facebook ads and more.</p>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-1 rounded bg-surface-highlight text-[10px] text-text-muted font-medium border border-border">Emails</span>
|
||||
<span class="px-2 py-1 rounded bg-surface-highlight text-[10px] text-text-muted font-medium border border-border">Ads</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-4 space-y-6">
|
||||
<div class="glass-card rounded-2xl p-6 flex flex-col gap-4 sticky top-24">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-text-main font-bold text-lg">Try it now</span>
|
||||
<span class="px-2 py-1 rounded bg-green-50 text-green-600 text-xs font-bold border border-green-200">ONLINE</span>
|
||||
</div>
|
||||
<a class="group relative flex items-center justify-center w-full overflow-hidden rounded-xl bg-gradient-to-r from-primary via-primary-dark to-secondary p-[1px] focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all hover:scale-[1.02] shadow-sm hover:shadow-md" href="#">
|
||||
<div class="relative flex h-12 w-full items-center justify-center rounded-xl bg-surface group-hover:bg-transparent px-8 py-1 transition-colors">
|
||||
<span class="flex items-center gap-2 text-primary group-hover:text-white font-bold text-base uppercase tracking-wide transition-colors">
|
||||
Visit Website
|
||||
<span class="material-symbols-outlined text-[20px] font-bold">arrow_outward</span>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<p class="text-xs text-center text-text-muted">
|
||||
Opens in a new tab • <span class="text-text-main font-medium">neurogen.ai</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-border bg-surface p-6 shadow-card">
|
||||
<h3 class="text-lg font-bold text-text-main mb-5 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-secondary">verified</span>
|
||||
Main Features
|
||||
</h3>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="mt-0.5 rounded-full bg-primary/10 p-1">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] block">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-text-main">Contextual Awareness</p>
|
||||
<p class="text-xs text-text-muted mt-0.5">Understands previous inputs to maintain thread continuity.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="mt-0.5 rounded-full bg-primary/10 p-1">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] block">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-text-main">Multi-language Support</p>
|
||||
<p class="text-xs text-text-muted mt-0.5">Generate content in over 25 languages natively.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="mt-0.5 rounded-full bg-primary/10 p-1">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] block">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-text-main">SEO Optimization</p>
|
||||
<p class="text-xs text-text-muted mt-0.5">Built-in keyword analyzer and suggestion tool.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="mt-0.5 rounded-full bg-primary/10 p-1">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] block">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-text-main">Export to CMS</p>
|
||||
<p class="text-xs text-text-muted mt-0.5">Direct integration with WordPress and Ghost.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<button class="flex-1 py-3 rounded-lg border border-border bg-surface text-text-muted hover:text-text-main hover:bg-surface-highlight hover:border-gray-300 transition-colors text-sm font-medium flex items-center justify-center gap-2 shadow-sm">
|
||||
<span class="material-symbols-outlined text-[18px]">share</span>
|
||||
Share
|
||||
</button>
|
||||
<button class="flex-1 py-3 rounded-lg border border-border bg-surface text-text-muted hover:text-red-600 hover:border-red-200 hover:bg-red-50 transition-colors text-sm font-medium flex items-center justify-center gap-2 shadow-sm">
|
||||
<span class="material-symbols-outlined text-[18px]">flag</span>
|
||||
Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-20"></div>
|
||||
</main>
|
||||
|
||||
</body></html>
|
||||
BIN
stitch_ai_tool_detail_page/ai_tool_detail_page/screen.png
Normal file
BIN
stitch_ai_tool_detail_page/ai_tool_detail_page/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 389 KiB |
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 |
@@ -1,126 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Admin Login - AI Discovery</title>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"/>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#25c0f4",
|
||||
"background-light": "#f5f8f8",
|
||||
"background-dark": "#101e22",
|
||||
"surface-dark": "#162125",
|
||||
"input-bg": "#1b2427",
|
||||
"input-border": "#3b4e54",
|
||||
"text-muted": "#9cb2ba",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Space Grotesk", "sans-serif"],
|
||||
"body": ["Noto Sans", "sans-serif"],
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
backgroundImage: {
|
||||
'tech-grid': "radial-gradient(circle at center, rgba(37, 192, 244, 0.05) 0%, transparent 70%), linear-gradient(rgba(37, 192, 244, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 192, 244, 0.03) 1px, transparent 1px)",
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.glass-panel {
|
||||
background: rgba(22, 33, 37, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
.tech-bg-size {
|
||||
background-size: 100% 100%, 40px 40px, 40px 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white min-h-screen flex flex-col items-center justify-center relative overflow-hidden selection:bg-primary/30">
|
||||
<!-- Ambient Background -->
|
||||
<div class="absolute inset-0 z-0 bg-tech-grid tech-bg-size pointer-events-none" data-alt="Abstract subtle grid pattern background representing technology"></div>
|
||||
<div class="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-primary/10 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[100px] pointer-events-none"></div>
|
||||
<!-- Main Content Wrapper -->
|
||||
<div class="w-full max-w-[480px] px-4 z-10 flex flex-col gap-6">
|
||||
<!-- Back Navigation -->
|
||||
<a class="group flex items-center gap-2 text-text-muted hover:text-white transition-colors w-fit" href="#">
|
||||
<div class="flex items-center justify-center w-8 h-8 rounded-full border border-input-border bg-surface-dark group-hover:border-primary/50 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm">arrow_back</span>
|
||||
</div>
|
||||
<span class="text-sm font-medium">Back to Home</span>
|
||||
</a>
|
||||
<!-- Login Card -->
|
||||
<div class="glass-panel border border-white/5 dark:border-input-border/50 rounded-xl shadow-2xl p-8 md:p-10 relative overflow-hidden">
|
||||
<!-- Decorative Accent -->
|
||||
<div class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-primary to-transparent opacity-70"></div>
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col gap-2 mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="p-2 rounded-lg bg-primary/10 text-primary">
|
||||
<span class="material-symbols-outlined text-2xl">shield_person</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold tracking-widest uppercase text-primary/80">System Access</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-black tracking-tight text-white leading-tight">管理员登录</h1>
|
||||
<p class="text-text-muted text-base font-normal">Enter your credentials to access the AI Control Panel.</p>
|
||||
</div>
|
||||
<!-- Error Message Area (Static Example) -->
|
||||
<!-- <div class="mb-6 p-3 rounded-lg bg-red-500/10 border border-red-500/20 flex items-start gap-3">
|
||||
<span class="material-symbols-outlined text-red-400 text-sm mt-0.5">error</span>
|
||||
<p class="text-red-400 text-sm">Invalid credentials provided.</p>
|
||||
</div> -->
|
||||
<!-- Form -->
|
||||
<form class="flex flex-col gap-5">
|
||||
<!-- Username Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-white text-sm font-medium leading-normal" for="username">Username</label>
|
||||
<div class="relative group">
|
||||
<input class="form-input flex w-full h-14 pl-12 pr-4 rounded-lg text-white focus:outline-0 focus:ring-0 border border-input-border bg-input-bg focus:border-primary placeholder:text-text-muted text-base font-normal leading-normal transition-colors" id="username" placeholder="Enter your username or email" type="text"/>
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-text-muted group-focus-within:text-primary transition-colors flex items-center justify-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-[20px]">person</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Password Field -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-end">
|
||||
<label class="text-white text-sm font-medium leading-normal" for="password">Password</label>
|
||||
<a class="text-xs text-primary hover:text-white transition-colors mb-1" href="#">Forgot password?</a>
|
||||
</div>
|
||||
<div class="flex w-full items-stretch rounded-lg group relative">
|
||||
<input class="form-input flex w-full h-14 pl-12 pr-12 rounded-lg text-white focus:outline-0 focus:ring-0 border border-input-border bg-input-bg focus:border-primary placeholder:text-text-muted text-base font-normal leading-normal transition-colors z-10" id="password" placeholder="Enter your password" type="password"/>
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-text-muted group-focus-within:text-primary transition-colors flex items-center justify-center pointer-events-none z-20">
|
||||
<span class="material-symbols-outlined text-[20px]">lock</span>
|
||||
</div>
|
||||
<button class="absolute right-0 top-0 h-full px-4 text-text-muted hover:text-white transition-colors flex items-center justify-center z-20 focus:outline-none" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]">visibility_off</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Login Button -->
|
||||
<button class="mt-4 flex w-full h-12 cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-primary text-background-dark text-base font-bold leading-normal tracking-[0.015em] hover:bg-primary/90 transition-all active:scale-[0.98] shadow-[0_0_20px_rgba(37,192,244,0.3)] hover:shadow-[0_0_30px_rgba(37,192,244,0.5)]" type="button">
|
||||
<span class="truncate">Login</span>
|
||||
</button>
|
||||
</form>
|
||||
<!-- Footer Meta -->
|
||||
<div class="mt-8 flex justify-center gap-6 border-t border-input-border/30 pt-6">
|
||||
<p class="text-text-muted text-xs text-center">
|
||||
Protected by reCAPTCHA. <a class="underline hover:text-primary" href="#">Privacy</a> & <a class="underline hover:text-primary" href="#">Terms</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 518 KiB |
@@ -1,394 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Admin Management Interface</title>
|
||||
<!-- Fonts -->
|
||||
<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;700&family=Noto+Sans:wght@400;500;700&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"/>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<!-- Theme Configuration -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#25c0f4",
|
||||
"primary-hover": "#0ea5e9",
|
||||
"background-light": "#f5f8f8",
|
||||
"background-dark": "#111618", /* Matched to snippets */
|
||||
"surface-dark": "#192226",
|
||||
"surface-highlight": "#283539",
|
||||
"text-secondary": "#9cb2ba",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Space Grotesk", "sans-serif"],
|
||||
"body": ["Noto Sans", "sans-serif"],
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, .font-display {
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
}
|
||||
/* Custom Scrollbar for dark theme */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #111618;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #283539;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3a4b50;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white overflow-hidden flex h-screen w-full">
|
||||
<!-- Sidebar -->
|
||||
<aside class="flex flex-col w-64 h-full border-r border-[#283539] bg-background-dark flex-shrink-0 transition-all duration-300">
|
||||
<div class="p-6 flex items-center gap-3">
|
||||
<div class="size-8 text-primary">
|
||||
<svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<path clip-rule="evenodd" d="M24 18.4228L42 11.475V34.3663C42 34.7796 41.7457 35.1504 41.3601 35.2992L24 42V18.4228Z" fill="currentColor" fill-rule="evenodd"></path>
|
||||
<path clip-rule="evenodd" d="M24 8.18819L33.4123 11.574L24 15.2071L14.5877 11.574L24 8.18819ZM9 15.8487L21 20.4805V37.6263L9 32.9945V15.8487ZM27 37.6263V20.4805L39 15.8487V32.9945L27 37.6263ZM25.354 2.29885C24.4788 1.98402 23.5212 1.98402 22.646 2.29885L4.98454 8.65208C3.7939 9.08038 3 10.2097 3 11.475V34.3663C3 36.0196 4.01719 37.5026 5.55962 38.098L22.9197 44.7987C23.6149 45.0671 24.3851 45.0671 25.0803 44.7987L42.4404 38.098C43.9828 37.5026 45 36.0196 45 34.3663V11.475C45 10.2097 44.2061 9.08038 43.0155 8.65208L25.354 2.29885Z" fill="currentColor" fill-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-white text-xl font-bold tracking-tight">AI Discovery</h1>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 flex flex-col gap-2 mt-4">
|
||||
<div class="px-3 py-2">
|
||||
<p class="text-text-secondary text-xs font-bold uppercase tracking-wider mb-2">Main Menu</p>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-surface-highlight text-white group transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-primary group-hover:text-white transition-colors">language</span>
|
||||
<span class="text-sm font-medium">Website Management</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-white transition-colors mt-1" href="#">
|
||||
<span class="material-symbols-outlined">label</span>
|
||||
<span class="text-sm font-medium">Tag Management</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-white transition-colors mt-1" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="text-sm font-medium">Administrators</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 mt-auto">
|
||||
<p class="text-text-secondary text-xs font-bold uppercase tracking-wider mb-2">System</p>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-secondary hover:bg-surface-highlight hover:text-white transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-sm font-medium">Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-[#283539]">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 border border-[#283539]" data-alt="User profile picture showing a minimal avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDlD4gGno1M8YZQOQ6QyLdUZtaU7klHxTjeH2Kf3aH39GkQ56ld-iSPZ6RCbkxzCeXJzMq6_29atBkPks_wP-Q7pvpyNAAZW2FJKxOFTSrcQZp2O30dVhn-DPYELqG1fdqM-hPfluduBN-I0k_Q8cJrJ3LKVUUgnxsE8bWD4CSo8CoYvXmtK03j86TehszyrfWfKpoBcu8XaHpjh10EGoDHFYeSJ6AKJQDsp_0iz5LC4bOXvyg0_Nef5mQOBtQ9zKuKSbCYhRuu7Wyo");'></div>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<h2 class="text-white text-sm font-medium truncate">Admin User</h2>
|
||||
<p class="text-text-secondary text-xs truncate">admin@ai-discovery.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 flex flex-col h-full overflow-hidden bg-background-dark relative">
|
||||
<!-- Top Header -->
|
||||
<header class="h-16 border-b border-[#283539] bg-background-dark/95 backdrop-blur px-8 flex items-center justify-between shrink-0 z-20">
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<a class="text-text-secondary hover:text-white transition-colors" href="#">Dashboard</a>
|
||||
<span class="text-text-secondary">/</span>
|
||||
<span class="text-white font-medium">Website Management</span>
|
||||
</div>
|
||||
<!-- Global Actions -->
|
||||
<div class="flex items-center gap-6">
|
||||
<!-- Search -->
|
||||
<div class="relative w-64 hidden md:block">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-text-secondary">
|
||||
<span class="material-symbols-outlined text-[20px]">search</span>
|
||||
</span>
|
||||
<input class="w-full bg-surface-highlight border-none rounded-lg py-2 pl-10 pr-4 text-sm text-white placeholder-text-secondary focus:ring-1 focus:ring-primary focus:bg-[#1f292d] transition-all" placeholder="Global search..." type="text"/>
|
||||
</div>
|
||||
<!-- Notifications -->
|
||||
<button class="relative text-text-secondary hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
<span class="absolute top-0 right-0 size-2 bg-primary rounded-full"></span>
|
||||
</button>
|
||||
<!-- Logout -->
|
||||
<button class="text-text-secondary hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Scrollable Content Area -->
|
||||
<div class="flex-1 overflow-y-auto overflow-x-hidden p-8 scroll-smooth">
|
||||
<div class="max-w-[1400px] mx-auto flex flex-col gap-8 pb-10">
|
||||
<!-- Page Title & Toolbar -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">Website Management</h1>
|
||||
<p class="text-text-secondary text-base">Manage and curate AI tools for the discovery platform.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 h-10 px-4 rounded-lg bg-surface-highlight hover:bg-[#344247] text-white text-sm font-medium transition-colors border border-transparent hover:border-[#4a5a60]">
|
||||
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
||||
<span>Filter</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-10 px-4 rounded-lg bg-surface-highlight hover:bg-[#344247] text-white text-sm font-medium transition-colors border border-transparent hover:border-[#4a5a60]">
|
||||
<span class="material-symbols-outlined text-[20px]">download</span>
|
||||
<span>Export</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Grid: Table & Quick Add Form -->
|
||||
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8 items-start">
|
||||
<!-- Left Column: Data Table -->
|
||||
<div class="xl:col-span-2 flex flex-col gap-4">
|
||||
<!-- Table Toolbar -->
|
||||
<div class="bg-surface-dark border border-[#283539] rounded-t-xl p-4 flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<div class="relative w-full sm:w-72">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-text-secondary">
|
||||
<span class="material-symbols-outlined text-[20px]">search</span>
|
||||
</span>
|
||||
<input class="w-full bg-[#111618] border border-[#283539] rounded-lg py-2 pl-10 pr-4 text-sm text-white placeholder-text-secondary focus:ring-1 focus:ring-primary" placeholder="Search websites..." type="text"/>
|
||||
</div>
|
||||
<div class="text-sm text-text-secondary">
|
||||
Showing <span class="text-white font-medium">1-10</span> of <span class="text-white font-medium">128</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table -->
|
||||
<div class="bg-surface-dark border border-[#283539] rounded-b-xl overflow-hidden shadow-xl">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-[#1e272c] border-b border-[#283539]">
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary w-10">
|
||||
<input class="rounded bg-[#111618] border-[#283539] text-primary focus:ring-offset-[#111618]" type="checkbox"/>
|
||||
</th>
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary">Website / Tool</th>
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary">Tags</th>
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary">Status</th>
|
||||
<th class="p-4 text-xs font-semibold uppercase tracking-wider text-text-secondary text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-[#283539]">
|
||||
<!-- Row 1 -->
|
||||
<tr class="group hover:bg-[#1e272c] transition-colors">
|
||||
<td class="p-4">
|
||||
<input class="rounded bg-[#111618] border-[#283539] text-primary focus:ring-offset-[#111618]" type="checkbox"/>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-lg bg-cover bg-center shrink-0 border border-[#283539]" data-alt="Icon of Chat AI Tool" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB_TTlnbkP1ygA1GNesXOhx_H9yup1gOKwumL9Qnh8VcPEUlwDRA89LRKhO8tyDtOtvtfrGh7CRSnP5xMOyb_GvJgQ-FQToY20cgHuTpVeI97COVlA4e2wOp04SH5ogk98S2SFF4jtSoS7RldXDdaafrysnsulA7_euKFIDf42NTPk_YwR4aglKFOeiQCQT-ITD6hCZjE8kqEfam8E6onBbJ14KZt2sE8gn0VP-pzzgAgPlr3htq5j6T26Tijk8V7SIFQGlB20GjSsb");'></div>
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-white group-hover:text-primary transition-colors">ChatGPT</h3>
|
||||
<p class="text-xs text-text-secondary truncate max-w-[200px]">openai.com/chatgpt</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-[#283539] text-white border border-[#3a4b50]">LLM</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-[#283539] text-white border border-[#3a4b50]">Chatbot</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1.5 rounded-md hover:bg-primary/20 hover:text-primary text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||
</button>
|
||||
<button class="p-1.5 rounded-md hover:bg-red-500/20 hover:text-red-400 text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="group hover:bg-[#1e272c] transition-colors">
|
||||
<td class="p-4">
|
||||
<input class="rounded bg-[#111618] border-[#283539] text-primary focus:ring-offset-[#111618]" type="checkbox"/>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-lg bg-cover bg-center shrink-0 border border-[#283539]" data-alt="Icon of Midjourney AI" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA-IWUA_5FInPrqeTtZDcb85HR0X3jABxlDeG811Bd-_2x4ISEl8huiNp-kAG75fBmopT3dd5nSp1E0wCtOxXMFoP6HR9nrg4PfNDxjLao4ulneOOrJMgL4LdtuXgKxrQHm1WDoG4TviJ-lIYXzLVI9Yw-9mjDFihMurEOdJlarrMZekyEVrogy_jliQPo3oXvcemTUiJAZz9UCwq8LOEr09EqzU25kXCXx3Z3B0XvdM6VDUrQN8mKtKU1eU9CVwsLJfOKZ09CpJIwx");'></div>
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-white group-hover:text-primary transition-colors">Midjourney</h3>
|
||||
<p class="text-xs text-text-secondary truncate max-w-[200px]">midjourney.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-[#283539] text-white border border-[#3a4b50]">Image Gen</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-[#283539] text-white border border-[#3a4b50]">Art</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-400 border border-green-500/20">
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1.5 rounded-md hover:bg-primary/20 hover:text-primary text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||
</button>
|
||||
<button class="p-1.5 rounded-md hover:bg-red-500/20 hover:text-red-400 text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="group hover:bg-[#1e272c] transition-colors">
|
||||
<td class="p-4">
|
||||
<input class="rounded bg-[#111618] border-[#283539] text-primary focus:ring-offset-[#111618]" type="checkbox"/>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="size-10 rounded-lg bg-cover bg-center shrink-0 border border-[#283539]" data-alt="Icon of Copy AI Tool" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB6XdW_8pAKAs4YPwwYM4bcub_ilJ2i6L7baANaKdNNmDP5k1TRngBOsHE0aTy6sBuBJG49alX-4PRkz55qTcxsrRy6_S8rqD5gCTWLquEDcjqfSai-s7GEdZcBCNJ6G5hEFJM7JFli5r5ETcPq2QBz_NQT0W94XYhzaYpZQVEX-su5ywWxAcrfOFrWrhwC5RCiZL0B7AinM4c1pRSfeDtDpVTzxTvx0MrDi6gBH-duuCUmbr0YjkqhyaZqpRpX-ZhW-JiJQ3sKPUCA");'></div>
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-white group-hover:text-primary transition-colors">Copy.ai</h3>
|
||||
<p class="text-xs text-text-secondary truncate max-w-[200px]">copy.ai</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-[#283539] text-white border border-[#3a4b50]">Writing</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-[#283539] text-white border border-[#3a4b50]">Marketing</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">
|
||||
Pending
|
||||
</span>
|
||||
</td>
|
||||
<td class="p-4 text-right">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1.5 rounded-md hover:bg-primary/20 hover:text-primary text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">edit</span>
|
||||
</button>
|
||||
<button class="p-1.5 rounded-md hover:bg-red-500/20 hover:text-red-400 text-text-secondary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="flex items-center justify-between px-4 py-3 border-t border-[#283539]">
|
||||
<div class="flex flex-1 justify-between sm:hidden">
|
||||
<a class="relative inline-flex items-center rounded-md border border-[#283539] bg-[#111618] px-4 py-2 text-sm font-medium text-text-secondary hover:bg-[#1e272c] hover:text-white" href="#">Previous</a>
|
||||
<a class="relative ml-3 inline-flex items-center rounded-md border border-[#283539] bg-[#111618] px-4 py-2 text-sm font-medium text-text-secondary hover:bg-[#1e272c] hover:text-white" href="#">Next</a>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-end">
|
||||
<nav aria-label="Pagination" class="isolate inline-flex -space-x-px rounded-md shadow-sm">
|
||||
<a class="relative inline-flex items-center rounded-l-md px-2 py-2 text-text-secondary ring-1 ring-inset ring-[#283539] hover:bg-[#1e272c] focus:z-20 focus:outline-offset-0" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
|
||||
</a>
|
||||
<a aria-current="page" class="relative z-10 inline-flex items-center bg-primary px-4 py-2 text-sm font-semibold text-[#111618] focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" href="#">1</a>
|
||||
<a class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-text-secondary ring-1 ring-inset ring-[#283539] hover:bg-[#1e272c] focus:z-20 focus:outline-offset-0" href="#">2</a>
|
||||
<a class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-text-secondary ring-1 ring-inset ring-[#283539] hover:bg-[#1e272c] focus:z-20 focus:outline-offset-0" href="#">3</a>
|
||||
<a class="relative inline-flex items-center rounded-r-md px-2 py-2 text-text-secondary ring-1 ring-inset ring-[#283539] hover:bg-[#1e272c] focus:z-20 focus:outline-offset-0" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Add/Edit Form -->
|
||||
<div class="xl:col-span-1">
|
||||
<div class="bg-surface-dark border border-[#283539] rounded-xl shadow-xl sticky top-8">
|
||||
<div class="px-6 py-4 border-b border-[#283539] flex justify-between items-center bg-[#1e272c] rounded-t-xl">
|
||||
<h2 class="text-lg font-bold text-white">Add New Website</h2>
|
||||
<span class="material-symbols-outlined text-text-secondary cursor-pointer hover:text-white">close</span>
|
||||
</div>
|
||||
<div class="p-6 flex flex-col gap-6">
|
||||
<!-- URL Input + Auto Fetch -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="text-sm font-medium text-white">Website URL <span class="text-primary">*</span></label>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="relative">
|
||||
<input class="w-full bg-[#111618] border border-[#283539] rounded-lg py-2.5 px-3 text-sm text-white placeholder-text-secondary focus:ring-1 focus:ring-primary focus:border-primary transition-all" placeholder="https://example.com" type="url"/>
|
||||
<div class="absolute inset-y-0 right-3 flex items-center">
|
||||
<span class="material-symbols-outlined text-green-500 text-[18px]" style="display:none;">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CRITICAL: Auto-fetch Button -->
|
||||
<button class="flex items-center justify-center gap-2 w-full py-2 px-3 rounded-lg border border-primary/30 bg-primary/5 hover:bg-primary/10 text-primary text-sm font-medium transition-colors group" type="button">
|
||||
<span class="material-symbols-outlined text-[18px] group-hover:animate-spin">autorenew</span>
|
||||
Auto-fetch Website Info
|
||||
</button>
|
||||
<p class="text-xs text-text-secondary mt-1">
|
||||
Our AI will attempt to scrape metadata and descriptions automatically.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Other Fields -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="text-sm font-medium text-white">Tool Name</label>
|
||||
<input class="w-full bg-[#111618] border border-[#283539] rounded-lg py-2.5 px-3 text-sm text-white placeholder-text-secondary focus:ring-1 focus:ring-primary focus:border-primary" placeholder="e.g. ChatGPT" type="text"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="text-sm font-medium text-white">Short Description</label>
|
||||
<textarea class="w-full bg-[#111618] border border-[#283539] rounded-lg py-2.5 px-3 text-sm text-white placeholder-text-secondary focus:ring-1 focus:ring-primary focus:border-primary resize-none" placeholder="Enter a brief description of the AI tool..." rows="4"></textarea>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="text-sm font-medium text-white">Tags</label>
|
||||
<div class="p-3 bg-[#111618] border border-[#283539] rounded-lg min-h-[44px] flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center gap-1 px-2 py-1 rounded bg-[#283539] text-xs text-white">
|
||||
Productivity
|
||||
<span class="material-symbols-outlined text-[14px] cursor-pointer hover:text-red-400">close</span>
|
||||
</span>
|
||||
<input class="bg-transparent border-none p-0 text-sm text-white placeholder-text-secondary focus:ring-0 w-24" placeholder="+ Add tag" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Status Toggle -->
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<label class="text-sm font-medium text-white">Active Status</label>
|
||||
<button class="w-11 h-6 bg-primary rounded-full relative cursor-pointer">
|
||||
<span class="absolute top-1 left-6 size-4 bg-white rounded-full shadow-sm transition-all"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 py-4 border-t border-[#283539] flex gap-3 bg-[#1e272c] rounded-b-xl">
|
||||
<button class="flex-1 py-2.5 rounded-lg bg-primary hover:bg-primary-hover text-[#111618] text-sm font-bold shadow-lg shadow-primary/20 transition-all">
|
||||
Save Website
|
||||
</button>
|
||||
<button class="px-4 py-2.5 rounded-lg border border-[#283539] bg-transparent hover:bg-[#283539] text-white text-sm font-medium transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 249 KiB |
@@ -1,270 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>AI Tool Detail Page</title>
|
||||
<!-- Google Fonts -->
|
||||
<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&family=Noto+Sans:wght@400;500;700&display=swap" rel="stylesheet"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"/>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<!-- Theme Config -->
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#25c0f4",
|
||||
"primary-dark": "#0ea5e9",
|
||||
"secondary": "#a855f7", // Adding purple for the gradient request
|
||||
"background-light": "#f5f8f8",
|
||||
"background-dark": "#101e22",
|
||||
"surface-dark": "#1a262b",
|
||||
"surface-border": "#283539",
|
||||
"text-secondary": "#9cb2ba"
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Space Grotesk", "sans-serif"],
|
||||
"body": ["Noto Sans", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(26, 38, 43, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(40, 53, 57, 0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white min-h-screen flex flex-col selection:bg-primary selection:text-background-dark">
|
||||
<!-- Top Navigation -->
|
||||
<div class="w-full border-b border-surface-border bg-background-dark/95 backdrop-blur sticky top-0 z-50">
|
||||
<div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<header class="flex items-center justify-between h-16">
|
||||
<!-- Logo Area -->
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="flex items-center gap-3 text-white">
|
||||
<div class="size-8 text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">token</span>
|
||||
</div>
|
||||
<h2 class="text-white text-xl font-bold tracking-tight">AI Discovery</h2>
|
||||
</div>
|
||||
<!-- Desktop Nav -->
|
||||
<div class="hidden md:flex items-center gap-6">
|
||||
<a class="text-text-secondary hover:text-white text-sm font-medium transition-colors" href="#">Categories</a>
|
||||
<a class="text-text-secondary hover:text-white text-sm font-medium transition-colors" href="#">Submit Tool</a>
|
||||
<a class="text-text-secondary hover:text-white text-sm font-medium transition-colors" href="#">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Actions -->
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="hidden sm:flex relative group">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-text-secondary text-[20px]">search</span>
|
||||
</div>
|
||||
<input class="bg-surface-border/50 hover:bg-surface-border focus:bg-surface-border text-white text-sm rounded-lg pl-10 pr-4 py-2 w-48 focus:w-64 transition-all outline-none ring-0 border border-transparent focus:border-primary/50 placeholder:text-text-secondary/70" placeholder="Search tools..."/>
|
||||
</div>
|
||||
<button class="flex items-center justify-center rounded-lg h-9 px-4 bg-primary hover:bg-primary-dark text-background-dark text-sm font-bold transition-colors">
|
||||
Log In
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Layout -->
|
||||
<main class="flex-grow w-full max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Back Button -->
|
||||
<div class="mb-8">
|
||||
<button class="group flex items-center gap-2 text-text-secondary hover:text-primary transition-colors text-sm font-bold">
|
||||
<span class="material-symbols-outlined text-[20px] group-hover:-translate-x-1 transition-transform">arrow_back</span>
|
||||
<span>Back to Home</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
|
||||
<!-- Left Column: Header Info + Content -->
|
||||
<div class="lg:col-span-8 flex flex-col gap-8">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col sm:flex-row gap-6 items-start">
|
||||
<!-- Logo Container -->
|
||||
<div class="relative shrink-0">
|
||||
<div class="absolute -inset-1 bg-gradient-to-br from-primary via-purple-500 to-secondary rounded-2xl opacity-30 blur-md"></div>
|
||||
<div class="relative size-[120px] rounded-xl bg-surface-border flex items-center justify-center overflow-hidden border border-surface-border bg-cover bg-center" data-alt="Abstract neural network pattern in deep blue and purple" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAFm-_1orioA8YwgKaNGCzxomQeon7z13YmJCs2VpIoXP6J2a5kLgu_mC9IFA-cRA5s6yNaDPiWRxhF8tTX4FFOTbngaHydfCmAMNxU2EuZ2burR-hLOggJYl24v1Ry7GaNu6ETcYui4SIfvWqNs43vwA4vEmoogV3TxVzuDRDHsy5nj9ab4TnW4c5mVgqHPttLIF1NKTm6rtEcPnWW1jtCihIAAqZVnst9o0Z-IyAYGJoPjNajRdJZGR5NDfiBf-tdr79Bo42KY_DX');">
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title & Meta -->
|
||||
<div class="flex flex-col gap-3 flex-1">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-white tracking-tight font-display mb-1">NeuroGen AI</h1>
|
||||
<a class="text-primary hover:text-primary-dark hover:underline text-base font-medium flex items-center gap-1" href="#">
|
||||
www.neurogen.ai
|
||||
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Tags -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-border text-text-secondary border border-transparent hover:border-primary/30 transition-colors cursor-default">Generative AI</span>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-border text-text-secondary border border-transparent hover:border-primary/30 transition-colors cursor-default">Copywriting</span>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-border text-text-secondary border border-transparent hover:border-primary/30 transition-colors cursor-default">Productivity</span>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">Free Trial</span>
|
||||
</div>
|
||||
<!-- Stats Row -->
|
||||
<div class="flex items-center gap-6 mt-1 text-text-secondary text-sm">
|
||||
<div class="flex items-center gap-2" title="Total Views">
|
||||
<span class="material-symbols-outlined text-[18px]">visibility</span>
|
||||
<span>12,450 Views</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2" title="Date Added">
|
||||
<span class="material-symbols-outlined text-[18px]">calendar_today</span>
|
||||
<span>Added Oct 24, 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-surface-border/60"/>
|
||||
<!-- Main Content Body -->
|
||||
<div class="space-y-8">
|
||||
<!-- Overview -->
|
||||
<section>
|
||||
<h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">info</span>
|
||||
Product Overview
|
||||
</h3>
|
||||
<p class="text-text-secondary leading-relaxed text-lg">
|
||||
NeuroGen AI is an advanced copywriting assistant designed to help marketers, writers, and businesses generate high-converting content in seconds. By leveraging state-of-the-art natural language processing models, it understands context, tone, and brand voice to deliver tailored outputs.
|
||||
</p>
|
||||
</section>
|
||||
<!-- Image Gallery / Preview (Optional visual break) -->
|
||||
<div class="rounded-xl overflow-hidden border border-surface-border relative group aspect-video w-full bg-surface-dark">
|
||||
<div class="absolute inset-0 bg-cover bg-center" data-alt="Dashboard interface of NeuroGen AI showing analytics and text editor" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCtwM-4OkGIPG4sQqABpRcLvOgKvLzuyVlQJUVcU8SqFsVod_jck_vFm-q7UX70vUaaF7UPEa--rkf18dMi5_qYcXYsjTzd5ehM3ga_OoIr1r6wnRTnRxKcrUUC5USP72vdsFJkRFeKmH6epH1Avi5tglJ732VTvoNiuys499jctwZ67d4Yu8Slfn0EO4Ny8zIjzPRGLer8lMaEeZPMagNbgn4asMLvmDtTep3mgPzwTscfzoOFVChGqNak0ZmLyOiVY7vKIapdHyoz');">
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-background-dark via-transparent to-transparent opacity-60"></div>
|
||||
<div class="absolute bottom-4 left-4">
|
||||
<p class="text-white font-medium text-sm bg-black/50 backdrop-blur px-3 py-1 rounded-lg">Dashboard Interface</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Detailed Description -->
|
||||
<section>
|
||||
<h3 class="text-xl font-bold text-white mb-4">Detailed Description</h3>
|
||||
<div class="text-text-secondary space-y-4 leading-relaxed">
|
||||
<p>
|
||||
Writing high-quality content consistently is a challenge for modern businesses. NeuroGen AI bridges the gap between human creativity and machine speed. Unlike generic text generators, NeuroGen allows users to fine-tune specific parameters such as emotional resonance, sentence structure complexity, and SEO keyword density.
|
||||
</p>
|
||||
<p>
|
||||
The platform includes specialized templates for:
|
||||
</p>
|
||||
<ul class="list-disc pl-5 space-y-2 text-gray-400 marker:text-primary">
|
||||
<li>Social media captions (Instagram, LinkedIn, Twitter)</li>
|
||||
<li>Long-form blog posts with automatic formatting</li>
|
||||
<li>Email marketing sequences</li>
|
||||
<li>Ad copy variants for A/B testing</li>
|
||||
</ul>
|
||||
<p>
|
||||
Security is paramount; NeuroGen ensures that your proprietary data is never used to train public models. Enterprise-grade encryption and team collaboration features make it a suitable choice for large organizations looking to scale their content operations.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Sidebar -->
|
||||
<div class="lg:col-span-4 space-y-6">
|
||||
<!-- CTA Card -->
|
||||
<div class="glass-card rounded-2xl p-6 flex flex-col gap-4 shadow-xl shadow-black/20 sticky top-24">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-white font-bold text-lg">Try it now</span>
|
||||
<span class="px-2 py-1 rounded bg-green-500/20 text-green-400 text-xs font-bold border border-green-500/20">ONLINE</span>
|
||||
</div>
|
||||
<a class="group relative flex items-center justify-center w-full overflow-hidden rounded-xl bg-gradient-to-r from-primary via-primary to-purple-500 p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 transition-all hover:scale-[1.02]" href="#">
|
||||
<span class="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)] opacity-0 group-hover:opacity-100 transition-opacity"></span>
|
||||
<div class="relative flex h-12 w-full items-center justify-center rounded-xl bg-background-dark/10 group-hover:bg-transparent px-8 py-1 backdrop-blur-3xl transition-colors">
|
||||
<span class="flex items-center gap-2 text-background-dark font-bold text-base uppercase tracking-wide">
|
||||
Visit Website
|
||||
<span class="material-symbols-outlined text-[20px] font-bold">arrow_outward</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Overlay for text color correction on hover/default since bg changes -->
|
||||
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<span class="flex items-center gap-2 text-white font-bold text-base uppercase tracking-wide group-hover:text-white transition-colors">
|
||||
Visit Website
|
||||
<span class="material-symbols-outlined text-[20px] font-bold">arrow_outward</span>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<p class="text-xs text-center text-text-secondary">
|
||||
Opens in a new tab • <span class="text-white">neurogen.ai</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- Features Box -->
|
||||
<div class="rounded-2xl border border-surface-border bg-surface-dark/50 p-6">
|
||||
<h3 class="text-lg font-bold text-white mb-5 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-secondary">verified</span>
|
||||
Main Features
|
||||
</h3>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="mt-0.5 rounded-full bg-primary/20 p-1">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] block">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-white">Contextual Awareness</p>
|
||||
<p class="text-xs text-text-secondary mt-0.5">Understands previous inputs to maintain thread continuity.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="mt-0.5 rounded-full bg-primary/20 p-1">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] block">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-white">Multi-language Support</p>
|
||||
<p class="text-xs text-text-secondary mt-0.5">Generate content in over 25 languages natively.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="mt-0.5 rounded-full bg-primary/20 p-1">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] block">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-white">SEO Optimization</p>
|
||||
<p class="text-xs text-text-secondary mt-0.5">Built-in keyword analyzer and suggestion tool.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<div class="mt-0.5 rounded-full bg-primary/20 p-1">
|
||||
<span class="material-symbols-outlined text-primary text-[16px] block">check</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-white">Export to CMS</p>
|
||||
<p class="text-xs text-text-secondary mt-0.5">Direct integration with WordPress and Ghost.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Share / Report -->
|
||||
<div class="flex gap-4">
|
||||
<button class="flex-1 py-3 rounded-lg border border-surface-border bg-transparent text-text-secondary hover:text-white hover:bg-surface-border transition-colors text-sm font-medium flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">share</span>
|
||||
Share
|
||||
</button>
|
||||
<button class="flex-1 py-3 rounded-lg border border-surface-border bg-transparent text-text-secondary hover:text-red-400 hover:border-red-400/30 hover:bg-red-400/10 transition-colors text-sm font-medium flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">flag</span>
|
||||
Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Spacer -->
|
||||
<div class="h-20"></div>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 654 KiB |
@@ -1,383 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ZJPB - AI Tool Discovery</title>
|
||||
<!-- Google Fonts -->
|
||||
<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"/>
|
||||
<!-- Material Symbols -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"/>
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#25c0f4",
|
||||
secondary: "#7c3aed", // Adding purple for the gradient mix
|
||||
"background-light": "#f5f8f8",
|
||||
"background-dark": "#111618",
|
||||
"surface-dark": "#1b2427",
|
||||
"border-dark": "#283539",
|
||||
},
|
||||
fontFamily: {
|
||||
"display": ["Space Grotesk", "sans-serif"],
|
||||
"body": ["Noto Sans", "sans-serif"],
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-tech': 'linear-gradient(135deg, #25c0f4 0%, #7c3aed 100%)',
|
||||
'gradient-text': 'linear-gradient(to right, #25c0f4, #a855f7)',
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
}
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #25c0f4, #c084fc);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 30px -10px rgba(37, 192, 244, 0.15);
|
||||
border-color: #25c0f4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white antialiased selection:bg-primary selection:text-black">
|
||||
<div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">
|
||||
<!-- Background Gradient Elements for Tech Vibe -->
|
||||
<div class="fixed top-0 left-0 w-full h-96 bg-primary/5 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>
|
||||
<!-- Top Navigation -->
|
||||
<header class="sticky top-0 z-50 w-full border-b border-solid border-border-dark bg-background-dark/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">
|
||||
<!-- Logo -->
|
||||
<a class="flex items-center gap-3 text-white hover:opacity-90 transition-opacity" href="#">
|
||||
<div class="flex items-center justify-center size-8 rounded-lg bg-gradient-tech text-black">
|
||||
<span class="material-symbols-outlined" style="font-size: 20px; font-weight: 700;">bolt</span>
|
||||
</div>
|
||||
<h2 class="text-white text-lg font-bold leading-tight tracking-tight">ZJPB</h2>
|
||||
</a>
|
||||
<!-- Desktop Nav -->
|
||||
<nav class="hidden md:flex items-center gap-8">
|
||||
<a class="text-gray-300 hover:text-primary text-sm font-medium transition-colors" href="#">Home</a>
|
||||
<a class="text-gray-300 hover:text-primary text-sm font-medium transition-colors" href="#">Categories</a>
|
||||
<a class="text-gray-300 hover:text-primary text-sm font-medium transition-colors" href="#">Community</a>
|
||||
<a class="text-gray-300 hover:text-primary text-sm font-medium transition-colors" href="#">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Search -->
|
||||
<div class="hidden lg:flex items-center bg-surface-dark border border-border-dark rounded-full h-10 px-4 w-64 focus-within:border-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-gray-400" style="font-size: 20px;">search</span>
|
||||
<input class="bg-transparent border-none text-white text-sm placeholder-gray-500 focus:ring-0 w-full ml-2" placeholder="Search AI tools..." type="text"/>
|
||||
</div>
|
||||
<!-- Auth Buttons -->
|
||||
<button class="hidden sm:flex h-9 px-4 items-center justify-center rounded-lg text-sm font-bold text-white hover:bg-white/5 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-background-dark text-sm font-bold transition-colors shadow-[0_0_15px_rgba(37,192,244,0.3)]">
|
||||
Sign Up
|
||||
</button>
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<button class="md:hidden text-white">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<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">
|
||||
<!-- Hero Section -->
|
||||
<div class="flex flex-col md:flex-row items-start md:items-end justify-between gap-6 pb-6 border-b border-border-dark/50">
|
||||
<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-white mb-2">
|
||||
ZJPB - <span class="text-gradient">焦提示词</span>
|
||||
</h1>
|
||||
<p class="text-gray-400 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-dark border border-border-dark hover:border-primary text-white px-5 py-2.5 rounded-lg transition-all group whitespace-nowrap">
|
||||
<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>
|
||||
<!-- Filter Chips -->
|
||||
<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-background-dark font-bold text-sm shadow-[0_0_10px_rgba(37,192,244,0.4)]">
|
||||
All Tools
|
||||
</button>
|
||||
<button class="flex items-center gap-2 h-9 px-5 rounded-full bg-surface-dark border border-border-dark text-gray-300 hover:text-white hover:border-gray-500 font-medium text-sm transition-all">
|
||||
<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-dark border border-border-dark text-gray-300 hover:text-white hover:border-gray-500 font-medium text-sm transition-all">
|
||||
<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-dark border border-border-dark text-gray-300 hover:text-white hover:border-gray-500 font-medium text-sm transition-all">
|
||||
<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-dark border border-border-dark text-gray-300 hover:text-white hover:border-gray-500 font-medium text-sm transition-all">
|
||||
<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-dark border border-border-dark text-gray-300 hover:text-white hover:border-gray-500 font-medium text-sm transition-all">
|
||||
<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-dark border border-border-dark text-gray-300 hover:text-white hover:border-gray-500 font-medium text-sm transition-all">
|
||||
<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-dark border border-border-dark text-gray-300 hover:text-white hover:border-gray-500 font-medium text-sm transition-all">
|
||||
<span class="material-symbols-outlined text-sm">view_in_ar</span> 3D Assets
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tool Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<!-- Card 1 -->
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-dark bg-surface-dark p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden">
|
||||
<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-lg" 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-background-dark text-gray-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-white text-lg font-bold leading-tight group-hover:text-primary transition-colors">ChatGPT</h3>
|
||||
<p class="text-gray-400 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-dark">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Chat</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">NLP</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-gray-500 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>1.2M</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-dark bg-surface-dark p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden">
|
||||
<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-lg" 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-background-dark text-gray-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-white text-lg font-bold leading-tight group-hover:text-primary transition-colors">Midjourney</h3>
|
||||
<p class="text-gray-400 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-dark">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Image</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Art</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-gray-500 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>850k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-dark bg-surface-dark p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden">
|
||||
<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-lg" 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-background-dark text-gray-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-white text-lg font-bold leading-tight group-hover:text-primary transition-colors">Jasper AI</h3>
|
||||
<p class="text-gray-400 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-dark">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Writing</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Marketing</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-gray-500 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>300k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4 -->
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-dark bg-surface-dark p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden">
|
||||
<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-lg" 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-background-dark text-gray-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-white text-lg font-bold leading-tight group-hover:text-primary transition-colors">Runway Gen-2</h3>
|
||||
<p class="text-gray-400 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-dark">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Video</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Gen-AI</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-gray-500 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>420k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5 -->
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-dark bg-surface-dark p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden">
|
||||
<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-lg" 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-background-dark text-gray-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-white text-lg font-bold leading-tight group-hover:text-primary transition-colors">GitHub Copilot</h3>
|
||||
<p class="text-gray-400 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-dark">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Dev</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Coding</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-gray-500 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>1.5M</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 6 -->
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-dark bg-surface-dark p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden">
|
||||
<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-lg" 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-background-dark text-gray-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-white text-lg font-bold leading-tight group-hover:text-primary transition-colors">ElevenLabs</h3>
|
||||
<p class="text-gray-400 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-dark">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Audio</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">TTS</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-gray-500 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>210k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 7 -->
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-dark bg-surface-dark p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden">
|
||||
<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-lg" 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-background-dark text-gray-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-white text-lg font-bold leading-tight group-hover:text-primary transition-colors">Stable Diffusion</h3>
|
||||
<p class="text-gray-400 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-dark">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Open Source</span>
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Image</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-gray-500 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>950k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 8 -->
|
||||
<div class="group relative flex flex-col gap-4 rounded-xl border border-border-dark bg-surface-dark p-5 card-hover transition-all duration-300 cursor-pointer overflow-hidden">
|
||||
<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-lg" 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-background-dark text-gray-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-white text-lg font-bold leading-tight group-hover:text-primary transition-colors">Notion AI</h3>
|
||||
<p class="text-gray-400 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-dark">
|
||||
<div class="flex gap-2">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-white/5 text-gray-300 border border-white/10">Productivity</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-gray-500 text-xs">
|
||||
<span class="material-symbols-outlined text-[14px]">visibility</span>
|
||||
<span>600k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<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-dark text-gray-400 hover:text-white hover:border-primary transition-colors" 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-background-dark text-sm font-bold shadow-[0_0_10px_rgba(37,192,244,0.3)]" href="#">1</a>
|
||||
<a class="flex size-10 items-center justify-center rounded-full border border-transparent hover:bg-surface-dark text-gray-400 hover:text-white 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-surface-dark text-gray-400 hover:text-white text-sm font-medium transition-colors" href="#">3</a>
|
||||
<span class="flex size-10 items-center justify-center text-gray-600">...</span>
|
||||
<a class="flex size-10 items-center justify-center rounded-full border border-transparent hover:bg-surface-dark text-gray-400 hover:text-white text-sm font-medium transition-colors" href="#">12</a>
|
||||
<a class="flex size-10 items-center justify-center rounded-full border border-border-dark text-gray-400 hover:text-white hover:border-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-base">chevron_right</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Simple Footer -->
|
||||
<footer class="w-full border-t border-border-dark bg-background-dark 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-gray-400 text-sm">
|
||||
<span>© 2023 ZJPB AI Directory. All rights reserved.</span>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<a class="text-gray-500 hover:text-primary transition-colors" href="#">
|
||||
<i class="fab fa-twitter text-lg"></i> <!-- Placeholder for social icon -->
|
||||
<span class="text-sm">Twitter</span>
|
||||
</a>
|
||||
<a class="text-gray-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="text-sm">Discord</span>
|
||||
</a>
|
||||
<a class="text-gray-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="text-sm">Privacy Policy</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 354 KiB |
Reference in New Issue
Block a user