diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..cfdacca --- /dev/null +++ b/Dockerfile @@ -0,0 +1,9 @@ +FROM erseco/alpine-php-webserver +LABEL maintainer="Sven Vogel " +LABEL version="1.0.1" + +COPY php/index-inlined-minified.php /var/www/html/index.php +COPY php/messages.php /var/www/html/messages.php + +# Let runit start nginx & php-fpm +CMD [ "/bin/docker-entrypoint.sh" ] \ No newline at end of file diff --git a/README.md b/README.md index 6657bcf..52e3163 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,24 @@ -# Errorpages +# error-pages -Automatic error page generator for monthaselino \ No newline at end of file +Error pages for montehaselino.de. The service is to used as a quick error response service. It delivers a single html file as response with every resource inlined and encoded into it. + +Make sure to compile every resource into the main.php file. This is due to the fact, that the error response is not a redirect to a public web server but rather an response for by the reverse proxy from an restricted backend. +Make sure to inline resources: +```bash +npm install inliner +npx inliner index.php > index-inlined-minified.php +``` + +Example configuration for caddy: +```Caddyfile +reverse_proxy https://service { + @custom_error status 4xx 5xx + handle_response @custom_error { + # rewrite uri to be the status code + rewrite * /{rp.status_code} + # send automatically generated response page + # the answer must be a single html file without resource from the same origin + reverse_proxy http://error-response:8080 + } +} +``` \ No newline at end of file diff --git a/php/index.php b/php/index.php new file mode 100644 index 0000000..991f5af --- /dev/null +++ b/php/index.php @@ -0,0 +1,32 @@ + + + + + + + Montehaselino - Automatic Status Response + + + +
+
+
+
+ +
+

ERROR

+ " . $response[0] .""; + echo "

" . $response[1] . "

"; + ?> + Go Back +
+
This is an automatically generated error response page.
Please contact administration if you feel this shouldn't be here.
+
+ + \ No newline at end of file diff --git a/php/master.css b/php/master.css new file mode 100644 index 0000000..fb7952a --- /dev/null +++ b/php/master.css @@ -0,0 +1,166 @@ +@font-face { + font-family: Mont; + src: url("res/font/Mont-Heavy.otf"); +} + +html, body, * { + margin: 0; + padding: 0; + + color: #f2f3f4; + background-color: #333333; + + font-family: Mont, sans-serif; + text-align: center; +} + +h1 { + position: relative; + top: -1rem; + + background: transparent; + + font-weight: normal; + font-size: 3rem; + line-height: 3rem; +} + +h2 { + position: relative; + top: -1rem; + + font-weight: bold; + font-size: 9rem; + line-height: 9rem; + + color: transparent; + + opacity: 1; + background: repeating-linear-gradient(45deg, #f2f3f4, #f2f3f4 8px, rgba(242, 244, 245, 0.7) 8px, rgba(242, 244, 245, 0.7) 16px); + background-clip: text; + -webkit-background-clip: text; + background-size: 200% 200%; + animation: barberpole 50s linear infinite; +} + +@keyframes barberpole { + 100% { + background-position: 100% 100%; + } +} + +h3 { + position: relative; + top: -1rem; + + font-family: sans-serif; + font-weight: normal; + font-size: 1.5rem; + padding-bottom: 1.5rem; + + width: calc(min(80%, 40rem)); + margin-left: auto; + margin-right: auto; +} + +#mountain { + width: 100%; + max-height: 30rem; + background-color: #4682b4; + + border-top: 2rem solid #4682b4; +} + +#rocks { + width: 100%; + height: 0.5rem; + position: relative; + top: -0.75rem; + + background: transparent url("res/svg/rocks.svg") repeat-x; + background-size: contain; +} + +.subtle { + padding-top: 2rem; + font-weight: normal; + font-family: sans-serif; + opacity: 0.5; +} + +hr { + margin-top: 2.5rem; + width: calc(min(20rem, 80%)); + margin-right: auto; + margin-left: auto; + opacity: 0.5; +} + +a { + text-decoration: none; + background: #f2f3f4; + color: #333333; + border-radius: 0.5rem; + padding: 0.75rem; +} + +div { + line-height: 1.5rem; +} + +#cloud1 { + position: absolute; + top: 1rem; + width: 100%; + height: 4rem; + + background: transparent url("res/svg/cloud.svg") no-repeat center; + background-size: contain; + opacity: 0.5; + background-position-x: -8rem; + animation: cloud-motion-1 30s linear infinite; +} + +@keyframes cloud-motion-1 { + 100% { + background-position: calc(100% + 8rem) 0; + } +} + +#cloud2 { + position: absolute; + top: 10rem; + width: 100%; + height: 4rem; + + background: transparent url("res/svg/cloud.svg") no-repeat center; + background-size: contain; + opacity: 0.5; + background-position-x: -8rem; + animation: cloud-motion-1 30s 15s linear infinite; +} + +@keyframes cloud-motion-2 { + 100% { + background-position: calc(100% + 8rem) 0; + } +} + +#cloud3 { + top: 4rem; + position: absolute; + width: 100%; + height: 4rem; + + background: transparent url("res/svg/cloud.svg") no-repeat center; + background-size: contain; + opacity: 0.5; + background-position-x: -8rem; + animation: cloud-motion-1 30s 20s linear infinite; +} + +@keyframes cloud-motion-3 { + 100% { + background-position: calc(100% + 8rem) 0; + } +} \ No newline at end of file diff --git a/php/messages.php b/php/messages.php new file mode 100644 index 0000000..e324d07 --- /dev/null +++ b/php/messages.php @@ -0,0 +1,33 @@ + "You are no authorized to access the resource", + 404 => "The requested resource couldn't be found", + 403 => "Access to the resource was denied for the server", + 405 => "Method not supported by the server", + 407 => "You are no authorized to access the resource", + 408 => "Request timed out", + 500 => "The server encountered an internal error", + 501 => "Method not supported by the server", + 502 => "Requested endpoint encountered an error", + 503 => "Service is currently unavailable", + 504 => "Requested endpoint is unreachable", + 511 => "Requested endpoint requires authentication for proxy", +]; + +function get_status_message($uri): array +{ + $status = "501"; + $message = "The received status is unsupported by this server: `" . substr($uri, 0, 10) . "`"; + + $code = intval(trim(str_replace("/", "", $uri))); + + if (key_exists($code, RESPONSES)) { + $status = (string) $code; + $message = RESPONSES[$code]; + } + + return [$status, $message]; +} \ No newline at end of file diff --git a/php/res/font/Mont-Heavy.otf b/php/res/font/Mont-Heavy.otf new file mode 100644 index 0000000..7429cee Binary files /dev/null and b/php/res/font/Mont-Heavy.otf differ diff --git a/php/res/svg/cloud.svg b/php/res/svg/cloud.svg new file mode 100644 index 0000000..0337c44 --- /dev/null +++ b/php/res/svg/cloud.svg @@ -0,0 +1,41 @@ + + + + + + + + + + diff --git a/php/res/svg/error-page-overlay.svg b/php/res/svg/error-page-overlay.svg new file mode 100644 index 0000000..52947a9 --- /dev/null +++ b/php/res/svg/error-page-overlay.svg @@ -0,0 +1,63 @@ + + + + diff --git a/php/res/svg/rocks.svg b/php/res/svg/rocks.svg new file mode 100644 index 0000000..9d19a05 --- /dev/null +++ b/php/res/svg/rocks.svg @@ -0,0 +1,38 @@ + + + + + + + + + +