@mxtommy/kip 2.4.0 → 2.4.1

package/CHANGELOG.md

@@ -1,7 +1,15 @@
+ 
+# V 2.4.1
+## Fixes
+* Progressive Web Application feature for mobile devices
+* Random conflicting double tab action on mobile devices causing screen zoom instead of Night Mode activation
+* Removed widget data stream filtering of null values 
+* Help and data browser navigation actions skipping current widget active page
 # V 2.4.0
 ## New features
-* Added Numeric, Date and Text Widgets color support
-* Added Next Waypoint bearing indicator to Wind Widget
+* Gesture Support: Added horizontal Swipe to cycle pages and Double Tab to toggle night mode 
+* Numeric, Date and Text Widgets: Added configurable color support
+* Wind Widget: Added Next Waypoint bearing indicator
 * Added support for Widget data expiration (TTL). Previously Widget stayed still when a source stopped sending data or the server connection was lost. 
 ## Improvements
 * Strengthen Widget configuration management when adding new KIP properties 
@@ -28,10 +36,10 @@
 # V 2.2.0
 ## New features
 * Option to enable automatic day and night modes activation based on sun phases 
-* Path data throttling feature added to Widget Options's Paths offering greater flexibilty in UI experience
+* Path data throttling feature added to Widget Options Paths providing greater flexibilty and UI experience
 # V 2.1.3
 ## Improvements
-* Upgrade v6 configuration
+* automatic upgrade of older KIP v6 configuration
 # V 2.1.2
 ## Fixes
 * Package description typo and changelog updates
@@ -50,9 +58,9 @@
 * Bump @babel/traverse from 7.23.0 to 7.23.2 by @dependabot in https://github.com/mxtommy/Kip/pull/194
 # V 2.0.1
 ## Improvements
-* Update: KIP Icon
+* KIP icon update
 ## Fixes
-* Fix: Object reference error and polyfills by @godind in https://github.com/mxtommy/Kip/commit/73f47aec694ccfe6ea2f1b92ad23dcc53b41e09f
+* Object reference error and polyfills by @godind in https://github.com/mxtommy/Kip/commit/73f47aec694ccfe6ea2f1b92ad23dcc53b41e09f
 # V 2.0.0
 ## New features
 * Breaking Change - KIP configuration sharing using Signal K user key data storage feature

package/README.md

@@ -14,27 +14,44 @@ The idea is to replicate the functionality of MFDs such as the B&G Triton, Rayma
 
 # Features
 ## Access from Phones, Tablets, Raspberry Pi and Computers
-  Simply navigate to `http://<Signal K Server URL>:<Signal K Server port>/@mxtommy/kip` to load KIP and enjoy it's features remotely on any device.
+  Simply navigate to `http://<Signal K Server URL>:<port>/@mxtommy/kip` to load KIP and enjoy it's features remotely on any device.
 
 ### Responsive Design
-  KIP adjust to the device type and form factor for the best possible user experience.
+  KIP adjusts to the device type and form factor for the best possible user experience.
 
 ### Touch Devices
 - Swipe left and right to cycle trough your Widget layouts.
 - Double tap to toggle night mode.
 
+### Run KIP As a Web Application
+Run KIP in full screen, with no browser controls visible, just like regular mobile apps. This feature is supported on most mobile OS. Each browser has it's own way of handling PWA deployments.
+
+To install KIP as an App, first load KIP in the browser. Then follow the steps below:
+
+**iOS**
+1. Press the "Share" button
+2. Select "Add to Home Screen" from the action popup list
+3. Tap "Add" in the top right corner to finish installing
+KIP is now installed and available on your home screen
+
+**Android**
+1. Press the "three dot" icon in the upper right to open the menu
+2. Select "Add to Home screen"
+3. Press the "Add" button in the popup
+KIP is now installed and available on your home screen
+
 ## Multiple User Profiles
-  If you have different roles on board; captain, skipper, tactician, navigator, engineers or simply different people with different needs, each can tailor as they wish. The use of profiles can also offers the ability to tie specific configuration arrangements to use case or form factors.
+  If you have different roles on board; captain, skipper, tactician, navigator, engineers or simply different people with different needs, each can tailor as they wish. The use of profiles can also offer the ability to tie specific configuration arrangements to use case or device form factors.
 
 ## User Experience
 
 ### Night Mode
-  Keep your night vision with a simple tap, regardless of the selected theme. The below image looks very dark, but at night...it's perfect!
+  Keep your night vision with a simple double tap. The below image looks very dark, but at night...it's perfect!
 
   ![Night mode](./KipNightMode-1024x488.png)
 
 ### Built-in Themes
-  Use your favorite style from the built-in themes gallery.
+  Apply your favorite style from the built-in themes gallery.
 
   Modern Dark Theme
   ![Modern Dark Theme](./KipSample-1-1024x488.png)
@@ -48,24 +65,24 @@ The idea is to replicate the functionality of MFDs such as the B&G Triton, Rayma
   NOTE: Request a new theme by sending us inspirational/reference material (web sites, picture, etc.).
   If we fall in love, we will do it. Even better, branch and contribute yourself. We will assist and guide!
 
-## Gauge Layout and Configuration
+## Page Layouts and Configuration
 ### Flexible and Easy
-  Meant to build purposeful screen(s) with however many gauges or widgets you want, where you want them. 
+  Meant to build purposeful screen(s) with however many widgets you want, where you want them. 
 
-  Quickly divide the screen area into zones, resize and position, add the gauge of your choosing. Need more? Add as many additional pages as you whish to keep screens purposeful. Simply tap the navigation button keys to quickly rotate from page to page.
+  Quickly split pages into multiple areas, resize and aligne to your liking, add the widget of your choosing to each area. Need more? Add as many additional pages as you whish to keep your display purposeful. Simply swipe left and right or use the bottom page navigation button to quickly cycle from page to page.
   ![Layouts Configuration Image](./KipWidgetConfig-layout-1024x488.png)
   
-  Easy basic gauge and widget configuration.
+  Easy basic widget configuration.
   ![Gauges Configuration Image](./KipConfig-display-1024x488.png) 
   
-  See what Signal K has to offer that you can leverage in a gauge. Select it and tweak the display options for your purpose.
+  See what Signal K has to offer that you can leverage with widgets. Select it and tweak the display options your your purpose.
   ![Paths Configuration Image](./KipWidgetConfig-paths-1024x488.png)
   
-  Many units are supported. Choose your preferred App defaults, than tweak it gauge-by-gauge as necessary. KIP will convert the displayed units for you.
+  Many units are supported. Choose your preferred App defaults, than tweak it widget-by-widget as necessary. KIP will automatically convert the units for you.
   ![Units Configuration Image](./KipConfig-Units-1024x488.png) 
 
-### Reusable Gauge and Widget Library
-  All KIP Gauges and Widgets are visual presentation controls that are very versatile with multiple advanced configuration options available to suit your needs:
+### Reusable Widget Library
+  All KIP Widgets are visual presentation controls that are very versatile with multiple advanced configuration options available to suit your needs:
   - Text display: Create gauges to display any textual data sent by your system - MPPT state, vessel details,Next Waypoint, Fusion radio song information, noon and sun phases, any system components configuration detail or statues available, etc.
   - Numeric display: Create gauges to display any numerical data sent by your system - SOG, Depth, Winds Speed, VMG, refrigerator temperature, weather data, etc.
   - Wind gauge: Your typical sailboat wind gauge
@@ -82,10 +99,10 @@ The idea is to replicate the functionality of MFDs such as the B&G Triton, Rayma
 
   Get the latest version of KIP to see what's new!
 
-  Gauge types sample
+  Widget Types Sample
   ![Sample Gauges Image](./KipGaugeSample1-1024x545.png)
   
-  Electrical and Tank monitoring sample 
+  Electrical and Tank Monitoring Sample 
   ![Electrical Concept Image](./KipGaugeSample2-1024x488.png)
 
   Grafana Embedded Webpage sample 
@@ -93,59 +110,56 @@ The idea is to replicate the functionality of MFDs such as the B&G Triton, Rayma
 
   ### Harness The Power Of Data State Notifications
   Stay informed with notifications about the state of the data you are interested in.
-  As an example, KIP can notify (inform, warn, alert) you when the water depth or a temperature sensor reaches certain levels. In addition to KIP's centralized basic visual and audio notification support, each type of Widget offers a tailored visual representation appropriate
-  to their design objectives for an optimal user experience.
+  As an example, KIP will notify you (inform, warn, alert) when a water depth or temperature sensors reaches certain levels. In addition to KIP's centralized basic visual and audio notification feature, each Widget offers a tailored visual representation appropriate
+  to their design objectives providing an optimal user experience.
 
-# Developing
+# How To Contribute to KIP
 
-KIP is built on Angular using various open-source assets. All free!
+KIP is under MIT license and is built with Nodes and Angular using various open-source assets. All free!
 
 **Tools**
 
 Linux, Macs, Pi or Windows dev platform supported
-1. Install the latest Node version (v16+)
+1. Install the latest Node version (v16+, v18 recommended)
 2. Download your favorite coding IDE (we use the free Visual Code)
 3. Create your own GitHub KIP fork.
-4. Configure your IDE's source control to point to this fork (With Visual Code, GitHub support is built-in) and get the latest Master branch locally.
+4. Configure your IDE's source control to point to your forked KIP instance (With Visual Code, GitHub support is built-in) and get the latest Master branch locally.
 
 **Setup**
 1. From your fork's Master branch, create working branch with a name such as: New-Widget-abc or fix-issue-abc, etc.
 2. Checkout this new Branch to get the source code locally.
 3. In a command shell (or in the Visual Code Terminal window), go to the root of you local project folder.
-4. Install project dependencies using NPM package and dependency manager: run `npm install`. NPM will read local Kip project dependencies (see Steps 2), download and install everything automatically for you.
-5. Build the app locally using Angular-CLI: from that same project root folder, run `ng build`. CLI tool will read local Kip project configuration and set the base href(see Tools - steps 4) and build everything.
+4. Install project dependencies using NPM package and dependency manager: run `npm install`. NPM will read Kip project dependencies (see Steps 2), download and install everything automatically for you.
+5. Build the app locally using Angular-CLI: from that same project root folder, run `ng build`. CLI tool will  build KIP.
 
 **Work**
-1. Fire up your local dev instance with CLI using `ng serve --configuration=dev --serve-path=/` to enable the debugger map file loading.
-2. Hit Run/Start Debugging in Visual Code or point your favorite browser to `http://localhost:4200/`
-3. Voila! You can build, test and fix.
+1. Fire up your local dev instance with `npm run dev`.
+2. Hit Run/Start Debugging in Visual Code or point your favorite browser to `http://localhost:4200/@mxtommy/kip`
+3. Voila!
 
 *As you work on source code and save files, the app will automatically reload in the browser with your latest changes.*
+*You also need a running Signal K server for KIP to connect to and receive data.*
 
-**Publish**
-1. Once done with your work, from your fork's working branch, make a GitHub pull request to have your code reviewed, merged and part of the next release.
-
-Or
+**Apple PWA Icon Generation**
+Use the following tool and command line: npx pwa-asset-generator ./src/svg-templates/KIP-icon.svg ./src/assets/ -i ./src/index.html -m ./src/manifest.json -b "linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898" -p 5%
 
-2. Build your own production version:
-  1. Build: In a terminal from you project folder, use `ng build --configuration=production` to generate a production build.
-  2. Have fun! 
+**Share**
+Once done with your work, from your fork's working branch, make a GitHub pull request to have your code reviewed, merged and part of the next release.
 
 **Communication and Collaboration**
-Join us on Slack -> Signalk-dev / Apps_and_client channel. We will hook up and assist as best we can.
+Join us on Slack -> Signalk-dev / Kip channel. We will hook up and assist as best we can.
 
 # Feature Ideas
  * AIS Widget - Help Wanted
  * Light indicator Widget for Boolean paths
  * Fuel Consumption Widget
  * GPS information Widget - Help Wanted
- * Improved Metadata configuration
- * Improved Zones support
- * Add a KIP Widget CLI Schematic to automate new Widget creation and improve contribution
- * Improved error logging / performance gain
+ * Improve Metadate/Zones support
+ * Add a KIP Widget CLI Schematic to automate new Widget creation and facilitate app contributions
+ * Improved error logging
  * Retire outdated SteelGauges
- * Rebuild alerting to new Signal K Specifications
+ * Upgrade notifications and navigation API to new Signal K Specifications
  * Attitude Indicator Widget - Help Wanted
  * Sailing Polars Widget - Help Wanted
- * More Customization options for radial/linear Gauges
+ * More customization options for radial/linear Gauges
  * Pre-created Widgets for commonly used displays

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mxtommy/kip",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "An advanced and versatile marine instrumentation package to display Signal K data.",
   "license": "MIT",
   "author": {
@@ -30,14 +30,13 @@
     "nmea"
   ],
   "signalk": {
-    "appIcon": "./assets/icon-72x72.png",
+    "appIcon": "assets/icon-72x72.png",
     "displayName": "KIP Instrument MFD"
   },
   "scripts": {
-    "ng": "ng",
-    "start": "ng serve --configuration=dev --serve-path=/",
-    "build-dev": "ng build --configuration=dev --base-href=/@mxtommy/kip/",
-    "build-prod": "ng build --configuration=production --base-href=/@mxtommy/kip/",
+    "dev": "ng serve --configuration=dev --serve-path=/@mxtommy/kip/",
+    "build-dev": "ng build --configuration=dev",
+    "build-prod": "ng build --configuration=production",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -69,7 +68,8 @@
     "ts-node": "^8.10.2",
     "tslib": "^2.2.0",
     "tslint": "^6.1.3",
-    "typescript": "^4.6.4"
+    "typescript": "^4.6.4",
+    "pwa-asset-generator": "^6.3.1"
   },
   "dependencies": {
     "@angular/animations": "14.3.0",

package/public/assets/favicon.svg

@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="1000"
+   height="1000"
+   id="svg3"
+   sodipodi:docname="favicon.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:svgjs="http://svgjs.com/svgjs">
+  <defs
+     id="defs3" />
+  <g
+     transform="matrix(1.953125,0,0,1.953125,0,0)"
+     id="g2">
+    <svg
+       version="1.1"
+       width="512"
+       height="512"
+       id="svg2">
+      <svg
+         width="512"
+         height="512"
+         viewBox="0 0 135.46667 135.46667"
+         version="1.1"
+         id="svg1">
+        <sodipodi:namedview
+           id="namedview1"
+           pagecolor="#ffffff"
+           bordercolor="#000000"
+           borderopacity="0.25"
+           inkscape:showpageshadow="2"
+           inkscape:pageopacity="0.0"
+           inkscape:pagecheckerboard="true"
+           inkscape:deskcolor="#d1d1d1"
+           inkscape:document-units="px"
+           inkscape:lockguides="true"
+           inkscape:zoom="0.41030501"
+           inkscape:cx="481.34923"
+           inkscape:cy="498.40971"
+           inkscape:window-width="1224"
+           inkscape:window-height="732"
+           inkscape:window-x="217"
+           inkscape:window-y="25"
+           inkscape:window-maximized="0"
+           inkscape:current-layer="layer1">
+          <sodipodi:guide
+             position="0,135.46667"
+             orientation="0,512"
+             id="guide1"
+             inkscape:locked="true" />
+          <sodipodi:guide
+             position="135.46667,135.46667"
+             orientation="512,0"
+             id="guide2"
+             inkscape:locked="true" />
+          <sodipodi:guide
+             position="135.46667,0"
+             orientation="0,-512"
+             id="guide3"
+             inkscape:locked="true" />
+          <sodipodi:guide
+             position="0,0"
+             orientation="-512,0"
+             id="guide4"
+             inkscape:locked="true" />
+        </sodipodi:namedview>
+        <defs
+           id="defs1" />
+        <g
+           inkscape:label="Layer 1"
+           inkscape:groupmode="layer"
+           id="layer1">
+          <rect
+             style="fill:#4b4b4b;fill-opacity:1;stroke-width:2.117;stroke-linecap:square;stroke-dasharray:none"
+             id="rect4"
+             width="135.46667"
+             height="135.46667"
+             x="0"
+             y="0"
+             sodipodi:insensitive="true" />
+          <text
+             xml:space="preserve"
+             style="font-weight:bold;font-size:25.4px;font-family:Arial;-inkscape-font-specification:'Arial, Bold';fill:#c3c3c3;fill-opacity:0.415507;stroke-width:2.117;stroke-linecap:square;stroke-dasharray:none"
+             x="4.9013381"
+             y="24.292282"
+             id="text4"
+             svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"><tspan
+               sodipodi:role="line"
+               id="tspan4"
+               style="fill:#c3c3c3;fill-opacity:0.415507;stroke-width:2.117"
+               x="4.9013381"
+               y="24.292282"
+               svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">Speed</tspan></text>
+          <text
+             xml:space="preserve"
+             style="font-weight:bold;font-size:89.7086px;font-family:Arial;-inkscape-font-specification:'Arial, Bold';fill:#fffcfc;fill-opacity:1;stroke-width:7.4769;stroke-linecap:square;stroke-dasharray:none"
+             x="5.9710636"
+             y="103.15202"
+             id="text5"
+             svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"><tspan
+               sodipodi:role="line"
+               id="tspan5"
+               style="fill:#fffcfc;fill-opacity:1;stroke-width:7.4769"
+               x="5.9710636"
+               y="103.15202"
+               svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">9.8</tspan></text>
+          <text
+             xml:space="preserve"
+             style="font-weight:bold;font-size:21.2566px;font-family:Arial;-inkscape-font-specification:'Arial, Bold';fill:#fffcfc;fill-opacity:1;stroke-width:1.77166;stroke-linecap:square;stroke-dasharray:none"
+             x="74.298759"
+             y="128.38905"
+             id="text6"
+             svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}"><tspan
+               sodipodi:role="line"
+               id="tspan6"
+               style="stroke-width:1.77166"
+               x="74.298759"
+               y="128.38905"
+               svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">knots</tspan></text>
+        </g>
+      </svg>
+    </svg>
+  </g>
+</svg>

package/public/index.html

@@ -1,15 +1,49 @@
-<!DOCTYPE html><html lang="en"><head><base href="./">
-  <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
-  <title>KIP</title>
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <style>@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:root{--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}</style><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css"></noscript>
-  <script src="assets/tween-min.js"></script>
-  <script src="assets/steelseries-min.js"></script>
-  <script src="assets/NoSleep.min.js"></script>
-<style>html,body,app-root{height:100%}body{margin:0}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript><link rel="manifest" href="manifest.json" crossorigin="use-credentials"></head>
-
-<body>
-  <app-root></app-root>
-<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script>
-
+<!DOCTYPE html><html lang="en"><head><base href="/@mxtommy/kip/">
+    <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
+    <title>KIP</title>
+    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
+    <link rel="icon" type="image/x-icon" size="any" href="assets/favicon.ico">
+    <style>@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:root{--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}</style><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css"></noscript>
+    <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
+    <script src="assets/tween-min.js"></script>
+    <script src="assets/steelseries-min.js"></script>
+    <script src="assets/NoSleep.min.js"></script>
+    <link rel="apple-touch-icon" href="assets/apple-icon-180.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1290-2796.jpg" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2796-1290.jpg" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1179-2556.jpg" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2556-1179.jpg" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+    <link rel="apple-touch-startup-image" href="assets/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+  <style>html,body,app-root{height:100%}body{margin:0;touch-action:none}</style><link rel="stylesheet" href="styles.a5d5fc1506885765.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.a5d5fc1506885765.css"></noscript></head>
+  <body>
+    <app-root></app-root>
+  <script src="runtime.e75056c32c37f59d.js" type="module"></script><script src="polyfills.64db6be9cdc8f808.js" type="module"></script><script src="main.abf26f717737e775.js" type="module"></script>
 </body></html>