No history records found.<style>
    /* Dark mode styles */
    body.dark-mode {
        --link-color: #E4BFFF;
        --brand-color: #444444;
        --text-color: #ffffff;
        --border-color: #444444;
        --brand-color-darker: #555555;
        --border-color-darker: #555;
        --background-color: #222222;
        --lable: black;
        background-color: #222222;
        /* Dark background */
        color: #ffffff;
        /* Light text color */
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
        --header-image: linear-gradient(121deg, #373737 17%, transparent 17.05%), linear-gradient(-37deg, #646464 20%, transparent 20.05%), linear-gradient(23deg, #384044 46%, transparent 46.05%), linear-gradient(-187deg, #545e64 49%, transparent 49.05%), linear-gradient(0deg, #252b2f 100%, transparent 100.05%);
    }

    /* Light mode styles */
    body.light-mode {
        --link-color: #5544cc;
        --link-color: color: #54c;
        --brand-color: #8cb9d5;
        --brand-color-darker: #93ccff;
        --border-color: #93ccff;
        --border-color-darker: #77a4dd;
        --text-color: #000;
        --background-color: #fff;
        --lable: black;
        background-color: #fff;
        /* Light background */
        color: #000;
        /* Dark text color */
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
        --header-image: linear-gradient(121deg, #8cb9d5 17%, transparent 17.05%), linear-gradient(-37deg, #c7ddeb 20%, transparent 20.05%), linear-gradient(23deg, #aecee1 46%, transparent 46.05%), linear-gradient(-187deg, #367296 49%, transparent 49.05%), linear-gradient(0deg, #5398c1 100%, transparent 100.05%);
    }


    /* BusTimes mode styles */
    body.bus-mode {
        --link-color: #5544cc;
        --brand-color: #ffff9e;
        --brand-color-darker: #de8;
        --brand-color-darker-darker: #cd7;
        --border-color: var(--brand-color-darker);
        --border-color-darker: var(--brand-color-darker-darker);
        --text-color: #000;
        --background-color: #fff;
        --lable: black;
        background-color: #fff;
        /* Light background */
        color: #000;
        /* Dark text color */
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
        --header-image: linear-gradient(121deg, #ffff9e 17%, transparent 17.05%), linear-gradient(-37deg, #ffffca 20%, transparent 20.05%), linear-gradient(23deg, #ffffc2 46%, transparent 46.05%), linear-gradient(-187deg, #f2f273 49%, transparent 49.05%), linear-gradient(0deg, #ffff89 100%, transparent 100.05%);
    }

    body.timesbus-dark {
        --brand-color: #074e60;
        --brand-color-darker: #0c3b46;
        --brand-color-darker-darker: #2c5e6a;
        --border-color: var(--brand-color-darker);
        --border-color-darker: var(--brand-color-darker-darker);
        --background-color: #222;
        --text-color: #fff;
        --link-color: #afdde9;
        --active-link-color: #afdde9;
        --summary-marker-color: #eee;
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        color-scheme: dark;
        --header-image: linear-gradient(121deg, #074e60 17%, transparent 17.05%), linear-gradient(-37deg, #1c687b 20%, transparent 20.05%), linear-gradient(23deg, #6ba2b0 46%, transparent 46.05%), linear-gradient(-187deg, #08647b 49%, transparent 49.05%), linear-gradient(0deg, #125364 100%, transparent 100.05%);
    }

    body.timesbus-light {
        --brand-color: rgb(31, 99, 116);
        --brand-color-darker: #0c3b46;
        --brand-color-darker-darker: #0d2930;
        --border-color: var(--brand-color-darker);
        --border-color-darker: var(--brand-color-darker-darker);
        --black: #000;
        --white: #fff;
        --red: red;
        --background-color: #e0e0e0;
        --text-color: #000;
        --link-color: #517d88;
        --active-link-color: var(--link-color);
        --summary-marker-color: var(--border-color);
        --lightningcss-light: initial;
        --lightningcss-dark: ;
        --lightningcss-light: initial;
        --lightningcss-dark: ;
        color-scheme: light;
        --header-image: linear-gradient(121deg, #5da8bb 17%, transparent 17.05%), linear-gradient(-37deg, #7ea8b3 20%, transparent 20.05%), linear-gradient(23deg, #2c7d93 46%, transparent 46.05%), linear-gradient(-187deg, #1f6374 49%, transparent 49.05%), linear-gradient(0deg, #4f8f9f 100%, transparent 100.05%);
    }

    body.pink-l {
        --link-color: #5544cc;
        --link-color: color: #54c;
        --brand-color: #f9a7c6;
        --brand-color-darker: #e398b4;
        --border-color: #f9a7c6;
        --border-color-darker: #e398b4;
        --text-color: #000;
        --background-color: #fff;
        --lable: black;
        color: #000;
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
        --header-image: linear-gradient(121deg, #d58ca7 17%, transparent 17.05%), linear-gradient(-37deg, #ebc7d6 20%, transparent 20.05%), linear-gradient(23deg, #e1aecb 46%, transparent 46.05%), linear-gradient(-187deg, #963687 49%, transparent 49.05%), linear-gradient(0deg, #c1538c 100%, transparent 100.05%);
    }

    body.pink-d {
        --link-color: #E4BFFF;
        --brand-color: #9b3d88;
        --text-color: #ffffff;
        --border-color: #9b3d88;
        --brand-color-darker: #823372;
        --border-color-darker: #823372;
        --background-color: #222222;
        --lable: black;
        color: #ffffff;
        --theme-color-05: var(--brand-color);
        --theme-color-25: var(--border-color);
        --header-image: linear-gradient(121deg, #792564 17%, transparent 17.05%), linear-gradient(-37deg, #591e5b 20%, transparent 20.05%), linear-gradient(23deg, #713c70 46%, transparent 46.05%), linear-gradient(-187deg, #8c5088 49%, transparent 49.05%), linear-gradient(0deg, #75216c 100%, transparent 100.05%);
    }

    body.brooklyn {
        --brand-color: #1d1d7b;
        --brand-color-darker: #333;
        --brand-color-darker-darker: #1d1d7b;
        --border-color: var(--brand-color-darker);
        --border-color-darker: var(--brand-color-darker-darker);
        --background-color: #222;
        --text-color: #fff;
        --link-color: #afdde9;
        --active-link-color: #afdde9;
        --summary-marker-color: #eee;
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        --lightningcss-light: ;
        --lightningcss-dark: initial;
        color-scheme: dark;
        --header-image: linear-gradient(121deg, #120760 17%, transparent 17.05%), linear-gradient(-37deg, #281c7b 20%, transparent 20.05%), linear-gradient(23deg, #2d0f99 46%, transparent 46.05%), linear-gradient(-187deg, #16087b 49%, transparent 49.05%), linear-gradient(0deg, #18165e 100%, transparent 100.05%);
    }

    @media (max-width: 480px) {
        :root {
            --lable: black;
        }
    }

    a {
        transition: color 0.3s;
        /* Optional: for a smoother transition */
    }

    a.light-mode {
        color: #5544cc;

        /* Link color for light mode */
    }

    a.bus-mode {
        color: #5544cc;
        /* Link color for light mode */
    }

    a.dark-mode {
        color: #E4BFFF;
        /* Link color for dark mode */
    }

    a.timesbus-dark {
        color: #afdde9;
        /* Link color for dark mode */
    }

    a.timesbus-light {
        color: #517d88;
        /* Link color for dark mode */
    }

    .table-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        /* Full viewport height */
    }

    .table {
        max-width: 100px;
        margin: auto;
        width: 80%;
        /* Adjust as needed */
        text-align: center;
    }

    .th,
    .tb {
        padding: 10px;
    }

    img {
        display: block;
        margin: 0 auto;
    }


    .button {
        -webkit-appearance: none;
        appearance: none;
        background: var(--brand-color);
        border: 0;
        border-bottom-width: 0px;
        border-bottom-style: none;
        border-bottom-color: currentcolor;
        border-bottom: .0625em solid var(--brand-color-darker);
        color: inherit;
        font: inherit;
        border-radius: .5em;
        margin-bottom: .0625em;
        padding: .25em .5em;
        display: inline-block;
        position: relative;
        top: .0625em;
    }

    .toggle-status {
        display: none;
    }

    .table.visible {
        display: table;
        /* Corrected from 'bloack' to 'block' */
    }

    .table {
        display: table;
    }

    .pb-ad {
        border: solid;
        border-top-width: medium;
        border-top-color: currentcolor;
        border-right-width: medium;
        border-right-color: currentcolor;
        border-bottom-width: medium;
        border-bottom-color: currentcolor;
        border-left-width: medium;
        border-left-color: currentcolor;
        border-width: 1px;
        border-color: var(--border-color);
        width: 40%;
        margin-left: 30%;
        margin-bottom: 10px;
        /* height: 80%; */
    }

    @media (max-width: 1000px) {
        .pb-ad {
            width: 80vw;
            margin-left: 10vw;
            margin-bottom: 10px;
        }
    }

    @media (max-width: 480px) {
        .table {
            display: none;
        }

        .toggle-status {
            display: block;
        }

        .table.visible {
            display: table;
            /* Corrected from 'bloack' to 'block' */
        }
    }

    .adimg {
        display: block;
        margin: 0 auto;
        width: 100%;
        /* height: 100%; */
    }

    .popup {
        background: var(--background-color);
        padding: 0px 10px;
        border-radius: 50px;
        color: black;
        margin: 0px 25%;
        font-weight: bolder;
    }

    .popup a {
        color: #0087ff;
        text-decoration: underline;
    }

    @media (min-width: 600px) {
        .popup {
            width: 300px;
            margin: 0px calc(50% - 150px);
        }
    }

    @media (max-width: 480px) {
        .popup {
            font-size: 3vw;
        }
    }

    .invalid {
        display: none;
        position: fixed;
        top: 200px;
        width: 50%;
        left: 25%;
        text-align: center;
        color: red;
        z-index: 100;
        font-size: 150%;
        background: var(--brand-color);
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
    }

    .admin-note {
        background-color: #fff3cd;
        color: #856404;
        padding: 2.5px 10px;
        border-radius: 5px;
        margin-top: 20px;
        -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);
    }
</style>

<head>
    <link type=image/x-icon rel="shortcut icon" href=Favicon.png>
</head>
<footer>
    <div class="pb-ad">
        <a id="link" href="https://apply.mybustimes.cc">
            <img id="ad-image" class="adimg" src="/BusTimes/SVG/Ads/ad3.png"
                alt="Default Ad">
        </a>
    </div>
    <style>
        .selected-livery {
            background-color: var(--brand-color-darker);
            color: white;
            font-weight: bold;
        }

        .search-bar {
            width: 100%;
            padding: 8px;
            margin-bottom: 0;
            position: sticky;
            top: 0;
            z-index: 10;
            background: white;
            border-bottom: 1px solid var(--border-color);
        }

        .livery-container {
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            display: flow-root;
        }

        .livery-container span{
            padding-right: 2.25em;
        }

        .livery-container:hover {
            background-color: var(--brand-color);
        }

        .livery-cell-selector {
            width: 2.25em;
            height: 1.5em;
            display: block;
            float: right;
        }
    </style>
    <script>
        // JavaScript to rotate ads
        const ads = [{"url":"\/BusTimes\/SVG\/Ads\/MBT-Banner.png","link":"https:\/\/turbonode.co\/a\/MyBusTimes"},{"url":"\/BusTimes\/SVG\/Ads\/ad1.png","link":"https:\/\/nova-spectra-games.itch.io\/polly-bus"},{"url":"\/BusTimes\/SVG\/Ads\/ad2.png","link":"#"},{"url":"\/BusTimes\/SVG\/Ads\/ad3.png","link":"https:\/\/apply.mybustimes.cc"}];
        let currentIndex = 3;

        function rotateAd() {
            if (ads.length === 0) {
                document.getElementById('ad-image').alt = "No ads available";
                return;
            }
            const adImage = document.getElementById('ad-image');
            const link = document.getElementById('link');
            const currentAd = ads[currentIndex];

            adImage.src = currentAd.url;
            adImage.alt = `Ad ${currentIndex + 1}`;
            link.href = currentAd.link;

            // Move to the next ad or loop back to the first
            currentIndex = (currentIndex + 1) % ads.length;
        }

        // Start rotation every 15 seconds
        rotateAd();
        setInterval(rotateAd, 15000);
    </script>
    <ul class="user">
        <li style='color: var(--text-color)'><a style='color: var(--text-color)' href='/BusTimes/login.php'><button class='button'>Login</button></a></li>        <li><a href="rules.php">Rules &amp; FAQ</a></li>
        <li><a href="privacy.php">Privacy Policy</a></li>
        <li><a href="data.php">Data Source</a></li>
    </ul>
    <ul class="user">
        <li><a href="https://flic.kr/gd/3gEzPV">Flickr Group</a></li>
        <li><a href="https://www.facebook.com/groups/554173873608065/">Facebook</a></li>
        <li><a href="https://discord.gg/c4sN53ACRv">Discord</a></li>
    </ul>

    <style>
        .btn-container {
            display: inline-block !important;
            white-space: nowrap;
            min-width: 250px;
            text-align: center;
        }

        .btn-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
    </style>

    <div class="btn-wrapper">
        <div class="btn-container">
            <a href="https://www.buymeacoffee.com/mybustimes">
                <img src="https://img.buymeacoffee.com/button-api/?text=Help Support MBT
                    &emoji=&slug=mybustimes
                    &button_colour=FF5733                    &font_colour=FFFFFF                    &font_family=Lato
                    &outline_colour=FFFFFF                    &coffee_colour=FFDD00" 
                />
            </a>
        </div>
    </div>
    <br>

    <form method="post">
        <label for="theme">Select Theme:</label>
        <select name="theme" id="theme" onchange="this.form.submit()">
            <option value=0 selected>Light Mode</option>
            <option value=1 >Dark Mode</option>
            <option value=2 >BusTimes</option>
            <option value=4 >Cyan Light</option>
            <option value=3 >Cyan Dark</option>
            <option value=5 >PinkTimes Light</option>
            <option value=6 >PinkTimes Dark</option>
            <option value=7 >Brooklyn Style</option>
        </select>
        <input type="hidden" id="theme-selector" value="">
    </form>
    <div id="user-info">
        Online: 1 | Total: 1665<br><a href='/BusTimes/stats.php'>More Stats</a>    </div>
    <script>
        function sanitizeInput(inputElement) {
            // Get error message element or create one if it doesn't exist
            let errorMessageId = inputElement.getAttribute('data-error-message');
            let errorMessage = document.getElementById(errorMessageId);

            if (!errorMessage) {
                // Dynamically create the error message element
                errorMessage = document.createElement('small');
                errorMessage.id = errorMessageId;
                errorMessage.className = 'invalid';
                errorMessage.style.color = 'red';
                errorMessage.style.display = 'none';
                errorMessage.textContent = 'Invalid characters';
                inputElement.insertAdjacentElement('afterend', errorMessage);
            }

            // Regex pattern to sanitize input
            let sanitizedInput = inputElement.value.replace(/[_£./~¬&<>"'`!@#$%^*()+=,{}[\]\\|;:?]/g, '');

            if (sanitizedInput !== inputElement.value) {
                // Show the error message if there are invalid characters
                errorMessage.style.display = 'inline';
                inputElement.value = sanitizedInput;

                // Hide the error message after 5 seconds
                setTimeout(() => {
                    errorMessage.style.display = 'none';
                }, 5000);
            } else {
                // Hide the error message if input is clean
                errorMessage.style.display = 'none';
            }
        }
    </script>
    <a href="https://status.mybustimes.cc">View Site Status</a>
</footer>
<script>
    document.getElementById("toggleButton").addEventListener("click", function (event) {
        event.preventDefault(); // Prevent the default anchor behavior
        const table = document.querySelector(".table");

        if (table.classList.contains("visible")) {
            table.classList.remove("visible");
            this.textContent = "Show Status"; // Change the link text back
        } else {
            table.classList.add("visible");
            this.textContent = "Hide Status"; // Change the link text
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Fetch the theme value stored in the hidden input
        const themeValue = parseInt(document.getElementById('theme-selector').value, 10);
        const links = document.querySelectorAll('a');

        // Remove all possible theme classes before applying the correct one
        document.body.classList.remove('dark-mode', 'bus-mode', 'light-mode', 'timesbus-dark', 'timesbus-light', 'pink-l', 'pink-d', 'brooklyn');
        links.forEach(link => link.classList.remove('dark-mode', 'bus-mode', 'light-mode', 'timesbus-dark', 'timesbus-light', 'pink-l', 'pink-d', 'brooklyn'));

        // Apply the selected theme
        if (themeValue === 1) {
            document.body.classList.add('dark-mode');
            links.forEach(link => link.classList.add('dark-mode'));
        } else if (themeValue === 2) {
            document.body.classList.add('bus-mode');
            links.forEach(link => link.classList.add('bus-mode'));
        } else if (themeValue === 3) {
            document.body.classList.add('timesbus-dark');
            links.forEach(link => link.classList.add('timesbus-dark'));
        } else if (themeValue === 4) {
            document.body.classList.add('timesbus-light');
            links.forEach(link => link.classList.add('timesbus-light'));
        } else if (themeValue === 5) {
            document.body.classList.add('pink-l');
            links.forEach(link => link.classList.add('pink-l'));
        } else if (themeValue === 6) {
            document.body.classList.add('pink-d');
            links.forEach(link => link.classList.add('pink-d'));
        } else if (themeValue === 7) {
            document.body.classList.add('brooklyn');
            links.forEach(link => link.classList.add('brooklyn'));
        } else {
            document.body.classList.add('light-mode');
            links.forEach(link => link.classList.add('light-mode'));

        }
    });
</script>

<link rel="stylesheet" href="/BusTimes/CSS/index.css">
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
    data-id="mybustimes" data-description="Support me on Buy me a coffee!" data-message=""
    data-color="#" data-position="Right" data-x_margin="18"
    data-y_margin="18"></script>
<p style="position: absolute;left: 0; background: var(--brand-color);padding: 5px;border-radius: 0px 10px 0px 0px;">
MyBusTimes: V4.14.1</p>
<!--Magior . Minor . Patch-->