add offline functionality by making this a PWA

- added favicons - added manifest - split javascript into main.js and elevators.js
refactor color usage
2024-06-08 23:12:00 +02:00 · 2024-06-07 16:39:15 +02:00
21 changed files with 665 additions and 410 deletions
--- a/colors.css
+++ b/colors.css
@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=colors.css.map */
--- a/colors.css.map
+++ b/colors.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"colors.css"}
--- a/colors.scss
+++ b/colors.scss
@ -0,0 +1,271 @@
+@mixin tailwindColors {
+  /* Colors from Tailwind CSS: https://github.com/tailwindlabs/tailwindcss
+
+        MIT License
+
+        Copyright (c) Tailwind Labs, Inc.
+
+        Permission is hereby granted, free of charge, to any person obtaining a copy
+        of this software and associated documentation files (the "Software"), to deal
+        in the Software without restriction, including without limitation the rights
+        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the Software is
+        furnished to do so, subject to the following conditions:
+
+        The above copyright notice and this permission notice shall be included in all
+        copies or substantial portions of the Software.
+
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+  */
+  --color-black: #000;
+  --color-white: #fff;
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+  --color-stone-50: #fafaf9;
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a8a29e;
+  --color-stone-500: #78716c;
+  --color-stone-600: #57534e;
+  --color-stone-700: #44403c;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #451a03;
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-yellow-950: #422006;
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d1fae5;
+  --color-emerald-200: #a7f3d0;
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  --color-emerald-800: #065f46;
+  --color-emerald-900: #064e3b;
+  --color-emerald-950: #022c22;
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+  --color-teal-950: #042f2e;
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #e0f2fe;
+  --color-sky-200: #bae6fd;
+  --color-sky-300: #7dd3fc;
+  --color-sky-400: #38bdf8;
+  --color-sky-500: #0ea5e9;
+  --color-sky-600: #0284c7;
+  --color-sky-700: #0369a1;
+  --color-sky-800: #075985;
+  --color-sky-900: #0c4a6e;
+  --color-sky-950: #082f49;
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-violet-950: #2e1065;
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f5d0fe;
+  --color-fuchsia-300: #f0abfc;
+  --color-fuchsia-400: #e879f9;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #c026d3;
+  --color-fuchsia-700: #a21caf;
+  --color-fuchsia-800: #86198f;
+  --color-fuchsia-900: #701a75;
+  --color-fuchsia-950: #4a044e;
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fbcfe8;
+  --color-pink-300: #f9a8d4;
+  --color-pink-400: #f472b6;
+  --color-pink-500: #ec4899;
+  --color-pink-600: #db2777;
+  --color-pink-700: #be185d;
+  --color-pink-800: #9d174d;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #fecdd3;
+  --color-rose-300: #fda4af;
+  --color-rose-400: #fb7185;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-rose-700: #be123c;
+  --color-rose-800: #9f1239;
+  --color-rose-900: #881337;
+  --color-rose-950: #4c0519;
+  /* End: Colors from Tailwind CSS */
+}
--- a/elevators.js
+++ b/elevators.js
@ -6,11 +6,6 @@ let geolocationPermission = false;
 let geolocation = null;
 const openStations = new Set();
 let sortByDistance = false;
-const version = '0.5.1'
-const minorVersion = version.split('.').splice(0, 2).join('.');
-const numberFormat = new Intl.NumberFormat('de-DE', {
-    maximumFractionDigits: 1
-});

 const substituteData = [
    {
@ -87,14 +82,6 @@ const substituteData = [
    },
 ]

-
-Object.defineProperty(String.prototype, 'capitalize', {
-    value: function () {
-        return this.charAt(0).toUpperCase() + this.toLowerCase().slice(1);
-    },
-    enumerable: false
-});
-
 async function loadElevators() {
    document.querySelector('#errorMessage').classList.add('hidden');
    const res = await fetch('https://www.hvv.de/elevators', {
@ -203,12 +190,6 @@ async function loadElevators() {
    }));
 }

-const dateTimeStyle = new Intl.DateTimeFormat('de-DE', {
-    dateStyle: 'medium',
-    timeStyle: 'medium',
-    timeZone: 'Europe/Berlin',
-})
-
 async function loadOsmData() {
    const nodeIdList = [];
    for (const station of internalData.stations) {
@ -726,21 +707,6 @@ document.querySelectorAll('button.typeChip').forEach(e => {
    })
 })

-function openDialog(selector) {
-    document.querySelector('body').classList.add('has-dialog')
-    document.querySelector('#dialog_layer').classList.add('active')
-    document.querySelector(selector).classList.remove('hidden')
-}
-
-function closeDialog(selector) {
-    document.querySelector('body').classList.remove('has-dialog')
-    document.querySelector('#dialog_layer').classList.remove('active')
-    document.querySelector(selector).classList.add('hidden')
-}
-
-// set version
-document.querySelector('#version').innerHTML = `v${version}`;
-
 // data api version check
 const check_internal = JSON.parse(localStorage.getItem("internal_data"));
 const check_osm = JSON.parse(localStorage.getItem("osm_data"));
--- a/icons/192.png
+++ b/icons/192.png
--- a/icons/512-maskable.png
+++ b/icons/512-maskable.png
--- a/icons/512-transparent.png
+++ b/icons/512-transparent.png
--- a/icons/512.png
+++ b/icons/512.png
--- a/icons/favicon-maskable.svg
+++ b/icons/favicon-maskable.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"
+     transform="translate(-104.49603,0.25552651)"><rect
+       style="fill:#65a30d;fill-opacity:1;stroke:none;stroke-width:0.499507;stroke-linejoin:round;paint-order:markers stroke fill"
+       id="rect1-1"
+       width="100"
+       height="100.00012"
+       x="104.49603"
+       y="-0.25558716" /><path
+       d="m 142.75747,64.972903 h 7.61422 V 54.820616 h 2.53804 V 48.47544 q 0,-2.093907 -1.49109,-3.585027 -1.49109,-1.49111 -3.58499,-1.49111 h -2.53813 q -2.0939,0 -3.58499,1.49111 -1.49109,1.49112 -1.49109,3.585027 v 6.345176 h 2.53803 z m 3.80716,-24.111679 q 1.33243,0 2.25246,-0.920037 0.91995,-0.920037 0.91995,-2.252542 0,-1.332485 -0.91995,-2.252532 -0.91993,-0.920036 -2.25246,-0.920036 -1.33252,0 -2.25256,0.920036 -0.91994,0.920037 -0.91994,2.252532 0,1.332495 0.91994,2.252542 0.91994,0.920037 2.25256,0.920037 z m 9.96184,6.345176 h 12.6904 l -6.3452,-10.152274 z m 6.3452,15.228432 6.3452,-10.152284 h -12.6904 z m -25.38069,12.309636 q -3.36291,0 -5.67889,-2.315986 -2.31606,-2.315986 -2.31606,-5.678936 V 32.7394 q 0,-3.362945 2.31606,-5.678933 2.31598,-2.315988 5.67889,-2.315988 h 34.01019 q 3.36292,0 5.67889,2.315988 2.31597,2.315988 2.31597,5.678933 v 34.010146 q 0,3.36295 -2.31597,5.678936 -2.31597,2.315986 -5.67889,2.315986 z"
+       id="path1-3-2"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.0634518" /></g></svg>
--- a/icons/favicon-transparent.svg
+++ b/icons/favicon-transparent.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"
+     transform="translate(-214.49603)"><path
+       d="m 248.06205,71.319802 h 10.65991 V 57.1066 h 3.55325 v -8.883247 q 0,-2.931469 -2.08753,-5.019037 -2.08752,-2.087555 -5.01898,-2.087555 h -3.55339 q -2.93146,0 -5.01898,2.087555 -2.08753,2.087568 -2.08753,5.019037 V 57.1066 h 3.55325 z m 5.33002,-33.756351 q 1.8654,0 3.15345,-1.288052 1.28792,-1.288051 1.28792,-3.153558 0,-1.865479 -1.28792,-3.153545 -1.28791,-1.288051 -3.15345,-1.288051 -1.86553,0 -3.15358,1.288051 -1.28792,1.288052 -1.28792,3.153545 0,1.865493 1.28792,3.153558 1.28791,1.288052 3.15358,1.288052 z m 13.94658,8.883247 h 17.76655 l -8.88328,-14.213184 z m 8.88327,21.319804 8.88328,-14.213198 h -17.76655 z m -35.53296,17.23349 q -4.70808,0 -7.95044,-3.24238 -3.24249,-3.24238 -3.24249,-7.95051 V 26.192898 q 0,-4.708124 3.24249,-7.950507 3.24236,-3.242383 7.95044,-3.242383 h 47.61427 q 4.70809,0 7.95044,3.242383 3.24236,3.242383 3.24236,7.950507 v 47.614204 q 0,4.70813 -3.24236,7.95051 -3.24235,3.24238 -7.95044,3.24238 z"
+       id="path1-3"
+       style="fill:#000000;fill-opacity:1;stroke-width:0.0888325" /></g></svg>
--- a/icons/favicon.ico
+++ b/icons/favicon.ico
--- a/icons/favicon.svg
+++ b/icons/favicon.svg
@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"><rect
+       style="opacity:1;fill:#65a30d;fill-opacity:1;stroke:none;stroke-width:0.499507;stroke-linejoin:round;paint-order:markers stroke fill"
+       id="rect1"
+       width="100"
+       height="100.00012"
+       x="-3.3306691e-15"
+       y="-6.1035156e-05" /><path
+       d="M 33.56602,71.319802 H 44.22593 V 57.1066 h 3.55325 v -8.883247 q 0,-2.931469 -2.08753,-5.019037 -2.08752,-2.087555 -5.01898,-2.087555 h -3.55339 q -2.93146,0 -5.01898,2.087555 -2.08753,2.087568 -2.08753,5.019037 V 57.1066 h 3.55325 z m 5.33002,-33.756351 q 1.8654,0 3.15345,-1.288052 1.28792,-1.288051 1.28792,-3.153558 0,-1.865479 -1.28792,-3.153545 -1.28791,-1.288051 -3.15345,-1.288051 -1.86553,0 -3.15358,1.288051 -1.28792,1.288052 -1.28792,3.153545 0,1.865493 1.28792,3.153558 1.28791,1.288052 3.15358,1.288052 z m 13.94658,8.883247 H 70.60917 L 61.72589,32.233514 Z m 8.88327,21.319804 8.88328,-14.213198 H 52.84262 Z m -35.53296,17.23349 q -4.70808,0 -7.95044,-3.24238 Q 15,78.515232 15,73.807102 V 26.192898 q 0,-4.708124 3.24249,-7.950507 3.24236,-3.242383 7.95044,-3.242383 H 73.8072 q 4.70809,0 7.95044,3.242383 Q 85,21.484774 85,26.192898 v 47.614204 q 0,4.70813 -3.24236,7.95051 -3.24235,3.24238 -7.95044,3.24238 z"
+       id="path1-3-7"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.0888325" /></g></svg>
--- a/images/screenshot-desktop.png
+++ b/images/screenshot-desktop.png
--- a/images/screenshot-mobile.png
+++ b/images/screenshot-mobile.png
--- a/index.html
+++ b/index.html
@ -6,6 +6,11 @@
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet">
+    <link rel="icon" type="image/png" sizes="512" href="/icons/512.png">
+    <link rel="icon" type="image/png" sizes="192" href="/icons/192.png">
+    <link rel="shortcut icon" href="/icons/favicon.svg">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="mask-icon" href="/icons/favicon-transparent.svg" color="#047857">
    <title>Barrierefreie Aufzugs-Liste</title>
 </head>
 <body>
@ -88,6 +93,7 @@
        </button>
    </div>
 </div>
+<script type="text/javascript" src="main.js"></script>
 <script type="text/javascript" src="elevators.js"></script>
 </body>
 </html>
--- a/main.js
+++ b/main.js
@ -0,0 +1,41 @@
+const version = '0.6.0'
+const minorVersion = version.split('.').splice(0, 2).join('.');
+const numberFormat = new Intl.NumberFormat('de-DE', {
+    maximumFractionDigits: 1
+});
+
+Object.defineProperty(String.prototype, 'capitalize', {
+    value: function () {
+        return this.charAt(0).toUpperCase() + this.toLowerCase().slice(1);
+    },
+    enumerable: false
+});
+
+const dateTimeStyle = new Intl.DateTimeFormat('de-DE', {
+    dateStyle: 'medium',
+    timeStyle: 'medium',
+    timeZone: 'Europe/Berlin',
+})
+
+// set version
+document.querySelector('#version').innerHTML = `v${version}`;
+
+
+function openDialog(selector) {
+    document.querySelector('body').classList.add('has-dialog')
+    document.querySelector('#dialog_layer').classList.add('active')
+    document.querySelector(selector).classList.remove('hidden')
+}
+
+function closeDialog(selector) {
+    document.querySelector('body').classList.remove('has-dialog')
+    document.querySelector('#dialog_layer').classList.remove('active')
+    document.querySelector(selector).classList.add('hidden')
+}
+
+if ("serviceWorker" in navigator) {
+    console.log('installing sw');
+    navigator.serviceWorker.register("/sw.js").then((registration) => {
+        console.log('done installing sw');
+    });
+}
--- a/manifest.json
+++ b/manifest.json
@ -0,0 +1,49 @@
+{
+  "name": "hvvstuhl.de",
+  "short_name": "hvvstuhl",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#030712",
+  "theme_color": "#047857",
+  "description": "Barrierefreie Aufzugs-Liste",
+  "icons": [
+    {
+      "src": "/icons/192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icons/512-transparent.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "monochrome"
+    }
+  ],
+  "screenshots" : [
+    {
+      "src": "images/screenshot-mobile.png",
+      "sizes": "430x900",
+      "type": "image/png",
+      "form_factor": "narrow",
+      "label": "Stationsliste"
+    },
+    {
+      "src": "images/screenshot-desktop.png",
+      "sizes": "1280x720",
+      "type": "image/png",
+      "form_factor": "wide",
+      "label": "Stationsliste"
+    }
+  ]
+}
--- a/style.css
+++ b/style.css
@ -268,9 +268,6 @@
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
  /* End: Colors from Tailwind CSS */
-  --color-red: #971616;
-  --color-orange: #cc6300;
-  --color-green: #19942e;
  --bg-type-u: #006ab3;
  --bg-type-s: #1a962b;
  --bg-type-a: #f39100;
@ -280,17 +277,25 @@
  --bg-type-a-disabled: #dfd8cf;
  --bg-type-r-disabled: #b3b3b3;
  --color-type-disabled: var(--color-gray-400);
+  --color-line-U1: #006ab3;
+  --color-line-U2: #e2001a;
+  --color-line-U3: #ffdd00;
+  --color-line-U4: #0098a1;
+  --color-line-S1: #1a962b;
+  --color-line-S2: #b51143;
+  --color-line-S3: #622181;
+  --color-line-S4: #be148e;
+  --color-line-S5: #0089bb;
+  --color-line-S6: #d3da00;
  --bg: var(--color-gray-50);
  --text: var(--color-gray-950);
  --text-secondary: var(--color-gray-700);
-  --nav-bg: hsl(210, 60%, 50%);
-  --nav-bg-hover: hsl(210, 60%, 30%);
-  --nav-bg-visited: hsl(250, 60%, 50%);
-  --nav-text-visited: hsl(250, 60%, 93%);
-  --nav-text: hsl(210, 60%, 93%);
-  --link: hsl(210, 60%, 30%);
-  --link-hover: hsl(210, 60%, 10%);
-  --link-visited: hsl(250, 60%, 30%);
+  --nav-bg: var(--color-indigo-400);
+  --nav-bg-hover: var(--color-indigo-200);
+  --nav-bg-visited: var(--color-purple-400);
+  --link: var(--color-indigo-600);
+  --link-hover: var(--color-indigo-800);
+  --link-visited: var(--color-purple-600);
  --station-bg: var(--color-gray-50);
  --station-bg-hover: var(--color-gray-400);
  --station-border: var(--color-gray-400);
@ -308,25 +313,25 @@
 }
@media (prefers-color-scheme: dark) {
  :root {
-    --bg: var(--color-gray-950);
-    --text: var(--color-gray-50);
-    --text-secondary: var(--color-gray-400);
-    --nav-bg: hsl(210, 60%, 30%);
-    --nav-bg-hover: hsl(210, 60%, 10%);
-    --nav-bg-visited: hsl(250, 60%, 30%);
-    --link: hsl(210, 60%, 60%);
-    --link-hover: hsl(210, 60%, 60%);
-    --link-visited: hsl(250, 60%, 70%);
-    --station-bg: var(--color-gray-950);
-    --station-bg-hover: var(--color-gray-600);
-    --station-border: var(--color-gray-600);
-    --station-border-hover: var(--color-gray-400);
-    --elevator-bg: var(--color-gray-900);
    --bg-type-u-disabled: #627f93;
    --bg-type-s-disabled: #688b6d;
    --bg-type-a-disabled: #aa987f;
    --bg-type-r-disabled: #333333;
    --color-type-disabled: var(--color-gray-200);
+    --bg: var(--color-gray-950);
+    --text: var(--color-gray-50);
+    --text-secondary: var(--color-gray-400);
+    --nav-bg: var(--color-indigo-800);
+    --nav-bg-hover: var(--color-indigo-950);
+    --nav-bg-visited: var(--color-purple-800);
+    --link: var(--color-indigo-400);
+    --link-hover: var(--color-indigo-200);
+    --link-visited: var(--color-purple-400);
+    --station-bg: var(--color-gray-950);
+    --station-bg-hover: var(--color-gray-600);
+    --station-border: var(--color-gray-600);
+    --station-border-hover: var(--color-gray-400);
+    --elevator-bg: var(--color-gray-900);
  }
 }

@ -371,15 +376,15 @@ body.has-dialog {
 }

 .text-red {
-  color: var(--color-red);
+  color: var(--color-red-800);
 }

 .text-orange {
-  color: var(--color-orange);
+  color: var(--color-orange-500);
 }

 .text-green {
-  color: var(--color-green);
+  color: var(--color-green-600);
 }

 body {
@ -397,7 +402,7 @@ a {
  color: var(--link);
  text-decoration: none;
 }
-a:hover {
+a:hover, a:visited:hover {
  text-decoration: underline;
  color: var(--link-hover);
 }
@ -415,18 +420,18 @@ nav ul {
 }
 nav ul li a {
  font-weight: bold;
-  color: var(--nav-text);
+  color: var(--text);
  text-decoration: none;
  background-color: var(--nav-bg);
  padding: var(--space-m) var(--space-l);
  cursor: pointer;
 }
-nav ul li a:hover {
+nav ul li a:hover, nav ul li a:visited:hover {
  text-decoration: underline;
  background-color: var(--nav-bg-hover);
 }
 nav ul li a:visited {
-  color: var(--nav-text-visited);
+  color: var(--text);
  background-color: var(--nav-bg-visited);
 }

@ -515,7 +520,7 @@ button.loadOSM {
 }

 div#errorMessage {
-  border: solid 2px var(--color-red);
+  border: solid 2px var(--color-red-600);
  border-radius: var(--item-radius);
  padding: var(--space-xl) var(--space-xl);
  margin-top: var(--space-l);
@ -838,55 +843,58 @@ span.lineChip, span.typeChip, button.typeChip {
 }
 span.lineChip[data-type=U], span.typeChip[data-type=U], button.typeChip[data-type=U] {
  background-color: var(--bg-type-u);
-  color: #ffffff;
+  color: var(--color-white);
 }
 span.lineChip[data-type=U][data-line=U1], span.typeChip[data-type=U][data-line=U1], button.typeChip[data-type=U][data-line=U1] {
-  background-color: #006ab3;
+  background-color: var(--color-line-U1);
 }
 span.lineChip[data-type=U][data-line=U2], span.typeChip[data-type=U][data-line=U2], button.typeChip[data-type=U][data-line=U2] {
-  background-color: #e2001a;
+  background-color: var(--color-line-U2);
 }
 span.lineChip[data-type=U][data-line=U3], span.typeChip[data-type=U][data-line=U3], button.typeChip[data-type=U][data-line=U3] {
-  background-color: #ffdd00;
-  color: #000000;
+  background-color: var(--color-line-U3);
+  color: var(--color-black);
 }
 span.lineChip[data-type=U][data-line=U4], span.typeChip[data-type=U][data-line=U4], button.typeChip[data-type=U][data-line=U4] {
-  background-color: #0098a1;
+  background-color: var(--color-line-U4);
+}
+span.lineChip[data-type=U][data-line=U5], span.typeChip[data-type=U][data-line=U5], button.typeChip[data-type=U][data-line=U5] {
+  background-color: var(--color-line-U5);
 }
 span.lineChip[data-type=S], span.typeChip[data-type=S], button.typeChip[data-type=S] {
  background-color: var(--bg-type-s);
-  color: #ffffff;
+  color: var(--color-white);
 }
 span.lineChip[data-type=S][data-line=S1], span.typeChip[data-type=S][data-line=S1], button.typeChip[data-type=S][data-line=S1] {
-  background-color: #1a962b;
+  background-color: var(--color-line-S1);
 }
 span.lineChip[data-type=S][data-line=S2], span.typeChip[data-type=S][data-line=S2], button.typeChip[data-type=S][data-line=S2] {
-  background-color: #b51143;
+  background-color: var(--color-line-S2);
 }
 span.lineChip[data-type=S][data-line=S3], span.typeChip[data-type=S][data-line=S3], button.typeChip[data-type=S][data-line=S3] {
-  background-color: #622181;
+  background-color: var(--color-line-S3);
 }
 span.lineChip[data-type=S][data-line=S4], span.typeChip[data-type=S][data-line=S4], button.typeChip[data-type=S][data-line=S4] {
-  background-color: #be148e;
+  background-color: var(--color-line-S4);
 }
 span.lineChip[data-type=S][data-line=S5], span.typeChip[data-type=S][data-line=S5], button.typeChip[data-type=S][data-line=S5] {
-  background-color: #0089bb;
+  background-color: var(--color-line-S5);
 }
 span.lineChip[data-type=S][data-line=S6], span.typeChip[data-type=S][data-line=S6], button.typeChip[data-type=S][data-line=S6] {
-  background-color: #d3da00;
-  color: #000000;
+  background-color: var(--color-line-S6);
+  color: var(--color-black);
 }
 span.lineChip[data-type=A], span.typeChip[data-type=A], button.typeChip[data-type=A] {
  background-color: var(--bg-type-a);
-  color: #ffffff;
+  color: var(--color-white);
 }
 span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] {
  background-color: var(--bg-type-r);
-  color: #ffffff;
+  color: var(--color-white);
 }
@media (prefers-color-scheme: dark) {
  span.lineChip[data-type=R], span.typeChip[data-type=R], button.typeChip[data-type=R] {
-    border: solid 2px #ffffff;
+    border: solid 2px var(--color-white);
  }
 }

--- a/style.css.map
+++ b/style.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAMA;AAEE;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAwBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EAEA;EACA;EACA;EAOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAhCA;EArTF;IAsTI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAgBF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAjCF;IAkCI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["style.scss","colors.scss"],"names":[],"mappings":"AAMA;ACLE;;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAwBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;ED/PA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EA8BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AApCA;EAlDF;IAoDI;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;;;;AAeF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAGA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAOV;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAKJ;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EAEA;;AAEA;EAPF;IAQI;;;AAIJ;EACE;EAEA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;AAMR;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAjCF;IAkCI;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EATF;IAUI;IACA;IACA;;;AAIF;EACE;EACA;;AACA;EAHF;IAII;;;AAKJ;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGE;EADF;IAEI;;;AAKF;EADF;IAEI;;;AAKJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAOA;EACE;;AAMR;EACE;EACA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAKF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAIJ;EACE;EACA;EAEA;;AAEA;EANF;IAOI;;;;AAYpB;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQV;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;;AAVA;EACE;;AAWF;EAIE;EACA;;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE","file":"style.css"}
--- a/style.scss
+++ b/style.scss
@ -1,287 +1,13 @@
-@use 'sass:color';
+@import "colors";

 $mobileBreakpoint: 576px;
 $smallBreakpoint: 400px;
 $mediumBreakpoint: 800px;

 :root {
+  @include tailwindColors();

-  /* Colors from Tailwind CSS: https://github.com/tailwindlabs/tailwindcss
-
-        MIT License
-
-        Copyright (c) Tailwind Labs, Inc.
-
-        Permission is hereby granted, free of charge, to any person obtaining a copy
-        of this software and associated documentation files (the "Software"), to deal
-        in the Software without restriction, including without limitation the rights
-        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-        copies of the Software, and to permit persons to whom the Software is
-        furnished to do so, subject to the following conditions:
-
-        The above copyright notice and this permission notice shall be included in all
-        copies or substantial portions of the Software.
-
-        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-        SOFTWARE.
-  */
-  --color-black: #000;
-  --color-white: #fff;
-  --color-slate-50: #f8fafc;
-  --color-slate-100: #f1f5f9;
-  --color-slate-200: #e2e8f0;
-  --color-slate-300: #cbd5e1;
-  --color-slate-400: #94a3b8;
-  --color-slate-500: #64748b;
-  --color-slate-600: #475569;
-  --color-slate-700: #334155;
-  --color-slate-800: #1e293b;
-  --color-slate-900: #0f172a;
-  --color-slate-950: #020617;
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
-  --color-gray-950: #030712;
-  --color-zinc-50: #fafafa;
-  --color-zinc-100: #f4f4f5;
-  --color-zinc-200: #e4e4e7;
-  --color-zinc-300: #d4d4d8;
-  --color-zinc-400: #a1a1aa;
-  --color-zinc-500: #71717a;
-  --color-zinc-600: #52525b;
-  --color-zinc-700: #3f3f46;
-  --color-zinc-800: #27272a;
-  --color-zinc-900: #18181b;
-  --color-zinc-950: #09090b;
-  --color-neutral-50: #fafafa;
-  --color-neutral-100: #f5f5f5;
-  --color-neutral-200: #e5e5e5;
-  --color-neutral-300: #d4d4d4;
-  --color-neutral-400: #a3a3a3;
-  --color-neutral-500: #737373;
-  --color-neutral-600: #525252;
-  --color-neutral-700: #404040;
-  --color-neutral-800: #262626;
-  --color-neutral-900: #171717;
-  --color-neutral-950: #0a0a0a;
-  --color-stone-50: #fafaf9;
-  --color-stone-100: #f5f5f4;
-  --color-stone-200: #e7e5e4;
-  --color-stone-300: #d6d3d1;
-  --color-stone-400: #a8a29e;
-  --color-stone-500: #78716c;
-  --color-stone-600: #57534e;
-  --color-stone-700: #44403c;
-  --color-stone-800: #292524;
-  --color-stone-900: #1c1917;
-  --color-stone-950: #0c0a09;
-  --color-red-50: #fef2f2;
-  --color-red-100: #fee2e2;
-  --color-red-200: #fecaca;
-  --color-red-300: #fca5a5;
-  --color-red-400: #f87171;
-  --color-red-500: #ef4444;
-  --color-red-600: #dc2626;
-  --color-red-700: #b91c1c;
-  --color-red-800: #991b1b;
-  --color-red-900: #7f1d1d;
-  --color-red-950: #450a0a;
-  --color-orange-50: #fff7ed;
-  --color-orange-100: #ffedd5;
-  --color-orange-200: #fed7aa;
-  --color-orange-300: #fdba74;
-  --color-orange-400: #fb923c;
-  --color-orange-500: #f97316;
-  --color-orange-600: #ea580c;
-  --color-orange-700: #c2410c;
-  --color-orange-800: #9a3412;
-  --color-orange-900: #7c2d12;
-  --color-orange-950: #431407;
-  --color-amber-50: #fffbeb;
-  --color-amber-100: #fef3c7;
-  --color-amber-200: #fde68a;
-  --color-amber-300: #fcd34d;
-  --color-amber-400: #fbbf24;
-  --color-amber-500: #f59e0b;
-  --color-amber-600: #d97706;
-  --color-amber-700: #b45309;
-  --color-amber-800: #92400e;
-  --color-amber-900: #78350f;
-  --color-amber-950: #451a03;
-  --color-yellow-50: #fefce8;
-  --color-yellow-100: #fef9c3;
-  --color-yellow-200: #fef08a;
-  --color-yellow-300: #fde047;
-  --color-yellow-400: #facc15;
-  --color-yellow-500: #eab308;
-  --color-yellow-600: #ca8a04;
-  --color-yellow-700: #a16207;
-  --color-yellow-800: #854d0e;
-  --color-yellow-900: #713f12;
-  --color-yellow-950: #422006;
-  --color-lime-50: #f7fee7;
-  --color-lime-100: #ecfccb;
-  --color-lime-200: #d9f99d;
-  --color-lime-300: #bef264;
-  --color-lime-400: #a3e635;
-  --color-lime-500: #84cc16;
-  --color-lime-600: #65a30d;
-  --color-lime-700: #4d7c0f;
-  --color-lime-800: #3f6212;
-  --color-lime-900: #365314;
-  --color-lime-950: #1a2e05;
-  --color-green-50: #f0fdf4;
-  --color-green-100: #dcfce7;
-  --color-green-200: #bbf7d0;
-  --color-green-300: #86efac;
-  --color-green-400: #4ade80;
-  --color-green-500: #22c55e;
-  --color-green-600: #16a34a;
-  --color-green-700: #15803d;
-  --color-green-800: #166534;
-  --color-green-900: #14532d;
-  --color-green-950: #052e16;
-  --color-emerald-50: #ecfdf5;
-  --color-emerald-100: #d1fae5;
-  --color-emerald-200: #a7f3d0;
-  --color-emerald-300: #6ee7b7;
-  --color-emerald-400: #34d399;
-  --color-emerald-500: #10b981;
-  --color-emerald-600: #059669;
-  --color-emerald-700: #047857;
-  --color-emerald-800: #065f46;
-  --color-emerald-900: #064e3b;
-  --color-emerald-950: #022c22;
-  --color-teal-50: #f0fdfa;
-  --color-teal-100: #ccfbf1;
-  --color-teal-200: #99f6e4;
-  --color-teal-300: #5eead4;
-  --color-teal-400: #2dd4bf;
-  --color-teal-500: #14b8a6;
-  --color-teal-600: #0d9488;
-  --color-teal-700: #0f766e;
-  --color-teal-800: #115e59;
-  --color-teal-900: #134e4a;
-  --color-teal-950: #042f2e;
-  --color-cyan-50: #ecfeff;
-  --color-cyan-100: #cffafe;
-  --color-cyan-200: #a5f3fc;
-  --color-cyan-300: #67e8f9;
-  --color-cyan-400: #22d3ee;
-  --color-cyan-500: #06b6d4;
-  --color-cyan-600: #0891b2;
-  --color-cyan-700: #0e7490;
-  --color-cyan-800: #155e75;
-  --color-cyan-900: #164e63;
-  --color-cyan-950: #083344;
-  --color-sky-50: #f0f9ff;
-  --color-sky-100: #e0f2fe;
-  --color-sky-200: #bae6fd;
-  --color-sky-300: #7dd3fc;
-  --color-sky-400: #38bdf8;
-  --color-sky-500: #0ea5e9;
-  --color-sky-600: #0284c7;
-  --color-sky-700: #0369a1;
-  --color-sky-800: #075985;
-  --color-sky-900: #0c4a6e;
-  --color-sky-950: #082f49;
-  --color-blue-50: #eff6ff;
-  --color-blue-100: #dbeafe;
-  --color-blue-200: #bfdbfe;
-  --color-blue-300: #93c5fd;
-  --color-blue-400: #60a5fa;
-  --color-blue-500: #3b82f6;
-  --color-blue-600: #2563eb;
-  --color-blue-700: #1d4ed8;
-  --color-blue-800: #1e40af;
-  --color-blue-900: #1e3a8a;
-  --color-blue-950: #172554;
-  --color-indigo-50: #eef2ff;
-  --color-indigo-100: #e0e7ff;
-  --color-indigo-200: #c7d2fe;
-  --color-indigo-300: #a5b4fc;
-  --color-indigo-400: #818cf8;
-  --color-indigo-500: #6366f1;
-  --color-indigo-600: #4f46e5;
-  --color-indigo-700: #4338ca;
-  --color-indigo-800: #3730a3;
-  --color-indigo-900: #312e81;
-  --color-indigo-950: #1e1b4b;
-  --color-violet-50: #f5f3ff;
-  --color-violet-100: #ede9fe;
-  --color-violet-200: #ddd6fe;
-  --color-violet-300: #c4b5fd;
-  --color-violet-400: #a78bfa;
-  --color-violet-500: #8b5cf6;
-  --color-violet-600: #7c3aed;
-  --color-violet-700: #6d28d9;
-  --color-violet-800: #5b21b6;
-  --color-violet-900: #4c1d95;
-  --color-violet-950: #2e1065;
-  --color-purple-50: #faf5ff;
-  --color-purple-100: #f3e8ff;
-  --color-purple-200: #e9d5ff;
-  --color-purple-300: #d8b4fe;
-  --color-purple-400: #c084fc;
-  --color-purple-500: #a855f7;
-  --color-purple-600: #9333ea;
-  --color-purple-700: #7e22ce;
-  --color-purple-800: #6b21a8;
-  --color-purple-900: #581c87;
-  --color-purple-950: #3b0764;
-  --color-fuchsia-50: #fdf4ff;
-  --color-fuchsia-100: #fae8ff;
-  --color-fuchsia-200: #f5d0fe;
-  --color-fuchsia-300: #f0abfc;
-  --color-fuchsia-400: #e879f9;
-  --color-fuchsia-500: #d946ef;
-  --color-fuchsia-600: #c026d3;
-  --color-fuchsia-700: #a21caf;
-  --color-fuchsia-800: #86198f;
-  --color-fuchsia-900: #701a75;
-  --color-fuchsia-950: #4a044e;
-  --color-pink-50: #fdf2f8;
-  --color-pink-100: #fce7f3;
-  --color-pink-200: #fbcfe8;
-  --color-pink-300: #f9a8d4;
-  --color-pink-400: #f472b6;
-  --color-pink-500: #ec4899;
-  --color-pink-600: #db2777;
-  --color-pink-700: #be185d;
-  --color-pink-800: #9d174d;
-  --color-pink-900: #831843;
-  --color-pink-950: #500724;
-  --color-rose-50: #fff1f2;
-  --color-rose-100: #ffe4e6;
-  --color-rose-200: #fecdd3;
-  --color-rose-300: #fda4af;
-  --color-rose-400: #fb7185;
-  --color-rose-500: #f43f5e;
-  --color-rose-600: #e11d48;
-  --color-rose-700: #be123c;
-  --color-rose-800: #9f1239;
-  --color-rose-900: #881337;
-  --color-rose-950: #4c0519;
-
-  /* End: Colors from Tailwind CSS */
-
-  --color-red: #971616;
-  --color-orange: #cc6300;
-  --color-green: #19942e;
-
-
+  // LineType Colors
  $colorTypeU: #006ab3;
  $colorTypeS: #1a962b;
  $colorTypeA: #f39100;
@ -296,17 +22,32 @@ $mediumBreakpoint: 800px;
  --bg-type-r-disabled: #{scale-color($colorTypeR, $saturation: -80%, $lightness: +70%)};
  --color-type-disabled: var(--color-gray-400);

+  // Line Colors
+  --color-line-U1: #006ab3;
+  --color-line-U2: #e2001a;
+  --color-line-U3: #ffdd00;
+  --color-line-U4: #0098a1;
+  --color-line-S1: #1a962b;
+  --color-line-S2: #b51143;
+  --color-line-S3: #622181;
+  --color-line-S4: #be148e;
+  --color-line-S5: #0089bb;
+  --color-line-S6: #d3da00;
+
+
+  // Component Styles
  --bg: var(--color-gray-50);
  --text: var(--color-gray-950);
  --text-secondary: var(--color-gray-700);
-  --nav-bg: hsl(210, 60%, 50%);
-  --nav-bg-hover: hsl(210, 60%, 30%);
-  --nav-bg-visited: hsl(250, 60%, 50%);
-  --nav-text-visited: hsl(250, 60%, 93%);
-  --nav-text: hsl(210, 60%, 93%);
-  --link: hsl(210, 60%, 30%);
-  --link-hover: hsl(210, 60%, 10%);
-  --link-visited: hsl(250, 60%, 30%);
+
+  --nav-bg: var(--color-indigo-400);
+  --nav-bg-hover: var(--color-indigo-200);
+  --nav-bg-visited: var(--color-purple-400);
+
+  --link: var(--color-indigo-600);
+  --link-hover: var(--color-indigo-800);
+  --link-visited: var(--color-purple-600);
+
  --station-bg: var(--color-gray-50);
  --station-bg-hover: var(--color-gray-400);
  --station-border: var(--color-gray-400);
@ -314,27 +55,31 @@ $mediumBreakpoint: 800px;
  --elevator-bg: var(--color-gray-100);

  @media (prefers-color-scheme: dark) {
-    --bg: var(--color-gray-950);
-    --text: var(--color-gray-50);
-    --text-secondary: var(--color-gray-400);
-    --nav-bg: hsl(210, 60%, 30%);
-    --nav-bg-hover: hsl(210, 60%, 10%);
-    --nav-bg-visited: hsl(250, 60%, 30%);
-    --link: hsl(210, 60%, 60%);
-    --link-hover: hsl(210, 60%, 60%);
-    --link-visited: hsl(250, 60%, 70%);
-    --station-bg: var(--color-gray-950);
-    --station-bg-hover: var(--color-gray-600);
-    --station-border: var(--color-gray-600);
-    --station-border-hover: var(--color-gray-400);
-    --elevator-bg: var(--color-gray-900);
-
+    // LineType Colors
    --bg-type-u-disabled: #{scale-color($colorTypeU, $saturation: -80%, $lightness: +20%)};
    --bg-type-s-disabled: #{scale-color($colorTypeS, $saturation: -80%, $lightness: +20%)};
    --bg-type-a-disabled: #{scale-color($colorTypeA, $saturation: -80%, $lightness: +20%)};
    --bg-type-r-disabled: #{scale-color($colorTypeR, $saturation: -80%, $lightness: +20%)};
    --color-type-disabled: var(--color-gray-200);

+    // Component Styles
+    --bg: var(--color-gray-950);
+    --text: var(--color-gray-50);
+    --text-secondary: var(--color-gray-400);
+
+    --nav-bg: var(--color-indigo-800);
+    --nav-bg-hover: var(--color-indigo-950);
+    --nav-bg-visited: var(--color-purple-800);
+
+    --link: var(--color-indigo-400);
+    --link-hover: var(--color-indigo-200);
+    --link-visited: var(--color-purple-400);
+
+    --station-bg: var(--color-gray-950);
+    --station-bg-hover: var(--color-gray-600);
+    --station-border: var(--color-gray-600);
+    --station-border-hover: var(--color-gray-400);
+    --elevator-bg: var(--color-gray-900);
  }

  --elevator-list-gap: 3rem;
@ -396,15 +141,15 @@ body {
 }

 .text-red {
-  color: var(--color-red);
+  color: var(--color-red-800);
 }

 .text-orange {
-  color: var(--color-orange);
+  color: var(--color-orange-500);
 }

 .text-green {
-  color: var(--color-green);
+  color: var(--color-green-600);
 }

 body {
@ -424,7 +169,7 @@ a {
  color: var(--link);
  text-decoration: none;

-  &:hover {
+  &:hover, &:visited:hover {
    text-decoration: underline;
    color: var(--link-hover);
  }
@ -446,20 +191,20 @@ nav {
    li {
      a {
        font-weight: bold;
-        color: var(--nav-text);
+        color: var(--text);
        text-decoration: none;

        background-color: var(--nav-bg);
        padding: var(--space-m) var(--space-l);
        cursor: pointer;

-        &:hover {
+        &:hover, &:visited:hover {
          text-decoration: underline;
          background-color: var(--nav-bg-hover);
        }

        &:visited {
-          color: var(--nav-text-visited);
+          color: var(--text);
          background-color: var(--nav-bg-visited);
        }
      }
@ -558,7 +303,7 @@ button.loadOSM {
 }

 div#errorMessage {
-  border: solid 2px var(--color-red);
+  border: solid 2px var(--color-red-600);
  border-radius: var(--item-radius);
  padding: var(--space-xl) var(--space-xl);
  margin-top: var(--space-l);
@ -939,67 +684,71 @@ span.lineChip, span.typeChip, button.typeChip {

  &[data-type="U"] {
    background-color: var(--bg-type-u);
-    color: #ffffff;
+    color: var(--color-white);

    &[data-line="U1"] {
-      background-color: #006ab3;
+      background-color: var(--color-line-U1);
    }

    &[data-line="U2"] {
-      background-color: #e2001a;
+      background-color: var(--color-line-U2);
    }

    &[data-line="U3"] {
-      background-color: #ffdd00;
-      color: #000000;
+      background-color: var(--color-line-U3);
+      color: var(--color-black);
    }

    &[data-line="U4"] {
-      background-color: #0098a1;
+      background-color: var(--color-line-U4);
+    }
+
+    &[data-line="U5"] {
+      background-color: var(--color-line-U5);
    }
  }

  &[data-type="S"] {
    background-color: var(--bg-type-s);
-    color: #ffffff;
+    color: var(--color-white);

    &[data-line="S1"] {
-      background-color: #1a962b;
+      background-color: var(--color-line-S1);
    }

    &[data-line="S2"] {
-      background-color: #b51143;
+      background-color: var(--color-line-S2);
    }

    &[data-line="S3"] {
-      background-color: #622181;
+      background-color: var(--color-line-S3);
    }

    &[data-line="S4"] {
-      background-color: #be148e;
+      background-color: var(--color-line-S4);
    }

    &[data-line="S5"] {
-      background-color: #0089bb;
+      background-color: var(--color-line-S5);
    }

    &[data-line="S6"] {
-      background-color: #d3da00;
-      color: #000000;
+      background-color: var(--color-line-S6);
+      color: var(--color-black);
    }
  }

  &[data-type="A"] {
    background-color: var(--bg-type-a);
-    color: #ffffff;
+    color: var(--color-white);
  }

  &[data-type="R"] {
    background-color: var(--bg-type-r);
-    color: #ffffff;
+    color: var(--color-white);

    @media (prefers-color-scheme: dark) {
-      border: solid 2px #ffffff;
+      border: solid 2px var(--color-white);
    }
  }
 }
--- a/sw.js
+++ b/sw.js
@ -0,0 +1,96 @@
+const version = '0.6.0'
+const consolePrefix = `[SW v${version}]  `
+
+const cacheName = `hvvstuhl-${version}`;
+const contentToCache = [
+    '/',
+    '/index.html',
+    '/about.html',
+    '/main.js',
+    '/elevators.js',
+    '/style.css',
+    '/icons/192.png',
+    '/icons/512.png',
+    '/icons/512-maskable.png',
+    '/icons/512-transparent.png',
+    '/icons/favicon.ico',
+    '/icons/favicon.svg',
+    '/icons/favicon-maskable.svg',
+    '/icons/favicon-transparent.svg',
+    '/md_icons/bicycle.svg',
+    '/md_icons/braille.svg',
+    '/md_icons/door_sliding.svg',
+    '/md_icons/elevator.svg',
+    '/md_icons/elevator-slash.svg',
+    '/md_icons/fit_width.svg',
+    '/md_icons/height.svg',
+    '/md_icons/info.svg',
+    '/md_icons/load.svg',
+    '/md_icons/location.svg',
+    '/md_icons/location-searching.svg',
+    '/md_icons/speaker.svg',
+    '/md_icons/up-down.svg',
+    '/md_icons/wheelchair.svg',
+    '/md_icons/width.svg',
+];
+
+// Service worker Install: Cache all files
+self.addEventListener("install", (e) => {
+    console.log("[Service Worker] Wird installiert....");
+    e.waitUntil(
+        (async () => {
+            const cache = await caches.open(cacheName);
+            console.log("[Service Worker]   Cache wird aufgebaut...");
+            await cache.addAll(contentToCache);
+            console.log("[Service Worker]   FERTIG");
+        })(),
+    );
+});
+
+
+// delete old caches
+const deleteCache = async (key) => {
+    await caches.delete(key);
+};
+const deleteOldCaches = async () => {
+    const keyList = await caches.keys();
+    const cachesToDelete = keyList.filter((key) => key !== cacheName);
+    await Promise.all(cachesToDelete.map(deleteCache));
+};
+self.addEventListener("activate", (event) => {
+    event.waitUntil(
+        (async () => {
+            await deleteOldCaches()
+            await clients.claim();
+        })(),
+    );
+});
+
+
+
+// Respond with data from cache when offline
+self.addEventListener("fetch", (e) => {
+    e.respondWith(
+        (async () => {
+            const path = new URL(e.request.url).pathname
+
+            if(contentToCache.includes(path)){
+                console.log(`${consolePrefix}Anfrage: ${path}`);
+
+                const r = await caches.match(e.request);
+                if (r) {
+                    console.log(`${consolePrefix}  Im Cache gefunden.`);
+                    return r;
+                }
+                const response = await fetch(e.request);
+                const cache = await caches.open(cacheName);
+                console.log(`${consolePrefix}  Nicht gefunden. Aktualisiere Cache: ${path}`);
+                await cache.put(e.request, response.clone());
+                return response;
+            }else{
+                console.log(`${consolePrefix}Anfrage übersprungen: ${e.request.url}`);
+                return await fetch(e.request);
+            }
+        })(),
+    );
+});
Author	SHA1	Message	Date
kritzl	e72ad0cf07	add offline functionality by making this a PWA - added favicons - added manifest - split javascript into main.js and elevators.js	2024-06-08 23:12:00 +02:00
kritzl	192e59d9f8	refactor color usage	2024-06-07 16:39:15 +02:00
				`@ -0,0 +1 @@`
				`{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"colors.css"}`