117 lines
4.0 KiB
HTML
117 lines
4.0 KiB
HTML
|
{% load static %}
|
||
|
|
<!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 제8기</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: 'class',
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<!-- 다크모드 초기 설정 스크립트 (FOUC 방지) -->
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
const savedTheme = localStorage.getItem('theme');
|
||
|
|
if (savedTheme === 'light') {
|
||
|
|
document.documentElement.classList.remove('dark');
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body class="bg-gray-200 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-300">
|
||
|
|
<div class="min-h-screen flex items-center justify-center px-4">
|
||
|
|
<div class="max-w-md w-full text-center">
|
||
|
|
<!-- 로고/제목 -->
|
||
|
|
<div class="mb-8">
|
||
|
|
<a href="/" class="text-2xl font-bold text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
|
||
|
|
신라대학교 AMP 제8기
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 500 아이콘 -->
|
||
|
|
<div class="mb-8">
|
||
|
|
<div class="w-32 h-32 mx-auto bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
|
||
|
|
<svg class="w-16 h-16 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h1 class="text-6xl font-bold text-red-300 dark:text-red-600 mb-2">500</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 에러 메시지 -->
|
||
|
|
<div class="mb-8">
|
||
|
|
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
|
||
|
|
서버 내부 오류
|
||
|
|
</h2>
|
||
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
|
||
|
|
서버에서 오류가 발생했습니다.<br>
|
||
|
|
잠시 후 다시 시도해주시거나 관리자에게 문의해주세요.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 액션 버튼들 -->
|
||
|
|
<div class="space-y-4">
|
||
|
|
|
||
|
|
|
||
|
|
<button
|
||
|
|
onclick="location.reload()"
|
||
|
|
class="inline-block w-full bg-gray-600 dark:bg-gray-700 text-white px-6 py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition-colors duration-200 font-semibold"
|
||
|
|
>
|
||
|
|
🔄 페이지 새로고침
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 푸터 -->
|
||
|
|
<div class="mt-12 text-xs text-gray-500 dark:text-gray-400">
|
||
|
|
<p>신라대학교 AMP 제8기</p>
|
||
|
|
<p class="mt-1">문제가 지속되면 관리자에게 문의해주세요.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 다크모드 토글 스크립트 -->
|
||
|
|
<script>
|
||
|
|
const themeToggle = document.getElementById('theme-toggle');
|
||
|
|
const lightIcon = document.getElementById('theme-toggle-light-icon');
|
||
|
|
const darkIcon = document.getElementById('theme-toggle-dark-icon');
|
||
|
|
|
||
|
|
function updateThemeIcons() {
|
||
|
|
if (document.documentElement.classList.contains('dark')) {
|
||
|
|
lightIcon.classList.remove('hidden');
|
||
|
|
darkIcon.classList.add('hidden');
|
||
|
|
} else {
|
||
|
|
lightIcon.classList.add('hidden');
|
||
|
|
darkIcon.classList.remove('hidden');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleTheme() {
|
||
|
|
const isDark = document.documentElement.classList.contains('dark');
|
||
|
|
|
||
|
|
if (isDark) {
|
||
|
|
document.documentElement.classList.remove('dark');
|
||
|
|
localStorage.setItem('theme', 'light');
|
||
|
|
} else {
|
||
|
|
document.documentElement.classList.add('dark');
|
||
|
|
localStorage.setItem('theme', 'dark');
|
||
|
|
}
|
||
|
|
|
||
|
|
updateThemeIcons();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 초기 아이콘 설정
|
||
|
|
updateThemeIcons();
|
||
|
|
|
||
|
|
// 토글 버튼 클릭 이벤트
|
||
|
|
if (themeToggle) {
|
||
|
|
themeToggle.addEventListener('click', toggleTheme);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|