Update

1 files changed, 856 insertions, 0 deletions

diff --git a/pages/computers.inc b/pages/computers.inc
new file mode 100644
index 0000000..c2d6437
--- /dev/null
+++ b/pages/computers.inc
@@ -0,0 +1,856 @@
+<?php
+
+require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/init.inc"; global $title; global $isLoggedIn; global $pagename;
+$computer = [];
+$parts = explode("/", $pagename);
+
+if (isset($parts[1])) {
+    if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/computers/metadata/" . $parts[1] . ".json")) {
+        $computer = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/computers/metadata/" . $parts[1] . ".json"), true);
+        $id = $parts[1];
+        $owner = explode("-", $id)[0];
+
+        if (count($parts) > 2) {
+            $title = "Remote control · " . $computer["host"] . " · " . $title;
+        } else {
+            $title = $computer["host"] . " · " . $title;
+        }
+    } else {
+        header("Location: /-/computers");
+        die();
+    }
+}
+
+if (isset($parts[2]) && $parts[2] !== "control") {
+    header("Location: /-/computers/" . $parts[1]);
+    die();
+}
+
+require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/header.inc';
+
+$parts = array_values(array_filter($parts, function ($i) {
+    return $i !== "-";
+}));
+
+if (count($parts) === 2 || count($parts) === 3) {
+    array_unshift($parts, null);
+}
+
+?>
+
+<br>
+<div class="container">
+    <?php if (isset($parts[2]) && !isset($parts[3])): $id = $parts[2]; ?>
+        <div>
+            <h2>
+                <span style="vertical-align: middle;"><?= $computer["host"] ?></span>
+                <a href="/-/computers" class="small btn btn-outline-light" style="float:right;margin-top:5px;vertical-align:middle;opacity:1 !important; color:white;">Back</a>
+            </h2>
+
+            <h4 style="margin-top: 20px;margin-bottom: 10px;">Overview</h4>
+            <style>
+                @media (max-width: 700px) {
+                    #g-0 {
+                        grid-template-columns: 1fr !important;
+                    }
+
+                    #g-0 img, #g-0 table {
+                        display: inline-block;
+                        margin-left: auto;
+                        margin-right: auto;
+                    }
+
+                    #g-0 table {
+                        margin-top: 20px;
+                    }
+                }
+            </style>
+            <div style="display: grid; grid-template-columns: 256px 1fr; grid-column-gap: 30px;" id="g-0">
+                <div style="display: flex; align-items: center;">
+                    <img style="width: 256px;" src="https://ponies.equestria.horse/api/data?f=computers/screens/<?= $id . "-" . $computer["screens"][0]["id"] ?>.jpg">
+                </div>
+                <div style="display: flex; align-items: center;">
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td style="padding-right: 10px; text-align: right;"><b>Owner:</b></td>
+                                <td><?= $owner === "raindrops" ? "Raindrops System" : "Cloudburst System" ?></td>
+                            </tr>
+                            <tr>
+                                <td style="padding-right: 10px; text-align: right;"><b>Luna version:</b></td>
+                                <td><?= $computer["luna_version"] ?></td>
+                            </tr>
+                            <tr>
+                                <td style="padding-right: 10px; text-align: right;"><b>System:</b></td>
+                                <td><?= $computer["os"] ?></td>
+                            </tr>
+                            <tr>
+                                <td style="padding-right: 10px; text-align: right;"><b>OS kernel:</b></td>
+                                <td><?= $computer["kernel"] ?></td>
+                            </tr>
+                            <tr>
+                                <td style="padding-right: 10px; text-align: right;"><b>Serial:</b></td>
+                                <td><?= $computer["serial"] ?> (<?= $computer["serial_source"] === "hardware" ? "logic board" : "OS" ?>)</td>
+                            </tr>
+                            <tr>
+                                <td style="padding-right: 10px; text-align: right;"><b>Last seen:</b></td>
+                                <td><?= date('j M, g:ia (T)', strtotime($computer["date"])) ?>, <?= timeAgo($computer["date"]) ?></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <table><tbody>
+                <tr>
+                    <td colspan="2"><h4 style="margin-top: 20px;margin-bottom: 10px;">Processors and graphics</h4></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Main processor:</b></td>
+                    <td><?= trim($computer["cpu"]["manufacturer"] . " " . $computer["cpu"]["brand"] . " " . $computer["cpu"]["model"]) ?> (<?= $computer["cpu"]["speed"] ?> GHz)</td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Processor threading:</b></td>
+                    <td>
+                        <?= $computer["cpu"]["processors"] ?> processor<?= $computer["cpu"]["processors"] > 1 ? "s" : "" ?>,
+                        <?= $computer["cpu"]["physicalCores"] ?> core<?= $computer["cpu"]["physicalCores"] > 1 ? "s" : "" ?><?= isset($computer["cpu"]["efficiencyCores"]) ? " (" . $computer["cpu"]["efficiencyCores"] . " efficiency, " . $computer["cpu"]["performanceCores"] . " performance)" : "" ?>,
+                        <?= $computer["cpu"]["cores"] ?> thread<?= $computer["cpu"]["cores"] > 1 ? "s" : "" ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Hardware virtualization:</b></td>
+                    <td><?= $computer["cpu"]["virtualization"] ? "Capable" : "Disabled" ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Level 1 cache:</b></td>
+                    <td><?= round($computer["cpu"]["cache"]["l1i"] / 1024, 2) ?> KiB (instruction), <?= round($computer["cpu"]["cache"]["l1d"] / 1024, 2) ?> KiB (data)</td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Level 2 cache:</b></td>
+                    <td><?= isset($computer["cpu"]["cache"]["l2"]) ? round($computer["cpu"]["cache"]["l2"] / 1024**2, 2) . " MiB" : "Not supported" ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Level 3 cache:</b></td>
+                    <td><?= isset($computer["cpu"]["cache"]["l3"]) ? round($computer["cpu"]["cache"]["l3"] / 1024**2, 2) . " MiB" : "Not supported" ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Graphics processor<?= count($computer["gpu"]["controllers"]) > 1 ? "s" : "" ?>:</b></td>
+                    <td>
+                        <?php $index = 0; foreach ($computer["gpu"]["controllers"] as $controller): ?>
+                            <?= $controller["bus"] ?> <?= $controller["model"] ?> (<?= $controller["cores"] ?> cores, <?= $controller["vramDynamic"] ? "dynamic graphics memory" : $controller["vram"] . " MiB" ?>)
+                            <?= $index < count($computer["gpu"]["controllers"]) - 1 ? "<br>" : "" ?>
+                        <?php $index++; endforeach; ?>
+                    </td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Display<?= count($computer["gpu"]["displays"]) > 1 ? "s" : "" ?>:</b></td>
+                    <td>
+                        <?php $index = 0; foreach ($computer["gpu"]["displays"] as $display): ?>
+                            <?= $display["connection"] ?> <?= $display["vendor"] ?> <?= $display["model"] ?> (<?= $display["currentResX"] ?>x<?= $display["currentResY"] ?><?= $display["currentResX"] !== $display["resolutionX"] ? ", native " . $display["resolutionX"] . "x" . $display["resolutionY"] : "" ?>, <?= $display["currentRefreshRate"] ?> Hz)
+                            <?= $index < count($computer["gpu"]["controllers"]) - 1 ? "<br>" : "" ?>
+                        <?php $index++; endforeach; ?>
+                    </td>
+                </tr>
+
+                <tr>
+                    <td colspan="2"><h4 style="margin-top: 20px;margin-bottom: 10px;">System memory</h4></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Physical memory:</b></td>
+                    <td><?= round($computer["ram"]["total"] / 1024**3, 2) ?> GiB (<?= round($computer["ram"]["used"] / 1024**2, 2) ?> MiB used, <?= round($computer["ram"]["free"] / 1024**2, 2) ?> MiB free)</td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Memory usage:</b></td>
+                    <td><?= round($computer["ram"]["active"] / 1024**2, 2) ?> MiB active, <?= round($computer["ram"]["available"] / 1024**2, 2) ?> MiB available, <?= round($computer["ram"]["buffcache"] / 1024**2, 2) ?> MiB cache</td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Swap memory:</b></td>
+                    <td><?= round($computer["ram"]["swaptotal"] / 1024**3, 2) ?> GiB (<?= round($computer["ram"]["swapused"] / 1024**2, 2) ?> MiB used, <?= round($computer["ram"]["swapfree"] / 1024**2, 2) ?> MiB free)</td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>RAM chips:</b></td>
+                    <td>
+                        <?php $index = 0; foreach ($computer["ram_chips"] as $chip): ?>
+                            <?= $chip["manufacturer"] ?> <?= round($chip["size"] / 1024**2, 2) ?> MiB <?= $chip["type"] ?>
+                            <?= $index < count($computer["ram_chips"]) - 1 ? "<br>" : "" ?>
+                        <?php $index++; endforeach; ?>
+                    </td>
+                </tr>
+
+                <tr>
+                    <td colspan="2"><h4 style="margin-top: 20px;margin-bottom: 10px;">Battery</h4></td>
+                </tr>
+                <?php if ($computer["battery"]["hasBattery"]): ?>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Battery model:</b></td>
+                    <td><?= preg_replace("/ +/", " ", trim($computer["battery"]["manufacturer"] . " " . $computer["battery"]["type"] . " " . $computer["battery"]["model"])) ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Charge level:</b></td>
+                    <td><?= $computer["battery"]["percent"] ?>%<?= $computer["battery"]["acConnected"] ? ", plugged in" : "" ?> (<?= round($computer["battery"]["voltage"], 2) ?> V)</td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Cycles:</b></td>
+                    <td><?= $computer["battery"]["cycleCount"] ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Remaining capacity:</b></td>
+                    <td><?= $computer["battery"]["currentCapacity"] ?>/<?= $computer["battery"]["maxCapacity"] ?> <?= $computer["battery"]["capacityUnit"] ?> (designed for <?= $computer["battery"]["designedCapacity"] ?> <?= $computer["battery"]["capacityUnit"] ?>, <?= round(($computer["battery"]["maxCapacity"] / $computer["battery"]["designedCapacity"]) * 100, 2) ?>% left)</td>
+                </tr>
+                <?php else: ?><tr><td colspan="2">This computer does not contain a battery.</td></tr><?php endif; ?>
+
+                <tr>
+                    <td colspan="2"><h4 style="margin-top: 20px;margin-bottom: 10px;">Operating system</h4></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>System:</b></td>
+                    <td><?= $computer["os_info"]["distro"] ?> <?= $computer["os_info"]["release"] ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>CPU architecture:</b></td>
+                    <td><?= $computer["os_info"]["arch"] ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Kernel version:</b></td>
+                    <td><?= $computer["os_info"]["kernel"] ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Code page:</b></td>
+                    <td><?= $computer["os_info"]["codepage"] ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Build number:</b></td>
+                    <td><?= $computer["os_info"]["build"] ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Serial number:</b></td>
+                    <td><?= $computer["os_info"]["serial"] ?></td>
+                </tr>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b>Startup interface:</b></td>
+                    <td><?= $computer["os_info"]["uefi"] ? "UEFI" : "BIOS (legacy)" ?></td>
+                </tr>
+
+                <tr>
+                    <td colspan="2"><h4 style="margin-top: 20px;margin-bottom: 10px;">Software versions</h4></td>
+                </tr>
+                <?php foreach ($computer["versions"] as $software => $version): if (trim($version) !== "" && $software !== "systemOpensslLib" && $software !== "openssl" && $software !== "node" && $software !== "v8"): ?>
+                <tr>
+                    <td style="padding-right: 10px; text-align: right;"><b><?=
+                            match ($software) {
+                                "kernel" => "OS kernel",
+                                "systemOpenssl" => $computer["versions"]["systemOpensslLib"],
+                                "npm" => "NPM",
+                                "yarn" => "Yarn",
+                                "gulp" => "Gulp",
+                                "grunt" => "Grunt",
+                                "git" => "Git",
+                                "tsc" => "TypeScript",
+                                "mysql" => "MySQL",
+                                "redis" => "Redis",
+                                "mongodb" => "MongoDB",
+                                "apache" => "Apache HTTPD",
+                                "php" => "PHP",
+                                "docker" => "Docker",
+                                "postfix" => "Postfix SMTP Server",
+                                "postgresql" => "PostgreSQL",
+                                "perl" => "Perl",
+                                "python" => "Python (legacy)",
+                                "python3" => "Python",
+                                "pip" => "PIP (legacy)",
+                                "pip3" => "PIP",
+                                "java" => "Java",
+                                "gcc" => "C compiler",
+                                "virtualbox" => "VirtualBox",
+                                "bash" => "Bash",
+                                "zsh" => "zsh",
+                                "fish" => "Fish",
+                                "powershell" => "PowerShell",
+                                "dotnet" => ".NET",
+                                default => $software,
+                            }
+                    ?>:</b></td>
+                    <td><?= $version ?></td>
+                </tr>
+                <?php endif; endforeach; ?>
+                </tbody>
+            </table>
+
+            <h4 style="margin-top: 20px;margin-bottom: 10px;" id="screens">Screens</h4>
+            <p id="page-content">
+                You can remotely control this computer. <a href="./<?= $id ?>/control">Open remote control.</a>
+            </p>
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;">
+                <?php foreach ($computer["screens"] as $screen): ?>
+                    <div class="card">
+                        <div class="card-body">
+                            <img style="width: 100%;" src="https://ponies.equestria.horse/api/data?f=computers/screens/<?= $id . "-" . $screen["id"] ?>.jpg">
+                        </div>
+                    </div>
+                <?php endforeach; ?>
+            </div>
+
+            <h4 style="margin-top: 20px;margin-bottom: 10px;" id="windows">Windows</h4>
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;">
+                <?php foreach ($computer["windows"] as $window): ?>
+                    <div class="card">
+                        <div class="card-body" style="display: flex; align-items: center;">
+                            <div style="width: 100%;">
+                                <img style="max-width: 100%; max-height: 100%;" src="https://ponies.equestria.horse/api/data?f=computers/windows/<?= $id . "-" . sha1($window["gid"]) ?>.jpg">
+                                <div style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; text-align: center; margin-top: 7px; margin-bottom: -7px;"><?= $window["name"] ?></div>
+                            </div>
+                        </div>
+                    </div>
+                <?php endforeach; ?>
+            </div>
+
+            <h4 style="margin-top: 20px;margin-bottom: 10px;">Sessions</h4>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th scope="col">TTY</th>
+                    <th scope="col">Command</th>
+                    <th scope="col">User</th>
+                    <th scope="col">Open</th>
+                    <th scope="col">Type</th>
+                </tr>
+                </thead>
+                <tbody>
+                <?php foreach ($computer["users"] as $user): ?>
+                    <tr>
+                        <th scope="row"><?= $user["tty"] ?></th>
+                        <td><?= str_replace("�", "", $user["command"]) ?></td>
+                        <td><?= $user["user"] ?></td>
+                        <td><?= $user["date"] . " " . $user["time"] ?></td>
+                        <td><?= trim($user["ip"]) === "" ? "Local" : "Remote (" . $user["ip"] . ")" ?></td>
+                    </tr>
+                <?php endforeach; ?>
+                </tbody>
+            </table>
+
+            <h4 style="margin-top: 20px;margin-bottom: 10px;">Filesystems</h4>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th scope="col">Device</th>
+                    <th scope="col">Mount point</th>
+                    <th scope="col">Type</th>
+                    <th scope="col">Used</th>
+                    <th scope="col">Free</th>
+                    <th scope="col">Total</th>
+                </tr>
+                </thead>
+                <tbody>
+                <?php
+
+                function prettySize($bytes) {
+                    if ($bytes > 1024) {
+                        if ($bytes > 1024**2) {
+                            if ($bytes > 1024**3) {
+                                return round($bytes / 1024**3, 1) . " GB";
+                            } else {
+                                return round($bytes / 1024**2, 1) . " MB";
+                            }
+                        } else {
+                            return round($bytes / 1024, 1) . " KB";
+                        }
+                    } else {
+                        return $bytes . " B";
+                    }
+                }
+
+                uasort($computer["filesystems"], function ($a, $b) {
+                    return $b["use"] - $a["use"];
+                });
+
+                foreach ($computer["filesystems"] as $fs): ?>
+                    <tr>
+                        <th scope="row"><?= $fs["fs"] ?></th>
+                        <td><?= $fs["mount"] ?></td>
+                        <td><?= $fs["type"] ?></td>
+                        <td><?= prettySize($fs["used"]) ?> (<?= $fs["use"] ?>%)</td>
+                        <td><?= prettySize($fs["available"]) ?></td>
+                        <td><?= prettySize($fs["size"]) ?></td>
+                    </tr>
+                <?php endforeach; ?>
+                </tbody>
+            </table>
+
+            <h4 style="margin-top: 20px;margin-bottom: 10px;">Audio devices</h4>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th scope="col">Type</th>
+                    <th scope="col">Manufacturer</th>
+                    <th scope="col">Name</th>
+                    <th scope="col">Default</th>
+                    <th scope="col">Connection</th>
+                </tr>
+                </thead>
+                <tbody>
+                <?php foreach ($computer["audio"] as $device): ?>
+                    <tr>
+                        <th scope="row"><?= trim($device["type"]) === "" ? "Device" : $device["type"] ?></th>
+                        <td><?= $device["manufacturer"] ?></td>
+                        <td><?= $device["name"] ?></td>
+                        <td><?= $device["default"] ? "Yes" : "" ?></td>
+                        <td><?= trim($device["channel"]) === "" ? "Virtual" : $device["channel"] ?></td>
+                    </tr>
+                <?php endforeach; ?>
+                </tbody>
+            </table>
+
+            <h4 style="margin-top: 20px;margin-bottom: 10px;">Network cards</h4>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th scope="col">Interface</th>
+                    <th scope="col">State</th>
+                    <th scope="col">IP addresses</th>
+                    <th scope="col">MAC address</th>
+                    <th scope="col">Type</th>
+                    <th scope="col">Internal</th>
+                    <th scope="col">Virtual</th>
+                    <th scope="col">DHCP</th>
+                </tr>
+                </thead>
+                <tbody>
+                <?php
+
+                uasort($computer["network"], function ($a, $b) {
+                    $statA = match ($a["operstate"]) {
+                        "up" => 300,
+                        "down" => 200,
+                        default => 100
+                    };
+                    $statB = match ($b["operstate"]) {
+                        "up" => 300,
+                        "down" => 200,
+                        default => 100
+                    };
+
+                    return $statB - $statA;
+                });
+
+                foreach ($computer["network"] as $iface): ?>
+                <tr <?= $iface["operstate"] !== "up" ? 'style="opacity:.5;"' : "" ?>>
+                    <th scope="row"><?= $iface["ifaceName"] ?></th>
+                    <td><?= $iface["operstate"] === "up" ? "Active" : ($iface["operstate"] === "down" ? "Inactive" : "") ?></td>
+                    <td><?= trim($iface["ip4"] !== "") ? $iface["ip4"] : "" ?><?= trim($iface["ip6"] !== "") ? (trim($iface["ip4"] !== "") ? ", " : "") . $iface["ip6"] : "" ?></td>
+                    <td><?= trim($iface["mac"] !== "") ? $iface["mac"] : "" ?></td>
+                    <td><?= $iface["type"] === "wireless" ? "Wireless" : "Wired" ?></td>
+                    <td><?= $iface["internal"] ? "Yes" : "" ?></td>
+                    <td><?= $iface["virtual"] ? "Yes" : "" ?></td>
+                    <td><?= $iface["dhcp"] ? "Yes" : "" ?></td>
+                </tr>
+                <?php endforeach; ?>
+                </tbody>
+            </table>
+
+            <h4 style="margin-top: 20px;margin-bottom: 10px;">Network connections</h4>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th scope="col">State</th>
+                    <th scope="col">Protocol</th>
+                    <th scope="col">Source</th>
+                    <th scope="col">Destination</th>
+                    <th scope="col">Process</th>
+                </tr>
+                </thead>
+                <tbody>
+                <?php foreach ($computer["connections"] as $connection): ?>
+                    <tr>
+                        <th scope="row"><?= match ($connection["state"]) {
+                            "ESTABLISHED" => "Connected",
+                            "LISTEN" => "Listening",
+                            "CLOSING" => "Terminating",
+                            "UNKNOWN" => "?",
+                            "LAST_ACK", "FIN_WAIT2" => "Waiting",
+                            "TIME_WAIT" => "Waiting",
+                            "FIN_WAIT1" => "Closing",
+                            "SYN_RECV" => "Received",
+                            "SYN_SENT" => "Attempting",
+                            default => $connection["state"],
+                        } ?></th>
+                        <td><?= match ($connection["protocol"]) {
+                            "tcp4" => "TCP over IPv4",
+                            "tcp6" => "TCP over IPv6",
+                            "tcp46" => "TCP over IPv4 and IPv6",
+                            "udp4" => "UDP over IPv4",
+                            "udp6" => "UDP over IPv6",
+                            "udp46" => "UDP over IPv4 and IPv6",
+                            default => $connection["protocol"],
+                        } ?></td>
+                        <td><?= $connection["localAddress"] === "*" ? "&lt;all&gt;" : match ($connection["localAddress"]) {
+                            "127.0.0.1" => "&lt;local IPv4&gt;",
+                            "::1" => "&lt;local IPv6&gt;",
+                            default => $connection["localAddress"],
+                        } ?> (port <?= $connection["localPort"] ?>)</td>
+                        <td><?php if ($connection["state"] !== "LISTEN"): ?><?= $connection["peerAddress"] === "*" ? "&lt;all&gt;" : match ($connection["peerAddress"]) {
+                                "127.0.0.1" => "&lt;local IPv4&gt;",
+                                "::1" => "&lt;local IPv6&gt;",
+                                default => $connection["localAddress"],
+                            } ?> (<?= $connection["peerPort"] ?>)<?php endif; ?></td>
+                        <td><?php
+
+                            $f = array_values(array_filter($computer["processes"], function ($i) use ($connection) {
+                                return $i["pid"] === $connection["pid"];
+                            }));
+
+                            if (count($f) > 0) {
+                                echo($f[0]["name"] . " [" . $connection["pid"] . "]");
+                            } else {
+                                echo($connection["pid"]);
+                            }
+
+                            ?></td>
+                    </tr>
+                <?php endforeach; ?>
+                </tbody>
+            </table>
+
+            <h4 style="margin-top: 20px;margin-bottom: 10px;">Processes</h4>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th scope="col">PID</th>
+                        <th scope="col">Name</th>
+                        <th scope="col">CPU</th>
+                        <th scope="col">RAM</th>
+                        <th scope="col">User</th>
+                        <th scope="col">Started</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($computer["processes"] as $process): ?>
+                        <tr>
+                            <th scope="row"><?= $process["pid"] ?></th>
+                            <td><?= $process["name"] ?></td>
+                            <td><?= $process["cpu"] ?>%</td>
+                            <td><?= $process["ram"] ?>%</td>
+                            <td><?= $process["user"] ?></td>
+                            <td><?= timeAgo($process["date"]) ?></td>
+                        </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    <?php elseif (isset($parts[3]) && $parts[3] === "control"): $id = $parts[2]; ?>
+    <div>
+        <h2>
+            <span style="vertical-align: middle;">Remote controlling <?= $computer["host"] ?></span>
+            <a href="/-/computers/<?= $id ?>" class="small btn btn-outline-light" style="float:right;margin-top:5px;vertical-align:middle;opacity:1 !important; color:white;">Back</a>
+        </h2>
+
+        <div style="display: flex; align-items: center;">
+            <img id="display" style="max-width: 100%; max-height: 100%; height: 100%; width: 100%; opacity: .5" src="https://ponies.equestria.horse/api/data?f=computers/screens/<?= $id . "-" . $computer["screens"][0]["id"] ?>.jpg">
+        </div>
+
+        <div id="commands" style="background: #151515; border: 1px solid #333; margin-top: 10px; border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 14px;">
+            <div id="output" style="height: 200px; padding: 10px 20px; overflow: auto;">
+                <pre id="output-text"></pre>
+                <div id="loader" style="display: none;">
+                    <img src="/assets/editor/load.svg" style="width: 36px; vertical-align: middle; margin-left: -8px; margin-top: -8px;" id="loader-img" alt="">
+                    <span id="loader-time" style="vertical-align: middle; opacity: .5; display: inline-block; margin-top: -8px; margin-left: -8px;">
+                        <span id="loader-time-inner"></span>
+                        <span id="loader-time-stopper">
+                            | <a id="loader-time-stopper-link" style="cursor: pointer; text-decoration: underline;" onclick="stopCommand();">Stop</a>
+                        </span>
+                    </span>
+                </div>
+            </div>
+            <div id="entry" style="border-top: 1px solid #333;">
+                <input type="text" id="command-entry" placeholder="Enter a command" style="width: 100%; color: white; background: transparent; border: none; padding: 10px 20px; outline: none;">
+            </div>
+        </div>
+
+        <script>
+            function stopCommand() {
+                ws.send(JSON.stringify({
+                    type: "halt"
+                }));
+            }
+
+            function scrollToBottom() {
+                document.getElementById("output").scrollTop = document.getElementById("output").scrollHeight;
+            }
+
+            window.addEventListener("load", () => {
+                document.getElementById("command-entry").value = "";
+            });
+
+            document.getElementById("command-entry").onkeydown = (event) => {
+                if (event.key === "Enter") {
+                    event.preventDefault();
+                    let command = document.getElementById("command-entry").value;
+                    document.getElementById("command-entry").value = "";
+                    document.getElementById("command-entry").disabled = true;
+                    document.getElementById("loader-time").style.display = "none";
+                    document.getElementById("loader").style.display = "";
+                    document.getElementById("output-text").innerHTML += "\n$ " + command.replaceAll(">", "&gt;").replaceAll("<", "&lt;") + "\n";
+                    scrollToBottom();
+                    ws.send(JSON.stringify({
+                        type: "command",
+                        value: btoa(command)
+                    }));
+                }
+            }
+
+            document.getElementById("title-bar-action-1").style.display = "none";
+            window.controlling = false;
+            window.commandRunInterval = null;
+
+            function connect() {
+                window.ws = new WebSocket("wss://ponies.equestria.horse/_Computers-RemoteControl-EntryPoint/socket");
+                window.baseLatency = null;
+
+                ws.addEventListener('open', (data) => {
+                    console.log(data);
+                    ws.send(JSON.stringify({
+                        type: "client",
+                        id: "<?= $id ?>",
+                        token: "<?= $_COOKIE['PEH2_SESSION_TOKEN'] ?>"
+                    }))
+                });
+
+                ws.addEventListener('message', async (_data) => {
+                    let data = JSON.parse(await (_data.data.text()));
+
+                    if (data.type === "image") {
+                        document.getElementById("display").style.opacity = "1";
+                        document.getElementById("display").src = data.url;
+
+                        if (baseLatency) {
+                            ws.send(JSON.stringify({
+                                type: "set_latency",
+                                value: Math.abs((new Date().getTime() - data.time) - baseLatency)
+                            }));
+
+                            if (Math.abs((new Date().getTime() - data.time) - baseLatency) > 200) {
+                                ws.send(JSON.stringify({
+                                    type: "reduce_quality"
+                                }));
+                            } else if (Math.abs((new Date().getTime() - data.time) - baseLatency) < 150) {
+                                ws.send(JSON.stringify({
+                                    type: "increase_quality"
+                                }));
+                            }
+                        } else {
+                            window.baseLatency = Math.abs(new Date().getTime() - data.time);
+                        }
+                    } else if (data.type === "command_stop") {
+                        if (data.code !== 0) {
+                            if (data.signal) {
+                                if (data.code) {
+                                    document.getElementById("output-text").innerHTML += "<span style='color: #ff8c8c;'>Command exited with code " + data.code.toString().replaceAll(">", "&gt;").replaceAll("<", "&lt;") + " (caused by " + data.signal.toString().replaceAll(">", "&gt;").replaceAll("<", "&lt;") + ")</span>";
+                                } else {
+                                    document.getElementById("output-text").innerHTML += "<span style='color: #ff8c8c;'>Command exited with signal " + data.signal.toString().replaceAll(">", "&gt;").replaceAll("<", "&lt;");
+                                }
+                            } else {
+                                document.getElementById("output-text").innerHTML += "<span style='color: #ff8c8c;'>Command exited with code " + data.code.toString().replaceAll(">", "&gt;").replaceAll("<", "&lt;") + "</span>";
+                            }
+                        }
+
+                        clearInterval(window.commandRunInterval);
+                        document.getElementById("command-entry").disabled = false;
+                        document.getElementById("loader").style.display = "none";
+                        scrollToBottom();
+                    } else if (data.type === "command_start") {
+                        document.getElementById("loader-time").style.display = "inline-block";
+                        document.getElementById("loader-time-inner").innerText = "";
+                        window.commandStartTime = new Date().getTime();
+                        window.commandRunInterval = setInterval(() => {
+                            document.getElementById("loader-time-inner").innerText = ((new Date().getTime() - window.commandStartTime) / 1000).toFixed(2) + "s";
+                        }, 10);
+                        scrollToBottom();
+                    } else if (data.type === "command_stdout" || data.type === "command_stderr") {
+                        if (data.type === "command_stderr") {
+                            document.getElementById("output-text").innerHTML += "<span style='color: #ffec8c;'>" + atob(data.value).replaceAll(">", "&gt;").replaceAll("<", "&lt;") + "</span>";
+                        } else {
+                            document.getElementById("output-text").innerHTML += atob(data.value).replaceAll(">", "&gt;").replaceAll("<", "&lt;");
+                        }
+
+                        scrollToBottom();
+                    } else {
+                        console.log(data);
+                    }
+                });
+
+                ws.addEventListener('close', (data) => {
+                    document.getElementById("display").style.opacity = "0.5";
+                    console.log(data);
+
+                    setTimeout(() => {
+                        connect();
+                    }, 1000);
+                });
+            }
+
+            connect();
+
+            document.getElementById("display").addEventListener("mousemove", (event) => {
+                event.preventDefault();
+
+                if (window.controlling) ws.send(JSON.stringify({
+                    type: "move_cursor",
+                    x: event.offsetX / document.getElementById("display").width,
+                    y: event.offsetY / document.getElementById("display").height
+                }));
+            });
+
+            document.getElementById("display").addEventListener("click", (event) => {
+                event.preventDefault();
+
+                if (window.controlling) ws.send(JSON.stringify({
+                    type: "click",
+                    button: 0
+                }));
+            });
+
+            document.getElementById("display").addEventListener("contextmenu", (event) => {
+                event.preventDefault();
+
+                if (window.controlling) ws.send(JSON.stringify({
+                    type: "click",
+                    button: 1
+                }));
+            });
+
+            document.getElementById("display").addEventListener("auxclick", (event) => {
+                event.preventDefault();
+
+                if (window.controlling) ws.send(JSON.stringify({
+                    type: "click",
+                    button: 2
+                }));
+            });
+
+            document.body.onkeydown = document.getElementById("display").onkeydown = (event) => {
+                if (window.controlling) event.preventDefault();
+
+                if (window.controlling) ws.send(JSON.stringify({
+                    type: "keyboard",
+                    shift: event.shiftKey,
+                    ctrl: event.ctrlKey,
+                    meta: event.metaKey,
+                    alt: event.altKey,
+                    key: event.key
+                }));
+            }
+
+            document.getElementById("display").ondragstart = (event) => {
+                event.preventDefault();
+
+                if (window.controlling) ws.send(JSON.stringify({
+                    type: "move_cursor",
+                    x: event.offsetX / document.getElementById("display").width,
+                    y: event.offsetY / document.getElementById("display").height
+                }));
+                if (window.controlling) ws.send(JSON.stringify({
+                    type: "start_drag"
+                }));
+            }
+
+            document.getElementById("display").ondragend = (event) => {
+                event.preventDefault();
+
+                if (window.controlling) ws.send(JSON.stringify({
+                    type: "move_cursor",
+                    x: event.offsetX / document.getElementById("display").width,
+                    y: event.offsetY / document.getElementById("display").height
+                }));
+                if (window.controlling) ws.send(JSON.stringify({
+                    type: "stop_drag"
+                }));
+            }
+
+            function enableControl() {
+                document.getElementById("title-bar-action-1").style.display = "inline-block";
+                document.getElementById("title-bar-action-0").style.display = "none";
+                window.controlling = true;
+            }
+
+            function disableControl() {
+                document.getElementById("title-bar-action-1").style.display = "none";
+                document.getElementById("title-bar-action-0").style.display = "inline-block";
+                window.controlling = false;
+            }
+        </script>
+    <?php else: ?>
+        <div>
+            <h2>Computers</h2>
+            <p>Click on a computer to view information about it (open windows, installed apps, ...).</p>
+
+            <ul class="list-group">
+                <?php foreach (array_filter(scandir($_SERVER['DOCUMENT_ROOT'] . "/includes/data/computers/metadata"), function ($i) {
+                    return !str_starts_with($i, ".");
+                }) as $file): $computer = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/computers/metadata/" . $file), true); $id = substr($file, 0, -5); $owner = explode("-", $id)[0]; ?>
+                    <a href="/-/computers/<?= $id ?>" class="list-group-item list-group-item-action" style="display: grid; grid-template-columns: 100px 1fr; grid-column-gap: 10px;">
+                        <div style="display: flex; align-items: center;">
+                            <img style="width: 100px;" src="https://ponies.equestria.horse/api/data?f=computers/screens/<?= $id . "-" . $computer["screens"][0]["id"] ?>.jpg">
+                        </div>
+                        <div style="display: flex; align-items: center;">
+                            <div>
+                                <b><?= $computer["host"] ?></b> · <?= $computer["os"] ?><br>
+                                Owned by <?= $owner === "raindrops" ? "Raindrops System" : "Cloudburst System"; ?><br>
+                                Last seen <?= timeAgo($computer["date"]) ?>
+                            </div>
+                        </div>
+                    </a>
+                <?php endforeach; ?>
+            </ul>
+        </div>
+    <?php endif; ?>
+</div>
+
+<style>
+    .list-group-item {
+        color: #fff;
+        background-color: #222;
+        border: 1px solid rgba(255, 255, 255, .125);
+    }
+
+    .list-group-item.disabled {
+        color: #fff;
+        background-color: #222;
+        border-color: rgba(255, 255, 255, .125);
+        opacity: .75;
+    }
+
+    .list-group-item:hover {
+        background-color: #252525;
+        color: #ddd;
+    }
+
+    .list-group-item:active, .list-group-item:focus {
+        background-color: #272727;
+        color: #bbb;
+    }
+
+    .modal-header {
+        border-bottom: 1px solid #353738;
+    }
+
+    .modal-content {
+        border: 1px solid rgba(255, 255, 255, .2);
+        background-color: #111;
+    }
+
+    .btn-close {
+        filter: invert(1);
+    }
+
+    .btn-outline-light:hover {
+        color: black !important;
+    }
+
+    table {
+        color: white !important;
+    }
+
+    table * {
+        border-color: rgba(255, 255, 255, .25) !important;
+    }
+</style>
+
+<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.inc'; ?>