Public Source Viewer

비나래아카이브 개발자 포털

실제 서비스 구조를 살펴볼 수 있는 공개용 코드 뷰어입니다. 인증, 세션, 외부 연동, 토큰, 관리자 식별 등 보안상 민감한 구현은 파일 단위 또는 줄 단위로 검열됩니다.

Redacted View
view/hinana/404noctchill.ejs
공개 가능
1 <!DOCTYPE html>
2 <html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="color-scheme" content="light dark">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <meta name="theme-color" content="<%= (typeof theme !== 'undefined' && theme === 'dark') ? '#000000' : '#ffffff' %>">
8 <meta name="apple-mobile-web-app-title" content="비나래 아카이브">
9 <meta property="og:image" content="/image/2.png" />
10 <meta property="og:description" content="비나래 아카이브"/>
11 <meta property="og:url" content="hinana.moe"/>
12 <meta property="og:title" content="비나래 아카이브"/>
13 <link rel='stylesheet' href='/vendors/bootstrap/css/bootstrap.min.css' />
14 <script src="/vendors/bootstrap/js/bootstrap.min.js"></script>
15 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
16 <title>비나래 아카이브 - 404</title>
17 <style>
18 :root {
19 --font-family: 'Noto Sans KR', sans-serif;
20 --bg-main: #e4dfd7; --bg-secondary: #f2f0eb; --bg-tertiary: #dcd6ce;
21 --text-primary: #3e3a36; --text-secondary: #69615c;
22 --accent-color: #b45309; --border-color: #ccc6bc;
23 --shadow-sm: 0 1px 2px 0 rgba(60, 50, 40, 0.08);
24 }
25 body.dark-mode {
26 --bg-main: #1c1917; --bg-secondary: #292524; --bg-tertiary: #44403c;
27 --text-primary: #e7e5e4; --text-secondary: #a8a29e;
28 --accent-color: #f59e0b; --border-color: #44403c;
29 --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
30 }
31
32 html, body { margin: 0; height: 100%; font-family: var(--font-family); background-color: var(--bg-main); color: var(--text-primary); }
33 a { text-decoration: none; color: inherit; }
34
35 .global-header {
36 height: 60px; background-color: var(--bg-tertiary); border-bottom: 1px solid var(--border-color);
37 display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
38 position: sticky; top: 0; z-index: 1000;
39 }
40 .header-brand { display: flex; align-items: center; }
41 .header-logo { height: 28px; width: auto; }
42 body.dark-mode .header-logo { mix-blend-mode: screen; }
43 .header-nav {
44 position: absolute; left: 50%; transform: translateX(-50%);
45 display: flex; gap: 20px; align-items: center;
46 }
47 .nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-secondary); cursor: pointer; transition: color 0.2s; }
48 .nav-link:hover { color: var(--accent-color); }
49 .nav-divider { opacity: 0.3; color: var(--text-secondary); }
50 .header-controls { display: flex; align-items: center; gap: 10px; z-index: 10; position: relative; background-color: var(--bg-tertiary); }
51 .icon-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; padding: 4px; transition: color 0.2s; }
52 .icon-btn:hover { color: var(--text-primary); }
53
54 .error-container {
55 display: flex; flex-direction: column; align-items: center; justify-content: center;
56 min-height: calc(100vh - 60px); padding: 40px 20px; text-align: center;
57 }
58 .error-code {
59 font-size: 6rem; font-weight: 800; color: var(--accent-color); line-height: 1;
60 letter-spacing: -3px; margin-bottom: 20px;
61 }
62 .characters-row {
63 display: flex; gap: 10px; justify-content: center; align-items: center;
64 margin-bottom: 30px; flex-wrap: wrap;
65 }
66 .characters-row img {
67 max-width: 160px; width: 20%; border-radius: 12px;
68 }
69 .error-msg { color: var(--text-secondary); margin-bottom: 30px; font-size: 0.95rem; }
70 .btn-home {
71 border: 1px solid var(--border-color); background: var(--bg-secondary);
72 color: var(--text-primary); padding: 12px 40px; border-radius: 8px;
73 font-weight: 600; cursor: pointer; transition: all 0.2s;
74 }
75 .btn-home:hover { border-color: var(--accent-color); color: var(--accent-color); }
76
77 .footer-area {
78 text-align: center; padding: 30px 20px; color: var(--text-secondary); font-size: 0.75rem; line-height: 1.8;
79 }
80 .footer-area img { width: 120px; opacity: 0.7; mix-blend-mode: multiply; }
81 body.dark-mode .footer-area img { mix-blend-mode: screen; }
82
83 @media (max-width: 768px) {
84 .header-nav { position: static; transform: none; gap: 12px; }
85 .global-header { flex-wrap: wrap; height: auto; padding: 10px 15px; gap: 8px; }
86 .error-code { font-size: 4rem; }
87 .characters-row img { width: 40%; max-width: 140px; }
88 }
89 </style>
90 </head>
91
92 <body class="<%= (typeof theme !== 'undefined' && theme === 'dark') ? 'dark-mode' : '' %>">
93 <header class="global-header">
94 <div class="header-brand">
95 <a href="/hinana/index">
96 <img src="/image/archive1.png" alt="Hinana Archive" class="header-logo">
97 </a>
98 </div>
99 <nav class="header-nav">
100 <a href="/hinana/index" class="nav-link">Archive</a>
101 <a href="/hinana/info" class="nav-link">Info</a>
102 <a href="/hinana/blog" class="nav-link">Blog</a>
103 <a href="/hinana/lounge" class="nav-link">Lounge</a>
104 <span class="nav-divider">|</span>
105 <a href="/login" class="nav-link fw-bold" style="color: var(--accent-color);">Login</a>
106 </nav>
107 <div class="header-controls">
108 <a href="/hinana/gallery#brand-assets" class="nav-link" style="font-size:0.9rem;">사이트 맵</a>
109 <form action="/toggle-theme" method="POST" class="d-inline">
110 <button type="submit" class="icon-btn" title="테마 변경">
111 <i class="bi <%= (typeof theme !== 'undefined' && theme==='dark') ? 'bi-moon-stars-fill':'bi-sun-fill' %>"></i>
112 </button>
113 </form>
114 </div>
115 </header>
116
117 <div class="error-container">
118 <div class="error-code">404</div>
119 <div class="characters-row">
120 <img src="/image/hinana.png" alt="hinana">
121 <img src="/image/koito.png" alt="koito">
122 <img src="/image/madoka.png" alt="madoka">
123 <img src="/image/toru.png" alt="toru">
124 </div>
125 <p class="error-msg">페이지를 찾을 수 없습니다.</p>
126 <a href="/" class="btn-home">홈으로</a>
127 </div>
128
129 <div class="footer-area">
130 <img src="/image/sign.png" alt="sign"><br>
131 X - @NoctchillHinana<br>
132 &copy; 2024~2026. 비나래 | hinana.moe
133 </div>
134 </body>
135 </html>