jowelin/zjpb.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3c114cdf0b112c789c3fb0d9174766124779204e
zjpb.net/stitch_ai_tool_detail_page/admin_management_interface/code.html
Jowe 9e47ebe749 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>
2025-12-28 19:21:17 +08:00

365 lines
22 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>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&amp;family=Noto+Sans:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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>
Reference in New Issue View Git Blame Copy Permalink