<!DOCTYPE html> <!-- Error 411: Length Required Description: The "Content-Length" is not defined. The server will not accept the request without it --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="noindex, nofollow"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>411: Length Required</title> <style> html, body { height: 100%; overflow: hidden; margin: 0; padding: 0; } body { font: 20px Hack, Helvetica, sans-serif; color: #333; } canvas { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .frame { z-index: 3; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2) 19%, rgba(0, 0, 0, .9) 100%); } .frame div { position: absolute; left: 0; top: -20%; width: 100%; height: 20%; background-color: rgba(0, 0, 0, .12); box-shadow: 0 0 30px rgba(0, 0, 0, .25); animation: horizontalLine 12s linear infinite; } .frame div:nth-child(1) { animation-delay: 0ms; } .frame div:nth-child(2) { animation-delay: 4s; } .frame div:nth-child(3) { animation-delay: 8s; } @keyframes horizontalLine { 0% {top: -20%} 100% {top: 100%} } .container-center { height: 100%; align-items: center; display: flex; justify-content: center; } .container-center div { z-index: 2; } h1, h2 { text-align: center; color: transparent; text-shadow: 0 0 10px rgba(0, 0, 0, .6); } h1 { font: bold 13em Arial, sans-serif; animation: codeText 2s linear infinite; margin: 0; } @keyframes codeText { 0% {text-shadow: 0 0 15px rgba(0, 0, 0, .3)} 33% {text-shadow: 0 0 5px rgba(0, 0, 0, .2)} 66% {text-shadow: 0 0 10px rgba(0, 0, 0, .1)} 100% {text-shadow: 0 0 15px rgba(0, 0, 0, .3)} } h2 { font: bold 2.5em Arial, sans-serif; animation: descriptionText 4s linear infinite; margin-bottom: 0; } @keyframes descriptionText { 0% {text-shadow: 0 0 10px rgba(0, 0, 0, .5)} 33% {text-shadow: 0 0 5px rgba(0, 0, 0, .1)} 66% {text-shadow: 0 0 5px rgba(0, 0, 0, .25)} 100% {text-shadow: 0 0 10px rgba(0, 0, 0, .5)} } </style> </head> <body> <div class="container-center"> <div> <h1>411</h1> <h2 data-l10n>The "Content-Length" is not defined. The server will not accept the request without it</h2> </div> </div> <div class="frame"> <div></div> <div></div> <div></div> </div> <canvas id="canvas"></canvas> <script> // main idea author: https://codepen.io/moklick const $canvas = document.getElementById('canvas'), width = Math.max(800, document.body.clientWidth), height = Math.max(600, document.body.clientHeight); $canvas.width = width; $canvas.height = height; const ctx = $canvas.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); ctx.fill(); const imgData = ctx.getImageData(0, 0, width, height), pix = imgData.data; const flickerInterval = window.setInterval(function () { for (let i = 0; i < pix.length; i += 4) { let color = (Math.random() * 255) + 50; pix[i] = color; pix[i + 1] = color; pix[i + 2] = color; } ctx.putImageData(imgData, 0, 0); }, 45); window.addEventListener('beforeunload', function (/** @param BeforeUnloadEvent event */ event) { window.clearInterval(flickerInterval); }); // if (navigator.language.substring(0, 2).toLowerCase() !== 'en') { ((s, p) => { // localize the page (details here - https://github.com/tarampampam/error-pages/tree/master/l10n) s.src = 'https://cdn.jsdelivr.net/gh/tarampampam/error-pages@2/l10n/l10n.min.js'; // '../l10n/l10n.js'; s.async = s.defer = true; s.addEventListener('load', () => p.removeChild(s)); p.appendChild(s); })(document.createElement('script'), document.body); } // </script> </body> <!-- Error 411: Length Required Description: The "Content-Length" is not defined. The server will not accept the request without it --> </html>