118 lines
4.1 KiB
HTML
118 lines
4.1 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="{% url 'main' %}" 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>
|
||
|
|
|
||
|
|
<!-- 404 아이콘 -->
|
||
|
|
<div class="mb-8">
|
||
|
|
<div class="w-32 h-32 mx-auto bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
|
||
|
|
<svg class="w-16 h-16 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-3-8.5a9.5 9.5 0 109.5 9.5A9.5 9.5 0 0012 3.5z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h1 class="text-6xl font-bold text-gray-300 dark:text-gray-600 mb-2">404</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>
|
||
|
|
URL을 다시 확인하거나 메인 페이지로 이동해주세요.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 액션 버튼들 -->
|
||
|
|
<div class="space-y-4">
|
||
|
|
|
||
|
|
|
||
|
|
<button
|
||
|
|
onclick="history.back()"
|
||
|
|
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>
|