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>
122 lines
6.8 KiB
HTML
122 lines
6.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}管理员登录 - ZJPB 焦提示词{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.glass-panel {
|
|
background: rgba(22, 33, 37, 0.7);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
.tech-bg-grid {
|
|
background-image: 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);
|
|
background-size: 100% 100%, 40px 40px, 40px 40px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Override default layout -->
|
|
</div> <!-- Close main wrapper -->
|
|
|
|
<body class="bg-background-dark font-display 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 tech-bg-grid pointer-events-none"></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-gray-400 hover:text-white transition-colors w-fit" href="{{ url_for('index') }}">
|
|
<div class="flex items-center justify-center w-8 h-8 rounded-full border border-border-dark 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">返回首页</span>
|
|
</a>
|
|
|
|
<!-- Login Card -->
|
|
<div class="glass-panel border border-white/5 dark:border-border-dark/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-gray-400 text-base font-normal">输入您的登录凭据以访问后台管理系统</p>
|
|
</div>
|
|
|
|
<!-- Error Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<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">{{ message }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Form -->
|
|
<form method="POST" action="{{ url_for('admin_login') }}" 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">用户名</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-border-dark bg-surface-dark focus:border-primary placeholder:text-gray-500 text-base font-normal leading-normal transition-colors"
|
|
id="username"
|
|
name="username"
|
|
placeholder="输入您的用户名或邮箱"
|
|
type="text"
|
|
required
|
|
autofocus/>
|
|
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-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>
|
|
|
|
<!-- Password Field -->
|
|
<div class="space-y-2">
|
|
<label class="text-white text-sm font-medium leading-normal" for="password">密码</label>
|
|
<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-border-dark bg-surface-dark focus:border-primary placeholder:text-gray-500 text-base font-normal leading-normal transition-colors z-10"
|
|
id="password"
|
|
name="password"
|
|
placeholder="输入您的密码"
|
|
type="password"
|
|
required/>
|
|
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-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>
|
|
</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-black 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="submit">
|
|
<span class="truncate">登录</span>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Footer Meta -->
|
|
<div class="mt-8 flex justify-center gap-6 border-t border-border-dark/30 pt-6">
|
|
<p class="text-gray-400 text-xs text-center">
|
|
ZJPB - 焦提示词 管理系统
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
{% endblock %}
|