summaryrefslogtreecommitdiff
path: root/app/index.html
diff options
context:
space:
mode:
authorMinteck <contact@minteck.org>2022-08-21 17:31:56 +0200
committerMinteck <contact@minteck.org>2022-08-21 17:31:56 +0200
commita2df9a69dcc14cb70118cda2ded499055e7ee358 (patch)
tree6dd283e4e9452d38bce81ddaaae49b5335755842 /app/index.html
parent84dd0735820b16b60f600284d35183d76547a71f (diff)
downloadpluralconnect-a2df9a69dcc14cb70118cda2ded499055e7ee358.tar.gz
pluralconnect-a2df9a69dcc14cb70118cda2ded499055e7ee358.tar.bz2
pluralconnect-a2df9a69dcc14cb70118cda2ded499055e7ee358.zip
m. update
Diffstat (limited to 'app/index.html')
-rw-r--r--app/index.html330
1 files changed, 330 insertions, 0 deletions
diff --git a/app/index.html b/app/index.html
new file mode 100644
index 0000000..03006d6
--- /dev/null
+++ b/app/index.html
@@ -0,0 +1,330 @@
+<!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;
+ }
+ }
+
+ #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;
+ }
+ }
+
+ .tooltip.show {
+ opacity: 1;
+ }
+
+ .tooltip-inner {
+ background: #151515;
+ box-shadow: 3px 4px 10px #ffffff26;
+ }
+ </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 id="progress">
+ <div id="progress-inner" style="width:0;"></div>
+ </div>
+ </div>
+
+ <div id="app">
+ <div class="header" style="background-color:#111;border-bottom:1px solid #252525;">
+ <div class="container">
+ <br><br>
+ <h2 style="text-align: center;"><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>
+ <br><br>
+ </div>
+
+ <div class="container">
+ <br>
+ <div id="member-banner"></div>
+ </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) {
+ 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> \ No newline at end of file
© Floofi Systems, Some rights reserved. Powered by cgit.