jowelin/zjpb.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成全站UI优化 - 科技感/未来风设计

Browse Source 
- 前台页面全面升级为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>
This commit is contained in:
Jowe
2025-12-27 22:45:09 +08:00
commit 2fbca6ebc7
32 changed files with 4068 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
templates/detail.html Normal file
View File

@@ -0,0 +1,136 @@
{% extends "base.html" %}
{% block title %}{{ site.name }} - ZJPB 焦提示词{% endblock %}
{% block description %}{{ site.short_desc or site.description[:150] }}{% endblock %}
{% block keywords %}{{ site.name }},{% for tag in site.tags %}{{ tag.name }},{% endfor %}ZJPB,焦提示词,AI工具{% endblock %}
{% block content %}
<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">
<a href="{{ url_for('index') }}" class="group flex items-center gap-2 text-gray-400 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>返回首页</span>
</a>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
<!-- Left Column: Main 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>
{% if site.logo %}
<div class="relative size-[120px] rounded-xl bg-surface-dark flex items-center justify-center overflow-hidden border border-border-dark" style="background-image: url('{{ site.logo }}'); background-size: cover; background-position: center;"></div>
{% else %}
<div class="relative size-[120px] rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center border border-border-dark">
<span class="text-5xl font-bold text-black">{{ site.name[0] }}</span>
</div>
{% endif %}
</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">{{ site.name }}</h1>
<a class="text-primary hover:text-primary-dark hover:underline text-base font-medium flex items-center gap-1" href="{{ site.url }}" target="_blank">
{{ site.url }}
<span class="material-symbols-outlined text-[16px]">open_in_new</span>
</a>
</div>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
{% for tag in site.tags %}
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-surface-dark text-gray-300 border border-border-dark hover:border-primary/30 transition-colors cursor-default">
{{ tag.name }}
</span>
{% endfor %}
</div>
<!-- Stats Row -->
<div class="flex items-center gap-6 mt-1 text-gray-400 text-sm">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">visibility</span>
<span>{{ site.view_count }} 次浏览</span>
</div>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">calendar_today</span>
<span>{{ site.created_at.strftime('%Y年%m月%d日') }}</span>
</div>
</div>
</div>
</div>
<hr class="border-border-dark/60"/>
<!-- Main Content Body -->
<div class="space-y-8">
<!-- Overview -->
{% if site.short_desc %}
<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>
产品简介
</h3>
<p class="text-gray-400 leading-relaxed text-lg">
{{ site.short_desc }}
</p>
</section>
{% endif %}
<!-- Detailed Description -->
{% if site.description %}
<section>
<h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">article</span>
详细介绍
</h3>
<div class="text-gray-400 space-y-4 leading-relaxed whitespace-pre-wrap">
{{ site.description|safe }}
</div>
</section>
{% endif %}
<!-- Features -->
{% if site.features %}
<section>
<h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">star</span>
主要功能
</h3>
<div class="text-gray-400 space-y-4 leading-relaxed whitespace-pre-wrap">
{{ site.features|safe }}
</div>
</section>
{% endif %}
</div>
</div>
<!-- Right Column: Sidebar -->
<div class="lg:col-span-4 space-y-6">
<!-- CTA Card -->
<div class="rounded-2xl p-6 flex flex-col gap-4 shadow-xl shadow-black/20 sticky top-24 bg-surface-dark/60 backdrop-blur-xl border border-border-dark">
<div class="flex items-center justify-between mb-2">
<span class="text-white font-bold text-lg">立即体验</span>
</div>
<a class="group relative flex items-center justify-center w-full overflow-hidden rounded-xl bg-primary hover:bg-primary/90 p-4 focus:outline-none transition-all hover:scale-[1.02] shadow-[0_0_20px_rgba(37,192,244,0.3)] hover:shadow-[0_0_30px_rgba(37,192,244,0.5)]" href="{{ site.url }}" target="_blank">
<span class="flex items-center gap-2 text-black font-bold text-base uppercase tracking-wide">
访问网站
<span class="material-symbols-outlined text-[20px] font-bold">arrow_outward</span>
</span>
</a>
<div class="pt-4 border-t border-border-dark">
<p class="text-gray-500 text-xs text-center">
{{ site.url }}
</p>
</div>
</div>
</div>
</div>
</main>
{% endblock %}