81 lines
4.5 KiB
HTML
81 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}登录 - AI 视界{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="w-full h-full flex items-center justify-center p-6 bg-slate-50/50 backdrop-blur-sm">
|
|
<div
|
|
class="auth-card w-full max-w-md space-y-8 bg-white p-10 rounded-[2.5rem] shadow-2xl border border-slate-100 relative z-10">
|
|
<div class="text-center space-y-4">
|
|
<div class="w-16 h-16 btn-primary mx-auto rounded-2xl flex items-center justify-center shadow-lg rotate-3">
|
|
<i data-lucide="scan-eye" class="w-10 h-10"></i>
|
|
</div>
|
|
<div>
|
|
<h2 id="authTitle" class="text-3xl font-black text-slate-900 tracking-tight">欢迎回来</h2>
|
|
<p id="authSub" class="text-slate-400 text-sm mt-2">请登录以开启 AI 创作之旅</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="relative group">
|
|
<input id="authPhone" type="text" placeholder="手机号"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 pl-12 text-sm outline-none focus:border-indigo-500 transition-all">
|
|
<i data-lucide="phone"
|
|
class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors"></i>
|
|
</div>
|
|
|
|
<div id="smsGroup" class="hidden relative group">
|
|
<input id="authCode" type="text" placeholder="验证码"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 pl-12 text-sm outline-none focus:border-indigo-500 transition-all">
|
|
<i data-lucide="shield-check"
|
|
class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors"></i>
|
|
<button id="sendSmsBtn"
|
|
class="absolute right-4 top-1/2 -translate-y-1/2 text-indigo-600 text-xs font-bold hover:text-indigo-700">发送验证码</button>
|
|
</div>
|
|
|
|
<!-- 图形验证码组 (仅在失败次数过多时显示) -->
|
|
<div id="captchaGroup" class="hidden flex items-center gap-3">
|
|
<div class="relative group flex-1">
|
|
<input id="authCaptcha" type="text" placeholder="图形验证码"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 pl-12 text-sm outline-none focus:border-indigo-500 transition-all">
|
|
<i data-lucide="image"
|
|
class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors"></i>
|
|
</div>
|
|
<div class="w-32 h-14 bg-slate-50 rounded-2xl overflow-hidden cursor-pointer border border-slate-200"
|
|
title="点击刷新验证码">
|
|
<img id="captchaImg" src="" class="w-full h-full object-cover">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative group">
|
|
<input id="authPass" type="password" placeholder="密码"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 pl-12 text-sm outline-none focus:border-indigo-500 transition-all">
|
|
<i data-lucide="lock"
|
|
class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="authSubmitBtn"
|
|
class="w-full btn-primary py-5 rounded-2xl shadow-xl shadow-indigo-100 hover:scale-[1.02] active:scale-[0.98] transition-all">
|
|
<span class="text-lg font-bold">立即登录</span>
|
|
</button>
|
|
|
|
<div class="text-center pt-2 flex flex-col gap-3">
|
|
<button id="authSwitchBtn"
|
|
class="text-sm text-slate-400 hover:text-indigo-600 font-bold transition-colors">没有账号？立即注册</button>
|
|
<button id="forgotPwdBtn"
|
|
class="text-xs text-slate-300 hover:text-indigo-400 transition-colors">忘记密码？通过短信重置</button>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<a href="/" class="text-xs text-slate-300 hover:text-slate-500 flex items-center justify-center gap-1">
|
|
<i data-lucide="arrow-left" class="w-3 h-3"></i> 返回首页
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/auth.js') }}"></script>
|
|
{% endblock %} |