104 lines
4.0 KiB
HTML
104 lines
4.0 KiB
HTML
|
{% load form_filters %}
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="ko" class="dark">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>로그인 | 신라 AMP</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: 'class',
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
fontFamily: {
|
||
|
|
sans: ['Inter', 'sans-serif']
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
|
||
|
|
</head>
|
||
|
|
<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white min-h-screen flex items-center justify-center px-4 font-sans">
|
||
|
|
|
||
|
|
<div class="bg-gray-800 bg-opacity-70 backdrop-blur-lg p-8 rounded-2xl shadow-2xl w-full max-w-sm transition-all">
|
||
|
|
<div class="text-center mb-6">
|
||
|
|
<h1 class="text-3xl font-bold tracking-tight text-white">신라 AMP</h1>
|
||
|
|
<p class="text-sm text-gray-400 mt-2">계정에 로그인하세요</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Django 메시지 표시 -->
|
||
|
|
{% if messages %}
|
||
|
|
{% for message in messages %}
|
||
|
|
<div class="p-4 rounded-lg {% if message.tags == 'success' %}bg-green-600{% elif message.tags == 'error' %}bg-red-600{% else %}bg-blue-600{% endif %} text-white mb-4">
|
||
|
|
{{ message }}
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<!-- 세션 메시지 표시 -->
|
||
|
|
{% if request.session.password_set_message %}
|
||
|
|
<div class="p-4 rounded-lg bg-green-600 text-white mb-4">
|
||
|
|
{{ request.session.password_set_message }}
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
// 페이지 로드 후 세션 메시지 제거
|
||
|
|
window.addEventListener('load', function() {
|
||
|
|
// 3초 후 메시지 제거
|
||
|
|
setTimeout(function() {
|
||
|
|
const messageDiv = document.querySelector('.bg-green-600');
|
||
|
|
if (messageDiv) {
|
||
|
|
messageDiv.style.transition = 'opacity 0.5s';
|
||
|
|
messageDiv.style.opacity = '0';
|
||
|
|
setTimeout(function() {
|
||
|
|
messageDiv.remove();
|
||
|
|
}, 500);
|
||
|
|
}
|
||
|
|
}, 3000);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<form method="POST" action="{% url 'account_login' %}" class="space-y-4">
|
||
|
|
{% csrf_token %}
|
||
|
|
{% if form.errors %}
|
||
|
|
<div class="text-red-400 text-sm mb-2">
|
||
|
|
전화번호 또는 비밀번호가 올바르지 않습니다.
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
<div>
|
||
|
|
<label for="{{ form.login.id_for_label }}" class="block mb-1 text-sm text-gray-300">전화번호</label>
|
||
|
|
{{ form.login|add_class:"w-full px-4 py-3 rounded-xl bg-gray-700 bg-opacity-80 text-white placeholder-gray-400 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition" }}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="{{ form.password.id_for_label }}" class="block mb-1 text-sm text-gray-300">비밀번호</label>
|
||
|
|
{{ form.password|add_class:"w-full px-4 py-3 rounded-xl bg-gray-700 bg-opacity-80 text-white placeholder-gray-400 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition" }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-between text-sm text-gray-400">
|
||
|
|
<label class="inline-flex items-center">
|
||
|
|
{{ form.remember }}
|
||
|
|
<span class="ml-2">Remember me</span>
|
||
|
|
</label>
|
||
|
|
<a href="{% url 'account_reset_password' %}" class="text-blue-400 hover:text-blue-500 transition">비밀번호 찾기</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit"
|
||
|
|
class="w-full py-3 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 rounded-xl text-white font-semibold text-base transition duration-200 shadow-md hover:shadow-lg">
|
||
|
|
로그인
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="mt-6 text-center text-sm">
|
||
|
|
{% if not request.session.authenticated and not user.is_authenticated %}
|
||
|
|
계정이 없으신가요?
|
||
|
|
<a href="{% url 'account_signup' %}" class="text-green-400 hover:text-green-500 transition">회원가입</a>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|