创赢未来评分系统 - 初始化提交（移除大文件）
All checks were successful
Deploy to Server / deploy (push) Successful in 18s
All checks were successful
Deploy to Server / deploy (push) Successful in 18s
This commit is contained in:
爽哒哒
129
backend/competition/templates/judge/login.html
Normal file
129
backend/competition/templates/judge/login.html
Normal file
@@ -0,0 +1,129 @@
|
||||
{% extends 'judge/base.html' %}
|
||||
|
||||
{% block title %}评委登录{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="fixed inset-0 z-0 bg-gradient-to-br from-blue-500 to-indigo-700 flex items-center justify-center px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl shadow-2xl transform transition-all hover:scale-105 duration-300">
|
||||
<div>
|
||||
<div class="mx-auto h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-gavel text-3xl text-blue-600"></i>
|
||||
</div>
|
||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||||
评委登录
|
||||
</h2>
|
||||
<p class="mt-2 text-center text-sm text-gray-600">
|
||||
请输入您的手机号验证登录
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="mt-8 space-y-6" method="post" action="{% url 'judge_login' %}">
|
||||
{% csrf_token %}
|
||||
<div class="rounded-md shadow-sm -space-y-px">
|
||||
<div class="mb-4">
|
||||
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
|
||||
<div class="relative rounded-md shadow-sm">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fas fa-mobile-alt text-gray-400"></i>
|
||||
</div>
|
||||
<input type="tel" id="phone" name="phone" required pattern="[0-9]{11}"
|
||||
class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-lg py-3 transition-colors"
|
||||
placeholder="请输入11位手机号">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
|
||||
<div class="flex gap-2">
|
||||
<div class="relative rounded-md shadow-sm flex-1">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fas fa-shield-alt text-gray-400"></i>
|
||||
</div>
|
||||
<input type="text" id="code" name="code" required
|
||||
class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-lg py-3 transition-colors"
|
||||
placeholder="请输入验证码">
|
||||
</div>
|
||||
<button type="button" id="sendCodeBtn" onclick="sendSmsCode()"
|
||||
class="whitespace-nowrap inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors w-32 justify-center">
|
||||
发送验证码
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit"
|
||||
class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-md hover:shadow-lg transition-all duration-200">
|
||||
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
|
||||
<i class="fas fa-sign-in-alt text-blue-300 group-hover:text-blue-100"></i>
|
||||
</span>
|
||||
登录系统
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% if error %}
|
||||
<div class="rounded-md bg-red-50 p-4 border border-red-200 animate-pulse">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="fas fa-times-circle text-red-400"></i>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">登录失败</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<p>{{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
async function sendSmsCode() {
|
||||
const phone = document.getElementById('phone').value;
|
||||
if (!phone || phone.length !== 11) {
|
||||
alert('请输入有效的11位手机号');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById('sendCodeBtn');
|
||||
btn.disabled = true;
|
||||
let countdown = 60;
|
||||
|
||||
try {
|
||||
const response = await fetch("{% url 'judge_send_code' %}", {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token }}'
|
||||
},
|
||||
body: JSON.stringify({ phone: phone })
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
alert('验证码已发送');
|
||||
const timer = setInterval(() => {
|
||||
btn.innerText = `${countdown}s 后重发`;
|
||||
countdown--;
|
||||
if (countdown < 0) {
|
||||
clearInterval(timer);
|
||||
btn.disabled = false;
|
||||
btn.innerText = '发送验证码';
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
alert('发送失败: ' + data.message);
|
||||
btn.disabled = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
alert('网络错误，请重试');
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user