|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>登录 | GPT共享</title>
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.png') }}">
|
|
|
<style>
|
|
|
@keyframes fadeIn {
|
|
|
from { opacity: 0; transform: translateY(-20px); }
|
|
|
to { opacity: 1; transform: translateY(0); }
|
|
|
}
|
|
|
|
|
|
.animate-fade-in {
|
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
|
}
|
|
|
|
|
|
.form-input {
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.form-input:focus {
|
|
|
transform: translateY(-2px);
|
|
|
}
|
|
|
|
|
|
.login-button {
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.login-button:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
|
|
|
}
|
|
|
|
|
|
.alert {
|
|
|
animation: slideIn 0.5s ease-out forwards;
|
|
|
}
|
|
|
|
|
|
@keyframes slideIn {
|
|
|
from { transform: translateX(-100%); opacity: 0; }
|
|
|
to { transform: translateX(0); opacity: 1; }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">
|
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-8 animate-fade-in">
|
|
|
|
|
|
<div class="text-center mb-8">
|
|
|
<div class="inline-block p-3 rounded-full bg-blue-50 mb-4">
|
|
|
<i class="fas fa-user-circle text-4xl text-blue-500"></i>
|
|
|
</div>
|
|
|
<h1 class="text-2xl font-bold text-gray-800">欢迎回来</h1>
|
|
|
<p class="text-gray-500 mt-2">请登录您的账号</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
|
{% if messages %}
|
|
|
{% for category, message in messages %}
|
|
|
<div class="alert mb-4 p-4 rounded-lg {% if category == 'error' %}bg-red-100 text-red-700 border-l-4 border-red-500{% else %}bg-green-100 text-green-700 border-l-4 border-green-500{% endif %}">
|
|
|
<div class="flex items-center">
|
|
|
<div class="flex-shrink-0">
|
|
|
{% if category == 'error' %}
|
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
|
{% else %}
|
|
|
<i class="fas fa-check-circle"></i>
|
|
|
{% endif %}
|
|
|
</div>
|
|
|
<div class="ml-3">
|
|
|
<p class="text-sm">{{ message }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{% endfor %}
|
|
|
{% endif %}
|
|
|
{% endwith %}
|
|
|
|
|
|
|
|
|
<form action="{{ url_for('login') }}" method="post" class="space-y-6">
|
|
|
<div>
|
|
|
<div class="relative">
|
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
|
<i class="fas fa-user text-gray-400"></i>
|
|
|
</div>
|
|
|
<input
|
|
|
type="text"
|
|
|
name="username"
|
|
|
placeholder="用户名"
|
|
|
required
|
|
|
class="form-input w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 text-gray-700"
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<div class="relative">
|
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
|
<i class="fas fa-lock text-gray-400"></i>
|
|
|
</div>
|
|
|
<input
|
|
|
type="password"
|
|
|
name="password"
|
|
|
placeholder="密码"
|
|
|
required
|
|
|
class="form-input w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 text-gray-700"
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
<input
|
|
|
type="checkbox"
|
|
|
id="remember_me"
|
|
|
name="remember_me"
|
|
|
class="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 rounded"
|
|
|
>
|
|
|
<label for="remember_me" class="ml-2 block text-sm text-gray-700">
|
|
|
记住我
|
|
|
</label>
|
|
|
</div>
|
|
|
|
|
|
<div class="relative">
|
|
|
<select
|
|
|
name="login_target"
|
|
|
required
|
|
|
class="form-input w-full py-3 pl-4 pr-4 rounded-lg border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200 text-gray-700"
|
|
|
>
|
|
|
<option value="" disabled selected>请选择登录目标</option>
|
|
|
<option value="manage">登录到管理端</option>
|
|
|
<option value="gpt">登录到 GPT</option>
|
|
|
<option value="claude">登录到 Claude</option>
|
|
|
|
|
|
</select>
|
|
|
</div>
|
|
|
<button
|
|
|
type="submit"
|
|
|
class="login-button w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
|
|
|
>
|
|
|
登录
|
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|
|
</button>
|
|
|
</form>
|
|
|
|
|
|
|
|
|
<div class="mt-6 text-center text-sm">
|
|
|
<a href="mailto:your@email.com" class="text-blue-500 hover:text-blue-600 font-medium">联系管理员</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="mt-8 text-center text-sm text-gray-500">
|
|
|
<p>© 2024 ChatGPT共享. Created by <a style="color: rgb(106, 149, 228);" href="https://github.com/h88782481/Chat-Share" target="_blank" rel="noopener noreferrer">Baimo</a></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
window.onload = function() {
|
|
|
const savedUsername = localStorage.getItem('rememberedUsername');
|
|
|
const savedLoginTarget = localStorage.getItem('rememberedLoginTarget');
|
|
|
const rememberMe = localStorage.getItem('rememberMe') === 'true';
|
|
|
|
|
|
if (savedUsername && rememberMe) {
|
|
|
document.getElementById('username').value = savedUsername;
|
|
|
document.getElementById('remember_me').checked = true;
|
|
|
}
|
|
|
|
|
|
if (savedLoginTarget && rememberMe) {
|
|
|
document.getElementById('login_target').value = savedLoginTarget;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', function() {
|
|
|
const rememberMe = document.getElementById('remember_me').checked;
|
|
|
const username = document.getElementById('username').value;
|
|
|
const loginTarget = document.getElementById('login_target').value;
|
|
|
|
|
|
if (rememberMe) {
|
|
|
localStorage.setItem('rememberedUsername', username);
|
|
|
localStorage.setItem('rememberedLoginTarget', loginTarget);
|
|
|
localStorage.setItem('rememberMe', 'true');
|
|
|
} else {
|
|
|
localStorage.removeItem('rememberedUsername');
|
|
|
localStorage.removeItem('rememberedLoginTarget');
|
|
|
localStorage.setItem('rememberMe', 'false');
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
