| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>登录 - 极简居中卡片</title>
- <script src="https://cdn.tailwindcss.com"></script>
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
- <style>body { font-family: 'Inter', sans-serif; }</style>
- </head>
- <body class="min-h-screen flex items-center justify-center p-4 bg-gray-50">
- <div class="w-full max-w-sm">
- <!-- Card -->
- <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
- <!-- Logo -->
- <div class="text-center mb-8">
- <div class="w-12 h-12 bg-black rounded-xl flex items-center justify-center mx-auto mb-4">
- <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
- </svg>
- </div>
- <h1 class="text-xl font-semibold text-gray-900">登录到 TG Live</h1>
- </div>
- <!-- Form -->
- <form class="space-y-4">
- <div>
- <input type="text" placeholder="用户名"
- class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent transition-all text-sm">
- </div>
- <div>
- <input type="password" placeholder="密码"
- class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent transition-all text-sm">
- </div>
- <div class="flex items-center justify-between text-sm">
- <label class="flex items-center text-gray-600 cursor-pointer">
- <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-black focus:ring-black mr-2">
- 记住我
- </label>
- <a href="#" class="text-gray-600 hover:text-black">忘记密码？</a>
- </div>
- <button type="submit" class="w-full py-3 bg-black hover:bg-gray-800 text-white font-medium rounded-lg transition-colors cursor-pointer text-sm">
- 登录
- </button>
- </form>
- <!-- Divider -->
- <div class="flex items-center my-6">
- <div class="flex-1 h-px bg-gray-200"></div>
- <span class="px-3 text-gray-400 text-xs">或</span>
- <div class="flex-1 h-px bg-gray-200"></div>
- </div>
- <!-- Social -->
- <button class="w-full py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 cursor-pointer text-sm">
- <svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
- <span class="text-gray-700">使用 Google 登录</span>
- </button>
- </div>
- <!-- Footer -->
- <p class="text-center text-gray-500 text-sm mt-6">
- 还没有账户？<a href="#" class="text-black font-medium hover:underline">注册</a>
- </p>
- </div>
- </body>
- </html>
|
