Ostatnio aktywny 5 hours ago

Custom Page 404

Rewizja e083cebc781df6bcf392f5f74c4c3f58ed82ca4e

404.html Surowy
1<!--
2 404 Custom Error Page
3 Author: Emanuele Gori <emanuelegori.uno>
4 Version: 1.0.0
5 Created: 2025-03-22
6 License: GPL-2.0-or-later
7 Description: Custom 404 page for NGINX Proxy Manager.
8 Served for unconfigured or unknown hosts.
9 Hostname and path populated dynamically via JS.
10 No external dependencies.
11-->
12<!DOCTYPE html>
13<!DOCTYPE html>
14<html lang="it">
15<head>
16 <meta name="author" content="Emanuele Gori">
17 <meta name="description" content="Pagina di errore 404 personalizzata per NGINX Proxy Manager">
18 <meta name="version" content="1.0.0">
19 <meta name="robots" content="noindex, nofollow">
20 <meta charset="UTF-8">
21 <meta name="viewport" content="width=device-width, initial-scale=1.0">
22 <meta name="robots" content="noindex, nofollow">
23 <title>404 - Risorsa non trovata</title>
24 <style>
25 *, *::before, *::after {
26 box-sizing: border-box;
27 margin: 0;
28 padding: 0;
29 }
30
31 :root {
32 --bg: #0d0f12;
33 --surface: #141720;
34 --border: #1f2435;
35 --border-hi: #2d3350;
36 --text: #c8cdd8;
37 --text-dim: #5a6075;
38 --text-mute: #3a3f52;
39 --accent: #4a7fbd;
40 --accent-lo: #1a2d45;
41 --error: #bd4a4a;
42 --error-lo: #2d1a1a;
43 --green: #4abd7a;
44 --mono: "Courier New", "Lucida Console", monospace;
45 }
46
47 html, body {
48 height: 100%;
49 }
50
51 body {
52 background-color: var(--bg);
53 color: var(--text);
54 font-family: var(--mono);
55 font-size: 14px;
56 line-height: 1.6;
57 display: flex;
58 flex-direction: column;
59 align-items: center;
60 justify-content: center;
61 min-height: 100vh;
62 padding: 2rem 1rem;
63 }
64
65 .terminal {
66 width: 100%;
67 max-width: 680px;
68 background: var(--surface);
69 border: 1px solid var(--border);
70 border-radius: 6px;
71 overflow: hidden;
72 }
73
74 .terminal-bar {
75 background: var(--border);
76 padding: 0.55rem 1rem;
77 display: flex;
78 align-items: center;
79 gap: 0.5rem;
80 border-bottom: 1px solid var(--border-hi);
81 }
82
83 .dot {
84 width: 10px;
85 height: 10px;
86 border-radius: 50%;
87 background: var(--border-hi);
88 flex-shrink: 0;
89 }
90
91 .bar-label {
92 flex: 1;
93 text-align: center;
94 font-size: 11px;
95 color: var(--text-dim);
96 letter-spacing: 0.05em;
97 }
98
99 .terminal-body {
100 padding: 1.75rem 2rem;
101 }
102
103 .prompt-line {
104 display: flex;
105 align-items: baseline;
106 gap: 0.5rem;
107 margin-bottom: 1.5rem;
108 }
109
110 .prompt-sign {
111 color: var(--green);
112 font-size: 13px;
113 flex-shrink: 0;
114 }
115
116 .prompt-cmd {
117 color: var(--text-dim);
118 font-size: 13px;
119 word-break: break-all;
120 }
121
122 .error-block {
123 border-left: 2px solid var(--error);
124 background: var(--error-lo);
125 padding: 1rem 1.25rem;
126 margin-bottom: 1.5rem;
127 border-radius: 0 4px 4px 0;
128 }
129
130 .error-code {
131 font-size: 11px;
132 color: var(--error);
133 letter-spacing: 0.1em;
134 text-transform: uppercase;
135 margin-bottom: 0.5rem;
136 }
137
138 .error-title {
139 font-size: 22px;
140 font-weight: bold;
141 color: #e0e4ef;
142 letter-spacing: -0.01em;
143 margin-bottom: 0.25rem;
144 }
145
146 .error-sub {
147 font-size: 12px;
148 color: var(--text-dim);
149 }
150
151 .output-block {
152 margin-bottom: 1.5rem;
153 }
154
155 .output-line {
156 display: flex;
157 gap: 1rem;
158 padding: 0.2rem 0;
159 font-size: 13px;
160 border-bottom: 1px solid var(--border);
161 }
162
163 .output-line:last-child {
164 border-bottom: none;
165 }
166
167 .output-key {
168 color: var(--text-dim);
169 min-width: 120px;
170 flex-shrink: 0;
171 }
172
173 .output-val {
174 color: var(--text);
175 }
176
177 .output-val.highlight {
178 color: var(--accent);
179 }
180
181 .output-val.warn {
182 color: #bd8a4a;
183 }
184
185 .divider {
186 border: none;
187 border-top: 1px solid var(--border);
188 margin: 1.5rem 0;
189 }
190
191 .note-block {
192 background: var(--accent-lo);
193 border: 1px solid #1e3050;
194 border-radius: 4px;
195 padding: 0.85rem 1.1rem;
196 margin-bottom: 1.5rem;
197 }
198
199 .note-block p {
200 font-size: 12px;
201 color: var(--text-dim);
202 line-height: 1.7;
203 }
204
205 .note-block p + p {
206 margin-top: 0.4rem;
207 }
208
209 .note-block strong {
210 color: var(--text);
211 font-weight: normal;
212 }
213
214 .action-line {
215 display: flex;
216 align-items: center;
217 gap: 0.5rem;
218 font-size: 13px;
219 }
220
221 .action-line .prompt-sign {
222 color: var(--green);
223 }
224
225 .home-link {
226 color: var(--accent);
227 text-decoration: none;
228 border-bottom: 1px solid var(--accent-lo);
229 transition: border-color 0.15s;
230 }
231
232 .home-link:hover {
233 border-color: var(--accent);
234 }
235
236 .cursor {
237 display: inline-block;
238 width: 8px;
239 height: 14px;
240 background: var(--text-dim);
241 vertical-align: middle;
242 margin-left: 2px;
243 animation: blink 1.1s step-start infinite;
244 }
245
246 @keyframes blink {
247 0%, 100% { opacity: 1; }
248 50% { opacity: 0; }
249 }
250
251 .footer-note {
252 margin-top: 1.5rem;
253 font-size: 11px;
254 color: var(--text-mute);
255 text-align: center;
256 letter-spacing: 0.03em;
257 }
258
259 @media (max-width: 500px) {
260 .terminal-body { padding: 1.25rem 1rem; }
261 .output-key { min-width: 90px; }
262 .error-title { font-size: 18px; }
263 }
264 </style>
265</head>
266<body>
267
268 <div class="terminal" role="main">
269
270 <div class="terminal-bar" aria-hidden="true">
271 <span class="dot"></span>
272 <span class="dot"></span>
273 <span class="dot"></span>
274 <span class="bar-label" id="bar-host">http-error-handler</span>
275 </div>
276
277 <div class="terminal-body">
278
279 <div class="prompt-line">
280 <span class="prompt-sign">$</span>
281 <span class="prompt-cmd" id="prompt-path">GET <span id="req-url">...</span> HTTP/1.1</span>
282 </div>
283
284 <div class="error-block">
285 <div class="error-code">HTTP 404 &mdash; Not Found</div>
286 <div class="error-title">Risorsa non trovata</div>
287 <div class="error-sub">The requested resource could not be located on this server.</div>
288 </div>
289
290 <div class="output-block">
291 <div class="output-line">
292 <span class="output-key">host</span>
293 <span class="output-val highlight" id="out-host">-</span>
294 </div>
295 <div class="output-line">
296 <span class="output-key">path</span>
297 <span class="output-val" id="out-path">-</span>
298 </div>
299 <div class="output-line">
300 <span class="output-key">status</span>
301 <span class="output-val warn">404 Not Found</span>
302 </div>
303 <div class="output-line">
304 <span class="output-key">indexing</span>
305 <span class="output-val">noindex, nofollow</span>
306 </div>
307 </div>
308
309 <hr class="divider">
310
311 <div class="note-block" role="note">
312 <p>
313 <strong>La risorsa richiesta non esiste</strong> oppure l'host non e' configurato su questo server.
314 Se hai seguito un link esterno, potrebbe essere obsoleto o errato.
315 </p>
316 <p>
317 The requested resource does not exist or the host is not configured on this server.
318 If you followed an external link, it may be outdated or incorrect.
319 </p>
320 </div>
321
322 <div class="action-line">
323 <span class="prompt-sign">$</span>
324 <span>cd <a href="/" class="home-link" aria-label="Visita la home del sito">home</a></span>
325 <span class="cursor" aria-hidden="true"></span>
326 </div>
327
328 </div>
329
330 </div>
331
332 <p class="footer-note" aria-hidden="true">
333 nginx proxy manager &mdash; custom error page
334 </p>
335
336 <script>
337 (function () {
338 var host = window.location.hostname || '';
339 var path = window.location.pathname || '/';
340 var fullUrl = host + path;
341
342 var elHost = document.getElementById('out-host');
343 var elPath = document.getElementById('out-path');
344 var elReqUrl = document.getElementById('req-url');
345 var elBarHost = document.getElementById('bar-host');
346
347 if (host) {
348 elHost.textContent = host;
349 elBarHost.textContent = host;
350 elReqUrl.textContent = fullUrl;
351 }
352
353 elPath.textContent = path;
354 })();
355 </script>
356
357</body>
358</html>