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