<?php

header('HTTP/1.0 404 Not Found');
$hostname = strtok(gethostname(), '.');

if (file_exists(__DIR__ . '/bg/' . $hostname . '.webp')) {
    $bg = '/bg/' . $hostname . '.webp';
} else {
    $bg = '/bg/default.webp';
}

$bio = false;
$matches = false;
if (file_exists(__DIR__ . '/bios/' . $hostname . '.txt')) {
    $bio = file_get_contents(__DIR__ . '/bios/' . $hostname . '.txt');
    if (preg_match('[^(.*)\n\n(http[^\n]*)$]sm', $bio, $matches)) {
        $bio = $matches[1];
        $source = $matches[2];
    }
    $bio = str_replace(['[', ']', "\n\n"], ['<strong>', '</strong>', '<br><br>'], htmlspecialchars($bio));
}

?>
<!DOCTYPE html>
<html>
    <head>
        <title>Site Not Found</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            @import url(https://fonts.googleapis.com/css?family=Roboto+Mono:700&amp;display=swap);
            @import url(https://fonts.googleapis.com/css?family=Raleway:400&amp;display=swap);
            html, body {
                padding: 0;
                margin: 0;
            }
            body {
                background: url(<?=$bg?>) no-repeat center center;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                background-attachment: fixed;
            }
            #wrapper {
                padding: 5vh 5vw;
            }
            #content {
                width: 90vw;
                min-height: 90vh;
                margin: 0;
                padding: 0;
                background: rgba(255, 255, 255, 0.7);
                box-shadow: 0.5rem 0.5rem rgba(255, 255, 255, 0.4);
            }
            text, h1 {
                font-family: "Roboto Mono", monospace;
            }
            text {
                text-anchor: start;
                font-size: 430px;
            }
            h1 {
                font-size: 4rem;
                background: rgba(40, 124, 40, 0.7);
                color: white;
                text-align: center;
                padding: 0 0.5rem;
            }
            h1, h2 {
                text-align: center;
                margin: 2vh 1vw;
            }
            h2, p {
                font-family: Raleway, sans-serif;
            }
            p {
                text-align: justify;
                margin: 2vh 15vw;
            }
            h2 {
                font-size: 2rem;
                margin-bottom: 1rem;
            }
            p, a {
                font-size: 1.5rem;
                color: black;
            }
            #hostname {
                color: #287c28;
                font-family: "Roboto Mono", monospace;
            }
            #bio {
                background: rgba(255, 255, 255, 0.4);
                margin-top: 5vh;
                padding: 1.5rem 2rem;
                border: solid 1px black;
                box-shadow: 0.5rem 0.5rem rgba(0, 0, 0, 0.4);
                font-size: 1.25rem;
            }
            #source, #source a {
                text-align: right;
                font-size: 1rem;
                color: #333;
            }
            @media only screen and (max-width: 799px) {
                #wrapper {
                    padding: 5vh 10vw;
                }
                #content {
                    width: 80vw;
                }
                h1 {
                    font-size: 3rem;
                }
                h1, h2 {
                    margin: 2vh 2vw;
                }
                p {
                    margin: 2vh 10vw;
                }
                #bio {
                    font-size: 1rem;
                    padding: 1rem;
                }
                #source, #source a {
                    font-size: 0.8rem;
                }
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <div style="width: 20rem; margin: 0 auto 1vh auto; padding-top: 1vh;">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 2000 1000">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18.5%" height="100%" viewBox="0 0 390 740">
                            <path id="upper_triangle" d="M 150 40 L 150 480 L 350 280 A 30 30 90 0 0 350 240 z" fill="#0b4499"/>
                            <path id="lower_triangle" d="M 150 700 L 150 260 L 350 460 A 30 30 90 0 1 350 500 z" fill="#ff8f11"/>
                            <path id="diamond" d="M 150 260 L 260 370 L 150 480 L 40 370 z" fill="#287c28"/>
                        </svg>
                        <text x="382" y="480" fill="#ff8f11">PRATER</text>
                        <text x="382" y="830" fill="#0b4499">RAINES</text>
                    </svg>
                </div>
                <h1>SITE NOT FOUND</h1>
                <h2>You are connected to the web server — <span id="hostname"><?=strtoupper($hostname)?></span></h2>
                <p>Oops. That wasn't meant to happen. Please <a href="mailto:info@praterraines.co.uk?subject=Site%20Not%20Found:%20<?=htmlspecialchars($_SERVER['HTTP_HOST'])?>%20<?=strtoupper($hostname)?>">email us</a>, including the server name above, so we can help you out.</p>
                <?php if ($bio): ?>
                    <p id="bio"><?=$bio?></p>
                    <p id="source"><a href="<?=htmlspecialchars($source)?>"><?=htmlspecialchars($source)?></a></p>
                <?php endif; ?>
            </div>
        </div>
    </body>
</html>
