<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex, nofollow" />
    
    <title>Page Not Found — Lifelog</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&amp;family=Noto+Sans+KR:wght@300;400;500;700&amp;family=JetBrains+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="/css/login.css" />
    <link rel="stylesheet" href="/css/notice.css" />
    
    <link rel="stylesheet" href="/css/lifelog.css" />
</head>
<body>

<nav id="navbar">
    <div class="nav-logo-wrap nav-dropdown" id="adminDropdown">
        <a href="/index" class="nav-logo" id="navLogoLink">風雨来記<span>.</span></a>
        <ul class="nav-dropdown-menu" id="adminMenu">
            <li><a href="/content/editor">📄 Content Editor</a></li>
            <li><a href="/post/editor">📝 Blog Editor</a></li>
            <li><a href="/photos/upload">📷 Photo Upload</a></li>
            <li><a href="/google-auth/status">🔑 Google API Auth</a></li>
        </ul>
    </div>
    <ul class="nav-links">
        <li><a href="/profile"><span class="nav-icon">👤</span> Profile</a></li>
        <li><a href="/post-list"><span class="nav-icon">📝</span> Blog</a></li>
        <li><a href="/photos"><span class="nav-icon">📷</span> Photos</a></li>
        <li><a href="/sre"><span class="nav-icon">📊</span> SRE</a></li>
    </ul>
</nav>

<div style="flex:1">
    <div class="access-denied-wrap">
        <div class="access-denied-icon">🔍</div>
        <div class="access-denied-title">존재하지 않는 주소입니다.</div>
        <div class="access-denied-message">요청하신 페이지를 찾을 수 없습니다.</div>
        <div class="access-denied-timer">
            <span id="countdown" class="countdown">5</span><span>초 후 기본 화면으로 이동합니다.</span>
        </div>
        <a href="/index" class="access-denied-link">지금 바로 이동</a>
    </div>
</div>

<footer>
    <span class="footer-logo" onclick="openLoginModal()" style="cursor:pointer;" title="관리자 로그인">Lifelog</span>
    <p>&copy; 2026 · All rights reserved · Made with <a href="https://spring.io/projects/spring-boot">Spring Boot</a></p>
</footer>

<!-- ═══ POST PUBLISHED NOTIFICATION ═══ -->
<a class="post-pub-notif" id="post-pub-notif" href="#" target="_blank">
    <div class="post-pub-notif-bar"></div>
    <div class="post-pub-notif-body">
        <div class="post-pub-notif-msg">블로그에 새로운 글이 발행되었습니다.</div>
        <div class="post-pub-notif-title" id="post-pub-notif-title"></div>
        <div class="post-pub-notif-time" id="post-pub-notif-time"></div>
    </div>
</a>

<!-- ═══ LOGIN MODAL ═══ -->
<div class="login-overlay" id="login-modal">
    <div class="login-modal">
        <div class="login-header">
            <div class="login-title">관리자 로그인</div>
            <button class="login-close" onclick="closeLoginModal()">✕</button>
        </div>
        <div class="login-body">
            <div class="login-field">
                <label for="login-email">이메일</label>
                <input type="email" id="login-email" class="login-input" placeholder="admin@example.com" autocomplete="email" />
            </div>
            <div class="login-field">
                <label for="login-password">비밀번호</label>
                <input type="password" id="login-password" class="login-input" placeholder="비밀번호를 입력하세요" autocomplete="current-password" />
            </div>
            <div class="login-error" id="login-error"></div>
        </div>
        <div class="login-footer">
            <button class="login-btn" onclick="doLogin()">로그인</button>
        </div>
    </div>
</div>


    <script>
        (function () {
            let seconds = 5;
            const el = document.getElementById('countdown');
            const timer = setInterval(function () {
                seconds--;
                el.textContent = seconds;
                if (seconds <= 0) {
                    clearInterval(timer);
                    location.href = '/index';
                }
            }, 1000);
        })();
    </script>


<script>
/* ═══ LOGIN MODAL ═══ */
function openLoginModal() {
    document.getElementById('login-modal').classList.add('open');
    document.getElementById('login-email').value = '';
    document.getElementById('login-password').value = '';
    document.getElementById('login-error').textContent = '';
    setTimeout(function() { document.getElementById('login-email').focus(); }, 100);
}

function closeLoginModal() {
    document.getElementById('login-modal').classList.remove('open');
}

async function doLogin() {
    var email = document.getElementById('login-email').value.trim();
    var password = document.getElementById('login-password').value;
    var errorEl = document.getElementById('login-error');

    if (!email || !password) {
        errorEl.textContent = '이메일과 비밀번호를 모두 입력해주세요.';
        return;
    }

    errorEl.textContent = '';

    try {
        var keyRes = await fetch('/api/auth/public-key');
        var keyData = await keyRes.json();
        var publicKeyBase64 = keyData.publicKey;

        var binaryKey = Uint8Array.from(atob(publicKeyBase64), function(c) { return c.charCodeAt(0); });
        var cryptoKey = await crypto.subtle.importKey(
            'spki', binaryKey.buffer,
            { name: 'RSA-OAEP', hash: 'SHA-256' },
            false, ['encrypt']
        );

        var encoder = new TextEncoder();
        var encrypted = await crypto.subtle.encrypt(
            { name: 'RSA-OAEP' },
            cryptoKey,
            encoder.encode(password)
        );
        var encryptedBase64 = btoa(String.fromCharCode.apply(null, new Uint8Array(encrypted)));

        var res = await fetch('/api/auth/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ email: email, password: encryptedBase64 })
        });
        var data = await res.json();

        if (data.success) {
            closeLoginModal();
            __isAdmin = true;
            location.reload();
        } else {
            errorEl.textContent = data.message || '로그인에 실패했습니다.';
        }
    } catch (e) {
        errorEl.textContent = '서버와 통신할 수 없습니다.';
    }
}

function doLogout() {
    fetch('/api/auth/logout', { method: 'POST' })
    .then(function() {
        location.reload();
    })
    .catch(function() {});
}

// 로그인 모달에서 Enter 키로 로그인
document.addEventListener('keydown', function(e) {
    var modal = document.getElementById('login-modal');
    if (modal && modal.classList.contains('open')) {
        if (e.key === 'Escape') closeLoginModal();
        if (e.key === 'Enter') doLogin();
    }
});

// 페이지 로드 시 로그인 상태 확인
var __isAdmin = null;
(function checkAuthStatus() {
    fetch('/api/auth/status')
    .then(function(res) { return res.json(); })
    .then(function(data) {
        __isAdmin = data.loggedIn === true;
        if (__isAdmin) {
            var logo = document.querySelector('.footer-logo');
            if (logo) {
                logo.textContent = '✓ Logged in';
                logo.title = '클릭하여 로그아웃';
                logo.onclick = function() { doLogout(); };
            }
        }
    })
    .catch(function() { __isAdmin = false; });
})();

/* ═══ NAV ACTIVE STATE ═══ */
(function() {
    var path = window.location.pathname;
    document.querySelectorAll('.nav-links a[href]').forEach(function(a) {
        var href = a.getAttribute('href');
        if (href === '#' || a.classList.contains('nav-dropdown-toggle')) return;
        if (path === href || (path === '/' && href === '/index')) {
            a.classList.add('active');
        } else if (href === '/index' && path.startsWith('/post')) {
            a.classList.add('active');
        } else if (path.startsWith(href) && href !== '/') {
            a.classList.add('active');
        }
    });
    // Things I like 하위 페이지인 경우 드롭다운 토글에 active 표시
    if (path.startsWith('/things/')) {
        var toggle = document.querySelector('.nav-dropdown-toggle');
        if (toggle) toggle.classList.add('active');
    }
})();

/* ═══ NAV DROPDOWN ═══ */
(function() {
    document.querySelectorAll('.nav-dropdown-toggle').forEach(function(toggle) {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            this.closest('.nav-dropdown').classList.toggle('open');
        });
    });

    /* Admin logo dropdown */
    var logoLink = document.getElementById('navLogoLink');
    var adminDropdown = document.getElementById('adminDropdown');
    var adminMenu = document.getElementById('adminMenu');

    function toggleAdminMenu() {
        if (!adminMenu) return;
        var isOpen = adminMenu.style.display === 'block';
        adminMenu.style.display = isOpen ? 'none' : 'block';
    }
    function closeAdminMenu() {
        if (adminMenu) adminMenu.style.display = 'none';
    }

    if (logoLink && adminDropdown) {
        logoLink.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            if (__isAdmin === true) {
                toggleAdminMenu();
                return;
            }
            if (__isAdmin === false) {
                location.href = '/index';
                return;
            }
            // 아직 체크 전이면 API 호출
            fetch('/api/auth/status')
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    __isAdmin = data.loggedIn === true;
                    if (__isAdmin) {
                        toggleAdminMenu();
                    } else {
                        location.href = '/index';
                    }
                })
                .catch(function() {
                    location.href = '/index';
                });
        });
    }

    document.addEventListener('click', function(e) {
        if (!e.target.closest('.nav-dropdown')) {
            document.querySelectorAll('.nav-dropdown.open').forEach(function(d) {
                d.classList.remove('open');
            });
            closeAdminMenu();
        }
    });
})();
</script>
<script src="/js/notice.js"></script>

</body>
</html>

