Add icons and make installable

Change up some colors

src/icon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="https://apps.jhollen.com/ncounter/mstile-150x150.png"/>
+            <TileColor>#dce6ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

src/icon/html_code.html

@@ -0,0 +1,9 @@
+<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+<link rel="manifest" href="icons/site.webmanifest">
+<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#3a86b7">
+<link rel="shortcut icon" href="icons/favicon.ico">
+<meta name="msapplication-TileColor" content="#dce6ef"> 
+<meta name="msapplication-config" content="icons/browserconfig.xml">
+<meta name="theme-color" content="#dce6ef">

src/icon/ncounter-nobg.svg

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="128"
+   height="128"
+   viewBox="0 0 33.866666 33.866666"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="ncounter-nobg.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#dce6c0"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="28.582867"
+     inkscape:cy="57.799037"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1137"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:pagecheckerboard="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-263.13335)">
+    <rect
+       style="fill:#163345;fill-opacity:1;stroke-width:0.26458332"
+       id="rect1100"
+       width="4.2333331"
+       height="31.173208"
+       x="-188.17999"
+       y="194.42413"
+       rx="2.1166666"
+       ry="2.3812499"
+       transform="rotate(-45)" />
+    <rect
+       style="fill:#3a86b7;fill-opacity:1;stroke-width:0.26458332"
+       id="rect1088"
+       width="4.2333331"
+       height="23.283333"
+       x="5.2916665"
+       y="268.42502"
+       rx="2.1166666"
+       ry="2.1166666" />
+    <rect
+       ry="2.1166666"
+       rx="2.1166666"
+       y="268.42502"
+       x="24.341667"
+       height="23.283333"
+       width="4.2333331"
+       id="rect1090"
+       style="fill:#3a86b7;fill-opacity:1;stroke-width:0.26458332" />
+  </g>
+</svg>

src/icon/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="700pt" height="700pt" viewBox="0 0 700 700"><path d="M145.5 110.1c-16 3-28.1 13.3-33.8 28.7l-2.1 5.7-.1 203c-.1 114.8.3 205.1.8 207.9 1.8 10.1 9.3 21.5 18 27.5 17.9 12.1 43.1 9.2 57.1-6.7 5.9-6.6 10.3-16.1 11.1-23.6.2-1.7.4-68.5.4-148.4l.1-145.4 160.8 160.9c88.5 88.4 162.7 162 164.9 163.6 6.5 4.5 14.8 6.9 23.8 7 21 .1 38.3-13.5 43-33.8.9-3.7 1.1-57.7 1.1-208-.1-196.3-.2-203.2-2-208.5-10.5-30.6-46.9-40.4-71.1-19.2-7.1 6.3-13.1 17.5-14 26.4-.2 1.8-.4 68.7-.4 148.6L503 441 342.2 280.3C253.7 191.8 180 118.6 178.4 117.4c-9.3-6.5-22-9.3-32.9-7.3z"/></svg>

src/icon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+    "name": "NCounter",
+    "short_name": "NCounter",
+    "description": "Counter app",
+    "icons": [
+        {
+            "src": "icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#dce6ef",
+    "background_color": "#dce6ef",
+    "start_url": "https://apps.jhollen.com/ncounter/",
+    "display": "standalone"
+}

src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta viewport="width=device-width, initial-scale=1.0">
+    <title>NCounter</title>
+    ${require('./icon/html_code.html')}
+  </head>
+  <body>
+  </body>
+</html>

src/ncounter/site.css

@@ -23,9 +23,9 @@ body {
 }
 
 :root {
-    --background-color: #8baec6;
+    --background-color: #DCE6EF;
     --button-color: #3A86B7;
-    --highlight-color: #303030;
+    --highlight-color: #163345;
 
     --background-primary: #FCFCFC;
     --background-alternate: #CDCDCD;