<?php
class Pages
{
    public $page;

    function get_page($page)
    {
        switch ($page) {
            case 'link 1':
                echo 'This has some stuff about link 1. Could be anything.';
                break;

            case 'link 2':
                echo 'A bunch of jibberish stuff talking about link 2.';
                break;

            case 'link 3':
                echo 'Another link again? This is link 3 stuff.';
                break;

            case 'about':
                echo 'This is all about you know, the site.';
                break;

            default:
                echo 'Home page';
        }
    }
}

$page = new Pages();
?>

<!DOCTYPE html>
<html lang='us'>

<head>
    <title>My Page</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="clock.js"></script>
</head>

<body>

    <table>
        <tr>
            <th colspan="3">
                <img class="logo" src="images/ratt.svg" width="80px">
                My Page Heading
            </th>
        </tr>

        <tr class="midrow">
            <td class="left">
                <h3>Menu</h3>
                <ul>
                    <li><a href="index.php">Home</li>
                    <li><a href="index.php?page=link 1">Link 1</li>
                    <li><a href="index.php?page=link 2">Link 2</li>
                    <li><a href="index.php?page=link 3">Link 3</li>
                    <li><a href="index.php?page=about">About</li>
                </ul>
            </td>
            <td class="mid">
                <p>
                    <?php
                    $page->get_page($_GET['page']);
                    ?>
                </p>
            </td>
            <td class="right">
                <h3>Current Date / Time</h3>
                <div class="date">
                    <span id="date"><?php echo date("m / d / Y"); ?></span>
                     /
                    <span id="clock"></span>
                </div>
                <script>
                    currentTime();
                </script>
            </td>
        </tr>

        <tr>
            <td colspan="3" class="footer">Gaming-Rat Productions &copy: 11/06/2022</td>
        </tr>
    </table>

</body>

</html>

function currentTime() {
    let date = new Date();
    let hh = date.getHours();
    let mm = date.getMinutes();
    let ss = date.getSeconds();
    let session = "AM";

    if (hh == 0) {
        hh = 12;
    }
    if (hh > 12) {
        hh = hh - 12;
        session = "PM";
    }

    hh = (hh < 10) ? "0" + hh : hh;
    mm = (mm < 10) ? "0" + mm : mm;
    ss = (ss < 10) ? "0" + ss : ss;

    let time = hh + ":" + mm + ":" + ss + " " + session;

    document.getElementById("clock").innerText = time;
    let t = setInterval(function () {
        currentTime()
    }, 1000);
}