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
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 |
Reference in New Issue
Block a user