<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Plural Ponies</title>
    <link rel="shortcut icon" href="favicon.svg" type="image/svg">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="manifest" href="manifest.json">
    <link rel="apple-touch-icon" href="logo/152.png">
    <meta name="theme-color" content="#111111"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="Plural Ponies">
    <meta name="msapplication-TileImage" content="logo/144.png">
    <meta name="msapplication-TileColor" content="#111111">
    <meta name="theme-color" content="#111111"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="mobile-web-app-capable" content="yes">
    <script src="apps.js"></script>
    <script src="functions.js"></script>
    <script src="tooltip.js"></script>
    <script src="load.js"></script>
    <script src="banner.js"></script>
    <script src="localforage.js"></script>
    <style>
        body {
            background-color: black !important;
            color: white;
        }

        #home-apps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-column-gap: 10px;
        }

        .home-item {
            background-color: #222;
            display: block;
            color: white !important;
            text-decoration: none;
            cursor: pointer;
            border-radius: 10px;
            padding: 5px 10px;
            text-align: center;
            outline: rgba(79, 79, 79, 0.25) solid 0;
            transition: outline 200ms, background-color 200ms;
        }

        .home-item:hover {
            background-color: #252525;
            outline-width: 5px;
        }

        .home-item:active {
            background-color: #333;
            outline-width: 7px;
        }

        .home-item-icon {
            filter: invert(1);
            vertical-align: middle;
            width: 32px;
            height: 32px;
        }

        .home-item-name {
            vertical-align: middle;
        }

        #app-header {
            background: #111;
            border-bottom: 1px solid #252525;
            padding: 10px 20px;
        }

        #app-header.no-border {
            border-bottom: none !important;
        }

        #app-close {
            float: right;
            opacity: .5;
            color: white !important;
            text-decoration: none;
            cursor: pointer;
            padding: 5px 10px;
            position: relative;
            right: -5px;
            transition: opacity 200ms;
        }

        #app-close:hover {
            opacity: .75;
        }

        #app-close:active {
            opacity: 1;
        }

        #app-name {
            vertical-align: middle;
        }

        #app-icon {
            vertical-align: middle;
            filter: invert(1);
            width: 32px;
        }

        #app-iframe {
            height: 100%;
            width: 100%;
        }

        #app-contents {
            height: calc(100% - 53px);
        }

        .disabled {
            pointer-events: none;
            opacity: .75;
        }

        @media (max-width: 767px) {
            .home-item-name {
                display: none;
            }
        }

        #progress-inner {
            width: 50%;
            height: 8px;
            background: #444;
            border-radius: 999px;
            transition: width 2000ms;
        }

        #progress {
            width: 300px;
            max-width: 90vw;
            height: 8px;
            border-radius: 999px;
            background: #222;
        }

        .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);
        }

        #app-view {
            transition: transform 300ms, opacity 300ms;
        }

        #app-view.closed {
            transform: scale(0.5) rotate3d(1, 0, 0, 90deg);
            opacity: 0;
            pointer-events: none;
        }

        #app-view.open {
            transform: scale(1) rotate3d(1, 0, 0, 0deg);
            opacity: 1;
            pointer-events: initial;
        }

        .member-link {
            color: white !important;
            text-decoration: none !important;
        }

        .member-link:hover, .badge a:hover {
            opacity: .75;
        }

        .member-link:active, .badge a:active {
            opacity: .5;
        }

        .list-separator-mobile {
            display: none;
        }

        @media (max-width: 991px) {
            .list-separator-desktop {
                display: none;
            }

            span.list-separator-mobile {
                display: inline;
            }
        }

        .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-action:hover {
            background-color: #252525;
            color: #ddd;
        }

        .list-group-item-action:active, .list-group-item-action:focus {
            background-color: #272727;
            color: #bbb;
        }

        #member-banner a {
            color: white;
        }

        @media (max-width: 991px) {
            #member-card {
                grid-template-columns: repeat(3, 1fr) !important;
            }

            .species-name {
                display: none;
            }
        }

        @media (max-width: 767px) {
            #member-card {
                grid-template-columns: 1fr !important;
                text-align: left;
            }

            #member-icon-mobile {
                display: inline-block !important;
            }

            #system-info {
                grid-template-columns: 1fr !important;
            }

            #member-icon, #member-icon-outer {
                display: none !important;
            }

            #member-relations {
                grid-template-columns: 1fr !important;
                text-align: left;
            }
        }

        .tooltip.show {
            opacity: 1;
        }

        .tooltip-inner {
            background: #151515;
            box-shadow: 3px 4px 10px #ffffff26;
        }

        html, body, #app {
            height: 100%;
        }
    </style>
</head>
<body style="background:black;">
    <div id="loader" style="position:fixed;z-index:999;background:#111;inset:0;display:flex;align-items:center;justify-content: center;">
        <div>
            <div id="progress">
                <div id="progress-inner" style="width:0;"></div>
            </div>
            <p id="loader-message" style="text-align: center;margin-top:5px;">Loading...</p>
        </div>
    </div>

    <div id="app" style="display:grid;grid-template-rows: 1fr max-content;">
        <div class="header" style="height:100%;background-color:#111;border-bottom:1px solid #252525;display:flex;align-items: center;justify-content: center;">
            <div style="width:100%;">
                <div class="container">
                    <br><br>
                    <h2 style="text-align: center;" id="home-front"><img id="home-avatar" alt="" src="" style="width: 48px;height: 48px;border-radius: 999px;vertical-align: middle;"> &nbsp;<span style="vertical-align: middle;"><span id="home-greeting">Greetings</span> <span id="home-name">Name</span>!</span></h2>

                    <br>
                    <div id="home-apps">
                        <a class="home-item" id="home-app-fronters" onclick="openApps.fronters();">
                            <img alt="" class="home-item-icon" src="icons/fronters.svg">
                            <span class="home-item-name">Fronters</span>
                        </a>
                        <a class="home-item" id="home-app-bits" onclick="openApps.bits();">
                            <img alt="" class="home-item-icon" src="icons/bits.svg">
                            <span class="home-item-name">Bits</span>
                        </a>
                        <a class="home-item" id="home-app-planner" onclick="openApps.planner();">
                            <img alt="" class="home-item-icon" src="icons/planner.svg">
                            <span class="home-item-name">Planner</span>
                        </a>
                        <a class="home-item" id="home-app-emergency" onclick="openApps.emergency();">
                            <img alt="" class="home-item-icon" src="icons/emergency.svg">
                            <span class="home-item-name">Emergency</span>
                        </a>
                    </div>
                </div>
                <p id="home-other" style="text-align: center;margin-top:15px;"><b style="vertical-align: middle;">In the <span id="home-other-system">other system</span>:</b> <img id="home-other-img" alt="" src="" style="vertical-align:middle;width:24px;height:24px;border-radius:999px;background:#333;"> <span id="home-other-name" style="vertical-align: middle;">Some member</span></p>
            </div>
        </div>
        <div>
            <p style="margin-top:15px;text-align: center;" class="text-muted">© <span id="copyright-year"></span> Equestria.dev Developers · Data updated <span id="update-date"></span></p>
        </div>
    </div>

    <div id="app-view" style="position: fixed;z-index:999;inset:0;background:black;" class="closed">
        <div id="app-header">
            <img id="app-icon" src="icons/bits.svg" alt="">
            <span id="app-name">App Name</span>
            <a onclick="closeApp()" id="app-close">X</a>
        </div>
        <div id="app-contents">
            <iframe id="app-iframe" src="about:blank"></iframe>
        </div>
    </div>

    <script>
        load();
    </script>

    <script>
        async function setupBackgroundSync(registration) {
            const status = await navigator.permissions.query({
                name: 'periodic-background-sync',
            });
            if (status.state === 'granted') {
                if (registration.periodicSync) {
                    registration.periodicSync.register('data-sync', {
                        minInterval: 60000
                    })
                        .catch(function(err) {
                            return err;
                        })
                    registration.periodicSync.register('data-sync-limited', {
                        minInterval: 300000
                    })
                        .catch(function(err) {
                            return err;
                        })
                } else {
                    console.log("Periodic sync not possible on this platform");
                }
            } else {
                console.log("Periodic sync possible on this platform, but denied");
            }
        }

        if ('serviceWorker' in navigator && location.search !== "?nocache") {
            console.log("Creating service worker...");
            navigator.serviceWorker.register('/app/sw.js').then(function() {
                return navigator.serviceWorker.ready
            }).then(async function(registration) {
                window.serviceWorkerRegistration = registration;
                await setupBackgroundSync(registration);
            });
        }
    </script>
</body>
</html>