<!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;"> <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>