ai_v/templates/login.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 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">
            <button id="authSwitchBtn" class="text-sm text-slate-400 hover:text-indigo-600 font-bold 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 %}