{% extends "base.html" %}

{% block title %}登录 - DVS云盘{% endblock %}



{% block content %}

<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">

  <div class="max-w-md w-full space-y-8">

    <!-- Flash 消息 -->

    {% with messages = get_flashed_messages(with_categories=true) %}

      {% if messages %}

        {% for category, message in messages %}

          <div class="mac-alert mac-alert-{{ category }}">

            <i class="fas fa-{{ 'check-circle' if category == 'success' else 'exclamation-circle' if category == 'danger' else 'info-circle' }}"></i>

            <span>{{ message|safe }}</span>

            <button type="button" class="ml-auto text-gray-400 hover:text-gray-600" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>

          </div>

        {% endfor %}

      {% endif %}

    {% endwith %}



    <div class="mac-card">

      <div class="mac-card-header text-center justify-center">

        <div>

          <i class="fas fa-cloud text-4xl text-primary"></i>

          <h2 class="mt-3 text-2xl font-bold text-dark">DVS云盘</h2>

          <p class="text-muted text-sm mt-1">安全、高效的云端存储解决方案</p>

        </div>

      </div>

      <div class="p-6">

        <form method="POST" action="/login">

          <div class="mb-4">

            <label class="block text-dark font-medium mb-2"><i class="fas fa-user mr-2"></i>用户名</label>

            <input type="text" class="mac-input w-full" name="username" required placeholder="请输入用户名">

          </div>

          <div class="mb-6">

            <label class="block text-dark font-medium mb-2"><i class="fas fa-lock mr-2"></i>密码</label>

            <input type="password" class="mac-input w-full" name="password" required placeholder="请输入密码" id="password">

          </div>

          <button type="submit" class="mac-btn w-full"><i class="fas fa-sign-in-alt mr-2"></i>登录</button>

        </form>

        <div class="border-t border-gray-200 my-6"></div>

        <div class="text-center">

          <p class="text-muted">还没有账户？ <a href="/register" class="text-primary font-medium">立即注册</a></p>

        </div>

        <div class="flex justify-center gap-6 mt-6">

          <div class="flex items-center gap-2 text-muted text-sm"><i class="fas fa-shield-alt text-primary"></i><span>数据加密</span></div>

          <div class="flex items-center gap-2 text-muted text-sm"><i class="fas fa-bolt text-warning"></i><span>高速传输</span></div>

          <div class="flex items-center gap-2 text-muted text-sm"><i class="fas fa-sync text-success"></i><span>多端同步</span></div>

        </div>

      </div>

    </div>



    <div class="text-center">

      <p class="text-muted text-xs"><i class="fas fa-shield-alt mr-1"></i>安全提示：请妥善保管您的登录凭证</p>

    </div>



    <!-- DVS 宣言 -->

    <div class="mac-card mt-8">

      <div class="p-6 text-center">

        <div class="text-primary font-bold text-lg mb-4">🚀 DVS云盘</div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">

          <div class="text-sm text-muted">安全的代码是优美的代码</div>

          <div class="text-sm text-muted">用户友好的设计是简单的设计</div>

          <div class="text-sm text-muted">每一次302重定向都是明了的防护</div>

          <div class="text-sm text-muted">每一行日志都是错误的明确记录</div>

        </div>

        

      </div>

    </div>

  </div>

</div>

{% endblock %}