2fbca6ebc7
- 前台页面全面升级为Tailwind CSS框架 - 引入Google Fonts (Space Grotesk, Noto Sans) - 主色调更新为#25c0f4 (cyan blue) - 实现玻璃态效果和渐变背景 - 优化首页网格卡片布局和悬停动画 - 优化详情页双栏布局和渐变Logo光晕 - 优化管理员登录页，添加科技网格背景 - Flask-Admin后台完整深色主题 - 统一Material Symbols图标系统 - 网站自动抓取功能界面优化 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
126 lines
6.2 KiB
HTML
126 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
||
<html class="dark" lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{% block title %}ZJPB - 焦提示词{% endblock %}</title>
|
||
<meta name="description" content="{% block description %}焦提示词 - 精选AI工具和产品导航，发现最新最好用的人工智能应用{% endblock %}">
|
||
<meta name="keywords" content="{% block keywords %}ZJPB,焦提示词,AI工具,人工智能,ChatGPT,AI导航{% endblock %}">
|
||
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<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">
|
||
|
||
<!-- Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: "#25c0f4",
|
||
secondary: "#7c3aed",
|
||
"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>
|
||
{% block extra_css %}{% endblock %}
|
||
</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 -->
|
||
<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="{{ url_for('index') }}">
|
||
<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="{{ url_for('index') }}">首页</a>
|
||
{% if current_user.is_authenticated %}
|
||
<a class="text-gray-300 hover:text-primary text-sm font-medium transition-colors" href="{{ url_for('admin.index') }}">后台管理</a>
|
||
{% endif %}
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex items-center gap-4">
|
||
{% if current_user.is_authenticated %}
|
||
<button onclick="window.location.href='{{ url_for('admin_logout') }}'" 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">
|
||
退出
|
||
</button>
|
||
{% else %}
|
||
<button onclick="window.location.href='{{ url_for('admin_login') }}'" 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">
|
||
登录
|
||
</button>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="flex-1">
|
||
{% block content %}{% endblock %}
|
||
</main>
|
||
|
||
<!-- 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>© 2024 ZJPB - 焦提示词. All rights reserved.</span>
|
||
</div>
|
||
<div class="flex gap-6">
|
||
<a class="text-gray-500 hover:text-primary transition-colors text-sm" href="#">
|
||
发现最好用的AI工具
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
{% block extra_js %}{% endblock %}
|
||
</body>
|
||
</html>
|