Redesign home page to use tiles instead of a list (close #37)

www/assets/images/bgs/add.svg

@@ -0,0 +1,97 @@
+<?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="500"
+   height="500"
+   viewBox="0 0 132.29166 132.29167"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="add.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="250.07653"
+     inkscape:cy="321.61508"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     borderlayer="true"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1680"
+     inkscape:window-height="1021"
+     inkscape:window-x="1920"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <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,-164.70831)">
+    <rect
+       style="opacity:1;fill:#4caf50;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+       id="rect836"
+       width="132.29167"
+       height="132.29166"
+       x="0"
+       y="164.7083" />
+    <path
+       id="path926"
+       d="m 43.103329,267.26948 h -9.468304 v -9.4683 c 0,-0.58125 -0.470785,-1.05204 -1.052033,-1.05204 h -2.104068 c -0.581249,0 -1.052034,0.47079 -1.052034,1.05204 v 9.4683 h -9.468303 c -0.581249,0 -1.052034,0.47079 -1.052034,1.05204 v 2.10406 c 0,0.58125 0.470785,1.05203 1.052034,1.05203 h 9.468303 v 9.46831 c 0,0.58125 0.470785,1.05203 1.052034,1.05203 h 2.104068 c 0.581248,0 1.052033,-0.47078 1.052033,-1.05203 v -9.46831 h 9.468304 c 0.581249,0 1.052033,-0.47078 1.052033,-1.05203 v -2.10406 c 0,-0.58125 -0.470784,-1.05204 -1.052033,-1.05204 z"
+       inkscape:connector-curvature="0"
+       style="fill:#43a047;fill-opacity:0.49803922;stroke-width:0.26458332" />
+    <path
+       style="fill:#43a047;fill-opacity:0.49803922;stroke-width:0.26458332"
+       inkscape:connector-curvature="0"
+       d="m 113.13917,196.61941 h -8.47611 v -8.47611 c 0,-0.52034 -0.42145,-0.9418 -0.94179,-0.9418 h -1.88359 c -0.52034,0 -0.94179,0.42146 -0.94179,0.9418 v 8.47611 h -8.476118 c -0.520339,0 -0.94179,0.42145 -0.94179,0.94179 v 1.88358 c 0,0.52034 0.421451,0.94179 0.94179,0.94179 h 8.476118 v 8.47612 c 0,0.52034 0.42145,0.94179 0.94179,0.94179 h 1.88359 c 0.52034,0 0.94179,-0.42145 0.94179,-0.94179 v -8.47612 h 8.47611 c 0.52034,0 0.94179,-0.42145 0.94179,-0.94179 v -1.88358 c 0,-0.52034 -0.42145,-0.94179 -0.94179,-0.94179 z"
+       id="path937" />
+    <path
+       id="path997"
+       d="m 63.135168,223.53312 h -8.820344 v -8.82034 c 0,-1.08233 -0.877748,-1.96007 -1.960077,-1.96007 h -1.960076 c -1.08233,0 -1.960077,0.87774 -1.960077,1.96007 v 8.82034 h -8.820343 c -1.08233,0 -1.960077,0.87775 -1.960077,1.96008 v 1.96007 c 0,1.08233 0.877747,1.96009 1.960077,1.96009 h 8.820343 v 8.82034 c 0,1.08232 0.877747,1.96007 1.960077,1.96007 h 1.960076 c 1.082329,0 1.960077,-0.87775 1.960077,-1.96007 v -8.82034 h 8.820344 c 1.082329,0 1.960075,-0.87776 1.960075,-1.96009 v -1.96007 c 0,-1.08233 -0.877746,-1.96008 -1.960075,-1.96008 z"
+       inkscape:connector-curvature="0"
+       style="fill:#43a047;fill-opacity:0.49803922;stroke-width:0.26458332" />
+    <path
+       style="fill:#43a047;fill-opacity:0.49803922;stroke-width:0.26458332"
+       inkscape:connector-curvature="0"
+       d="m 98.240607,241.28362 h -6.491742 v -6.49174 c 0,-0.39852 -0.322783,-0.72131 -0.721304,-0.72131 h -1.442609 c -0.398521,0 -0.721305,0.32279 -0.721305,0.72131 v 6.49174 h -6.491741 c -0.398521,0 -0.721305,0.32278 -0.721305,0.72131 v 1.4426 c 0,0.39852 0.322784,0.7213 0.721305,0.7213 h 6.491741 v 6.49175 c 0,0.39852 0.322784,0.7213 0.721305,0.7213 h 1.442609 c 0.398521,0 0.721304,-0.32278 0.721304,-0.7213 v -6.49175 h 6.491742 c 0.398521,0 0.721304,-0.32278 0.721304,-0.7213 v -1.4426 c 0,-0.39853 -0.322783,-0.72131 -0.721304,-0.72131 z"
+       id="path3110" />
+    <path
+       style="fill:#43a047;fill-opacity:0.49803922;stroke-width:0.26458332"
+       inkscape:connector-curvature="0"
+       d="m 115.37688,282.24092 h -6.75498 v -6.75496 c 0,-0.8289 -0.67221,-1.50111 -1.5011,-1.50111 h -1.50111 c -0.82889,0 -1.5011,0.67221 -1.5011,1.50111 v 6.75496 h -6.754975 c -0.828892,0 -1.501106,0.67222 -1.501106,1.50111 v 1.50111 c 0,0.82889 0.672214,1.50111 1.501106,1.50111 h 6.754975 v 6.75497 c 0,0.82889 0.67221,1.5011 1.5011,1.5011 h 1.50111 c 0.82889,0 1.5011,-0.67221 1.5011,-1.5011 v -6.75497 h 6.75498 c 0.82889,0 1.5011,-0.67222 1.5011,-1.50111 v -1.50111 c 0,-0.82889 -0.67221,-1.50111 -1.5011,-1.50111 z"
+       id="path3112" />
+    <path
+       id="path3114"
+       d="m 38.898346,183.83124 h -6.491742 v -6.49174 c 0,-0.39852 -0.322783,-0.72131 -0.721304,-0.72131 h -1.442609 c -0.398521,0 -0.721305,0.32279 -0.721305,0.72131 v 6.49174 h -6.491741 c -0.398521,0 -0.721305,0.32278 -0.721305,0.72131 v 1.4426 c 0,0.39852 0.322784,0.7213 0.721305,0.7213 h 6.491741 v 6.49175 c 0,0.39852 0.322784,0.7213 0.721305,0.7213 H 31.6853 c 0.398521,0 0.721304,-0.32278 0.721304,-0.7213 v -6.49175 h 6.491742 c 0.398521,0 0.721304,-0.32278 0.721304,-0.7213 v -1.4426 c 0,-0.39853 -0.322783,-0.72131 -0.721304,-0.72131 z"
+       inkscape:connector-curvature="0"
+       style="fill:#43a047;fill-opacity:0.49803922;stroke-width:0.26458332" />
+  </g>
+</svg>

www/assets/images/bgs/list.svg

@@ -0,0 +1,121 @@
+<?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="500"
+   height="500"
+   viewBox="0 0 132.29166 132.29167"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="list.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="292.10204"
+     inkscape:cy="244.36683"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     borderlayer="true"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1680"
+     inkscape:window-height="1021"
+     inkscape:window-x="1920"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70831)">
+    <rect
+       style="opacity:1;fill:#2196f3;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+       id="rect836"
+       width="132.29167"
+       height="132.29166"
+       x="0"
+       y="164.7083" />
+    <rect
+       style="opacity:1;fill:#1976d2;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+       id="rect1385"
+       width="73.327377"
+       height="10.961308"
+       x="-0.7559486"
+       y="172.72136"
+       ry="1.349375"
+       rx="1.3229166" />
+    <rect
+       rx="1.3229166"
+       ry="1.349375"
+       y="193.88805"
+       x="-0.7559486"
+       height="10.961308"
+       width="73.327377"
+       id="rect1387"
+       style="opacity:1;fill:#1976d2;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+    <rect
+       style="opacity:1;fill:#1976d2;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+       id="rect1389"
+       width="73.327377"
+       height="10.961308"
+       x="-0.7559486"
+       y="215.05473"
+       ry="1.349375"
+       rx="1.3229166" />
+    <rect
+       rx="1.3229166"
+       ry="1.349375"
+       y="236.22142"
+       x="-0.7559486"
+       height="10.961308"
+       width="73.327377"
+       id="rect1391"
+       style="opacity:1;fill:#1976d2;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+    <rect
+       style="opacity:1;fill:#1976d2;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+       id="rect1393"
+       width="73.327377"
+       height="10.961308"
+       x="-0.7559486"
+       y="257.38812"
+       ry="1.349375"
+       rx="1.3229166" />
+    <rect
+       rx="1.3229166"
+       ry="1.349375"
+       y="278.55475"
+       x="-0.7559486"
+       height="10.961308"
+       width="73.327377"
+       id="rect1395"
+       style="opacity:1;fill:#1976d2;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+  </g>
+</svg>

www/assets/images/bgs/notes.svg

@@ -0,0 +1,90 @@
+<?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="500"
+   height="500"
+   viewBox="0 0 132.29166 132.29167"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="notes.svg">
+  <defs
+     id="defs2">
+    <style
+       id="style1751">.fa-secondary{opacity:.4}</style>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="-56.578959"
+     inkscape:cy="244.30241"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     borderlayer="true"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <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,-164.70831)">
+    <rect
+       style="opacity:1;fill:#ffc107;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+       id="rect836"
+       width="132.29167"
+       height="132.29166"
+       x="0"
+       y="164.7083" />
+    <path
+       id="path2052"
+       d="m 53.962878,191.64389 -2.282353,-2.28143 c -1.117763,-1.1178 -2.927083,-1.11798 -4.045098,-4e-5 l -13.448847,13.36096 -1.041616,6.31369 c -0.113353,0.6871 0.481716,1.2823 1.168995,1.16899 l 6.313641,-1.04165 13.361892,-13.44885 c 1.115723,-1.11578 1.126358,-2.91874 -0.02665,-4.07167 z m -15.719584,9.67736 7.214701,-7.16793 3.73962,3.73963 -7.167873,7.2147 v -1.75242 h -2.033993 v -2.03398 z m -1.63194,6.61606 -1.197641,-1.19764 0.51443,-3.11823 0.779697,-0.77471 h 1.762414 v 2.034 h 2.033993 v 1.76237 l -0.774697,0.77974 z m 16.059429,-13.54016 -0.0023,0.002 -0.0023,0.002 -2.035258,2.04857 -3.730258,-3.73026 2.048565,-2.03526 0.0023,-0.002 0.0023,-0.002 c 0.387603,-0.38756 1.016065,-0.39235 1.408372,-4e-5 l 2.282048,2.28205 c 0.418587,0.41854 0.421175,1.04026 0.02664,1.43486 z"
+       inkscape:connector-curvature="0"
+       style="fill:#ffa000;fill-opacity:0.49803922;stroke-width:0.26458332" />
+    <path
+       id="path2161"
+       d="m 94.157277,212.40451 c -5.201424,0 -9.417004,3.4247 -9.417004,7.65131 0,1.82455 0.787202,3.49459 2.096755,4.80782 -0.459815,1.85397 -1.997436,3.50563 -2.015829,3.52403 -0.08093,0.0846 -0.102998,0.20967 -0.05518,0.32002 0.04782,0.11036 0.15082,0.17657 0.268532,0.17657 2.438857,0 4.26708,-1.16977 5.171996,-1.89075 1.20287,0.45245 2.53818,0.71363 3.95073,0.71363 5.20142,0 9.417003,-3.4247 9.417003,-7.65132 0,-4.22661 -4.215583,-7.65131 -9.417003,-7.65131 z"
+       inkscape:connector-curvature="0"
+       style="fill:#ffa000;fill-opacity:0.49803922;stroke-width:0.26458332" />
+    <path
+       id="path2231"
+       d="m 88.388848,268.5164 a 4.649108,4.649108 0 0 0 -4.649107,4.64911 v 6.71537 a 1.0331351,1.0331351 0 0 0 1.033136,1.03314 h 8.265081 v -7.74851 a 4.649108,4.649108 0 0 0 -4.64911,-4.64911 z m 2.58284,5.68224 a 0.51656756,0.51656756 0 0 1 -0.516568,0.51657 h -4.132542 a 0.51656756,0.51656756 0 0 1 -0.516567,-0.51657 v -1.03313 a 0.51656756,0.51656756 0 0 1 0.516567,-0.51657 h 4.132542 a 0.51656756,0.51656756 0 0 1 0.516568,0.51657 z m 6.715373,-5.68224 h -6.041578 c 1.46447,1.02894 2.425608,2.72748 2.425608,4.64911 v 7.74851 h 7.231959 a 1.0331351,1.0331351 0 0 0 1.03313,-1.03314 v -6.71537 a 4.649108,4.649108 0 0 0 -4.649119,-4.64911 z m 2.582849,6.71538 a 0.51656756,0.51656756 0 0 1 -0.516575,0.51656 h -1.03313 a 0.51656756,0.51656756 0 0 1 -0.516574,-0.51656 v -1.5497 h -1.80799 a 0.25828377,0.25828377 0 0 1 -0.25828,-0.25829 v -0.51657 a 0.25828377,0.25828377 0 0 1 0.25828,-0.25828 h 3.357694 a 0.51656756,0.51656756 0 0 1 0.516575,0.51657 z"
+       inkscape:connector-curvature="0"
+       style="fill:#ffa000;fill-opacity:0.49803922;stroke-width:0.26458332" />
+    <path
+       id="path4604"
+       d="m 37.797624,247.63629 c -5.762917,0 -10.432145,4.66922 -10.432145,10.43213 0,5.76292 4.669228,10.43215 10.432145,10.43215 5.762916,0 10.432139,-4.66923 10.432139,-10.43215 0,-5.76291 -4.669223,-10.43213 -10.432139,-10.43213 z m -0.673042,13.79735 c 0,0.37017 -0.302872,0.67303 -0.673042,0.67303 h -2.019121 c -0.370176,0 -0.673048,-0.30286 -0.673048,-0.67303 v -6.73042 c 0,-0.37018 0.302872,-0.67304 0.673048,-0.67304 h 2.019121 c 0.37017,0 0.673042,0.30286 0.673042,0.67304 z m 4.711289,0 c 0,0.37017 -0.302866,0.67303 -0.673042,0.67303 h -2.019121 c -0.370176,0 -0.673042,-0.30286 -0.673042,-0.67303 v -6.73042 c 0,-0.37018 0.302866,-0.67304 0.673042,-0.67304 h 2.019121 c 0.370176,0 0.673042,0.30286 0.673042,0.67304 z"
+       inkscape:connector-curvature="0"
+       style="fill:#ffa000;fill-opacity:0.49803922;stroke-width:0.26458332" />
+  </g>
+</svg>

www/assets/images/bgs/settings.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="500"
+   height="500"
+   viewBox="0 0 132.29166 132.29167"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="settings.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.9899495"
+     inkscape:cx="88.990572"
+     inkscape:cy="234.28819"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     borderlayer="true"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1680"
+     inkscape:window-height="1021"
+     inkscape:window-x="1920"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70831)">
+    <rect
+       style="opacity:1;fill:#607d8b;fill-opacity:0.39215687;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+       id="rect836"
+       width="132.29167"
+       height="132.29166"
+       x="0"
+       y="164.7083" />
+    <path
+       id="path6001"
+       d="M 93.874723,233.42475 H 84.63513 c -5.101024,0 -9.239587,4.13856 -9.239587,9.23958 0,5.10103 4.138563,9.23959 9.239587,9.23959 h 9.239593 c 5.10101,0 9.239577,-4.13856 9.239577,-9.23959 0,-5.10102 -4.138567,-9.23958 -9.239577,-9.23958 z m 0,16.16928 c -3.83058,0 -6.929693,-3.09912 -6.929693,-6.9297 0,-3.83058 3.099113,-6.92969 6.929693,-6.92969 3.83057,0 6.929677,3.09911 6.929677,6.92969 0,3.83058 -3.099107,6.9297 -6.929677,6.9297 z"
+       inkscape:connector-curvature="0"
+       style="fill:#455a64;fill-opacity:0.58823532;stroke-width:0.26458332" />
+    <path
+       id="path6091"
+       d="m 40.688088,212.47296 h -8.705049 c -4.807682,0 -8.705053,3.89737 -8.705053,8.70505 0,4.80768 3.897371,8.70505 8.705053,8.70505 h 8.705049 c 4.807684,0 8.70505,-3.89737 8.70505,-8.70505 0,-4.80768 -3.897366,-8.70505 -8.70505,-8.70505 z m -15.233836,8.70505 c 0,-3.6082 2.919997,-6.52879 6.528787,-6.52879 3.60815,0 6.528788,2.92 6.528788,6.52879 0,3.60815 -2.920002,6.52879 -6.528788,6.52879 -3.608154,0 -6.528787,-2.92 -6.528787,-6.52879 z m 15.233836,6.52879 h -2.947929 c 3.931057,-3.4691 3.930103,-9.58934 0,-13.05758 h 2.947929 c 3.608155,0 6.528789,2.92 6.528789,6.52879 0,3.60815 -2.920002,6.52879 -6.528789,6.52879 z"
+       inkscape:connector-curvature="0"
+       style="fill:#455a64;fill-opacity:0.58823532;stroke-width:0.26458332" />
+    <path
+       id="path6370"
+       d="m 33.462414,268.93401 c 2.762578,0 5.001557,-2.23898 5.001557,-5.00156 0,-2.76258 -2.238979,-5.00156 -5.001557,-5.00156 -2.76258,0 -5.001557,2.23898 -5.001557,5.00156 0,2.76258 2.238977,5.00156 5.001557,5.00156 z m 3.50109,1.25039 h -0.652547 c -0.867458,0.39856 -1.832602,0.62519 -2.848543,0.62519 -1.015942,0 -1.977178,-0.22663 -2.848543,-0.62519 h -0.652547 c -2.89934,0 -5.251635,2.35229 -5.251635,5.25163 v 1.62551 c 0,1.03547 0.840105,1.87558 1.875584,1.87558 h 13.754281 c 1.035479,0 1.875584,-0.84011 1.875584,-1.87558 v -1.62551 c 0,-2.89934 -2.352294,-5.25163 -5.251634,-5.25163 z"
+       inkscape:connector-curvature="0"
+       style="fill:#455a64;fill-opacity:0.58823532;stroke-width:0.26458332" />
+    <path
+       id="path6550"
+       d="m 87.999192,192.91497 c -1.379188,0.0887 -2.630839,0.61396 -3.341058,2.48543 -0.08078,0.21347 -0.275013,0.34307 -0.501555,0.34307 -0.381923,0 -1.562759,-0.9512 -1.899305,-1.18083 3.9e-4,2.8309 1.304247,5.31908 4.400545,5.31908 2.607806,0 4.400201,-1.50466 4.400201,-4.13172 0,-0.10691 -0.02235,-0.20901 -0.03335,-0.31385 z m 9.999111,-10.63405 c -0.52115,0 -1.00964,0.23067 -1.38228,0.56549 -7.026914,6.27717 -7.758103,6.42464 -7.758103,8.27238 0,0.47096 0.111723,0.91992 0.300107,1.33038 l 2.193912,1.82814 c 0.247856,0.0619 0.503274,0.10416 0.769692,0.10416 2.135128,0 3.372682,-1.5631 7.258952,-8.81621 0.2537,-0.49331 0.47784,-1.02614 0.47784,-1.58098 0,-0.99383 -0.89379,-1.70336 -1.86012,-1.70336 z"
+       inkscape:connector-curvature="0"
+       style="fill:#455a64;fill-opacity:0.58823532;stroke-width:0.26458329" />
+  </g>
+</svg>

www/assets/images/bgs/toolbox.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="500"
+   height="500"
+   viewBox="0 0 132.29166 132.29167"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="toolbox.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.9899495"
+     inkscape:cx="88.990572"
+     inkscape:cy="234.28819"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     borderlayer="true"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1680"
+     inkscape:window-height="1021"
+     inkscape:window-x="1920"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70831)">
+    <rect
+       style="opacity:1;fill:#f44336;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+       id="rect836"
+       width="132.29167"
+       height="132.29166"
+       x="0"
+       y="164.7083" />
+    <path
+       id="path4703"
+       d="m 102.53594,267.93476 -2.11907,-2.11907 c -0.28099,-0.28098 -0.662184,-0.4388 -1.059774,-0.4388 h -2.37664 V 261.63 c 0,-1.24146 -1.00638,-2.24785 -2.24785,-2.24785 h -7.492841 c -1.241473,0 -2.247853,1.00639 -2.247853,2.24785 v 3.74643 h -2.376638 c -0.397587,0 -0.77832,0.15781 -1.059771,0.4388 l -2.119067,2.11953 c -0.280984,0.28099 -0.4388,0.66218 -0.4388,1.05977 v 3.87474 h 5.994276 v -0.74928 c 0,-0.41398 0.335302,-0.74929 0.749282,-0.74929 h 1.498571 c 0.41398,0 0.749282,0.33531 0.749282,0.74929 v 0.74928 h 5.994279 v -0.74928 c 0,-0.41398 0.3353,-0.74929 0.74928,-0.74929 h 1.49856 c 0.41398,0 0.74929,0.33531 0.74929,0.74929 v 0.74928 h 5.994274 v -3.87521 c 0,-0.39712 -0.15781,-0.77831 -0.43879,-1.0593 z m -8.552614,-2.55833 h -5.994279 v -2.99714 h 5.994279 z m 2.99713,9.74069 c 0,0.41398 -0.33531,0.74929 -0.74929,0.74929 h -1.49856 c -0.41398,0 -0.74928,-0.33531 -0.74928,-0.74929 v -0.74928 h -5.994279 v 0.74928 c 0,0.41398 -0.335302,0.74929 -0.749282,0.74929 h -1.498571 c -0.41398,0 -0.749282,-0.33531 -0.749282,-0.74929 v -0.74928 h -5.994276 v 4.4957 c 0,0.8275 0.671077,1.49857 1.49857,1.49857 h 20.979964 c 0.82749,0 1.49856,-0.67107 1.49856,-1.49857 v -4.4957 h -5.994274 z"
+       inkscape:connector-curvature="0"
+       style="fill:#d32f2f;fill-opacity:0.49803922;stroke-width:0.26458332" />
+    <path
+       id="path5013"
+       d="m 30.826992,241.84005 h -1.97581 c -0.181117,0 -0.329302,0.14818 -0.329302,0.3293 v 9.87905 c 0,0.18112 0.148185,0.32931 0.329302,0.32931 h 1.97581 c 0.181115,0 0.3293,-0.14819 0.3293,-0.32931 v -9.87905 c 0,-0.18112 -0.148185,-0.3293 -0.3293,-0.3293 z m -1.646509,13.17207 h -3.293016 v -3.29302 c 0,-0.36223 -0.296372,-0.6586 -0.658605,-0.6586 h -1.317206 c -0.362232,0 -0.658604,0.29637 -0.658604,0.6586 v 5.26883 c 0,0.36223 0.296372,0.6586 0.658604,0.6586 h 5.268827 c 0.362233,0 0.658604,-0.29637 0.658604,-0.6586 v -1.31721 c 0,-0.36223 -0.296371,-0.6586 -0.658604,-0.6586 z m 4.280922,-13.17207 h -0.658603 c -0.181116,0 -0.329302,0.14818 -0.329302,0.3293 v 9.87905 c 0,0.18112 0.148186,0.32931 0.329302,0.32931 h 0.658603 c 0.181116,0 0.329301,-0.14819 0.329301,-0.32931 v -9.87905 c 0,-0.18112 -0.148185,-0.3293 -0.329301,-0.3293 z m -9.549749,1.31721 h 1.317206 c 0.362233,0 0.658605,-0.29637 0.658605,-0.6586 v -3.29302 h 3.293016 c 0.362233,0 0.658604,-0.29637 0.658604,-0.6586 v -1.31721 c 0,-0.36223 -0.296371,-0.65861 -0.658604,-0.65861 h -5.268827 c -0.362232,0 -0.658604,0.29638 -0.658604,0.65861 v 5.26883 c 0,0.36223 0.296372,0.6586 0.658604,0.6586 z m 16.135783,-1.31721 h -1.97581 c -0.181116,0 -0.329302,0.14818 -0.329302,0.3293 v 9.87905 c 0,0.18112 0.148186,0.32931 0.329302,0.32931 h 1.97581 c 0.181116,0 0.329303,-0.14819 0.329303,-0.32931 v -9.87905 c 0,-0.18112 -0.148187,-0.3293 -0.329303,-0.3293 z m -3.951621,0 h -0.658602 c -0.181117,0 -0.329302,0.14818 -0.329302,0.3293 v 9.87905 c 0,0.18112 0.148185,0.32931 0.329302,0.32931 h 0.658602 c 0.181117,0 0.329302,-0.14819 0.329302,-0.32931 v -9.87905 c 0,-0.18112 -0.148185,-0.3293 -0.329302,-0.3293 z m 12.842767,-5.26883 h -5.268827 c -0.362232,0 -0.658603,0.29638 -0.658603,0.65861 v 1.31721 c 0,0.36223 0.296371,0.6586 0.658603,0.6586 h 3.293017 v 3.29302 c 0,0.36223 0.296371,0.6586 0.658603,0.6586 h 1.317207 c 0.362232,0 0.658603,-0.29637 0.658603,-0.6586 v -5.26883 c 0,-0.36223 -0.296371,-0.65861 -0.658603,-0.65861 z m 0,14.48928 h -1.317207 c -0.362232,0 -0.658603,0.29637 -0.658603,0.6586 v 3.29302 h -3.293017 c -0.362232,0 -0.658603,0.29637 -0.658603,0.6586 v 1.31721 c 0,0.36223 0.296371,0.6586 0.658603,0.6586 h 5.268827 c 0.362232,0 0.658603,-0.29637 0.658603,-0.6586 v -5.26883 c 0,-0.36223 -0.296371,-0.6586 -0.658603,-0.6586 z m -4.610225,0.9879 v -9.87905 c 0,-0.18112 -0.148185,-0.3293 -0.3293,-0.3293 h -1.975811 c -0.181116,0 -0.329302,0.14818 -0.329302,0.3293 v 9.87905 c 0,0.18112 0.148186,0.32931 0.329302,0.32931 h 1.975811 c 0.181115,0 0.3293,-0.14819 0.3293,-0.32931 z"
+       inkscape:connector-curvature="0"
+       style="fill:#d32f2f;fill-opacity:0.49803922;stroke-width:0.26458332" />
+    <path
+       id="path5093"
+       d="m 108.06784,223.13 -4.15639,-4.15555 c -0.18758,-0.18758 -0.44185,-0.29179 -0.70864,-0.29179 h -0.67946 c 1.1505,-1.47147 1.83413,-3.32186 1.83413,-5.33523 0,-4.78916 -3.88126,-8.66959 -8.670838,-8.66959 -4.789575,0 -8.671257,3.88043 -8.671257,8.66959 0,4.78916 3.881265,8.66959 8.671257,8.66959 2.013373,0 3.864589,-0.68363 5.336058,-1.83413 v 0.67946 c 0,0.26679 0.10421,0.52106 0.2918,0.70864 l 4.15638,4.15555 c 0.39184,0.39184 1.02544,0.39184 1.41311,0 l 1.17967,-1.17968 c 0.39184,-0.39183 0.39184,-1.02502 0.004,-1.41686 z m -12.381198,-3.78081 c -3.315603,0 -6.0026,-2.68199 -6.0026,-6.00176 0,-3.31519 2.682412,-6.00177 6.0026,-6.00177 3.315603,0 6.002598,2.682 6.002598,6.00177 0,3.31519 -2.682409,6.00176 -6.002598,6.00176 z m 8.45e-4,-10.00266 c -1.699903,0 -3.078,1.37768 -3.078,3.07758 0,1.37393 2.011705,3.87877 2.782456,4.78791 a 0.38516689,0.38516689 0 0 0 0.591089,0 c 0.770751,-0.90914 2.782455,-3.41357 2.782455,-4.78791 0,-1.6999 -1.378097,-3.07758 -3.078,-3.07758 z m 0,4.00173 c -0.55274,0 -1.000434,-0.44811 -1.000434,-1.00043 0,-0.55274 0.448112,-1.00044 1.000434,-1.00044 0.552323,0 1.000434,0.4477 1.000434,1.00044 0,0.55232 -0.448111,1.00043 -1.000434,1.00043 z"
+       inkscape:connector-curvature="0"
+       style="fill:#d32f2f;fill-opacity:0.49803922;stroke-width:0.26458332" />
+    <path
+       id="path5593"
+       d="m 56.575279,194.78631 c 0.0079,-0.0753 0.03171,-0.14667 0.03171,-0.22198 0,-1.39932 -1.137686,-2.537 -2.537,-2.537 -0.49947,0 -0.959302,0.15063 -1.351745,0.3964 -0.697674,-1.53806 -2.239693,-2.61628 -4.039376,-2.61628 -2.44979,0 -4.439748,1.98599 -4.439748,4.43975 0,0.11892 0.02775,0.22991 0.03568,0.34487 -1.966173,0.14667 -3.524048,1.77194 -3.524048,3.77775 0,2.10095 1.704545,3.8055 3.805497,3.8055 H 55.33849 c 2.100952,0 3.805498,-1.70455 3.805498,-3.8055 0,-1.66886 -1.078225,-3.06818 -2.568712,-3.58351 z m -17.061317,-0.89587 c -1.732295,-1.7323 -1.732295,-4.54678 0,-6.27512 1.732295,-1.73229 4.546778,-1.73229 6.279072,0 0.384514,0.38452 0.669927,0.82849 0.883986,1.29626 0.388478,-0.14668 0.796776,-0.23785 1.216967,-0.29731 l 1.18129,-3.52405 c 0.158562,-0.47173 -0.289376,-0.9157 -0.7611,-0.7611 l -3.480445,1.16147 -1.645086,-3.28225 c -0.218023,-0.44397 -0.852272,-0.44397 -1.074261,0 l -1.641121,3.28225 -3.484408,-1.16147 c -0.46776,-0.1546 -0.915699,0.29334 -0.7611,0.7611 l 1.16147,3.48044 -3.282243,1.64509 c -0.443975,0.22198 -0.443975,0.85227 0,1.07426 l 3.282243,1.64112 -1.16147,3.48044 c -0.158563,0.47173 0.289377,0.91571 0.7611,0.76111 l 3.01665,-1.00291 c 0.241808,-0.49155 0.554969,-0.93949 0.935518,-1.32796 -0.519292,-0.21406 -1.006871,-0.53119 -1.427062,-0.95137 z m -0.190275,-3.13954 c 0,1.61734 1.16147,2.96512 2.691597,3.26242 0.317125,-0.18631 0.646142,-0.34884 0.998943,-0.46379 0.214059,-1.75609 1.228859,-3.27035 2.671778,-4.16227 -0.523256,-1.15354 -1.684726,-1.96221 -3.032506,-1.96221 -1.835361,0 -3.329812,1.49049 -3.329812,3.32585 z"
+       inkscape:connector-curvature="0"
+       style="fill:#d32f2f;fill-opacity:0.49803922;stroke-width:0.26458332" />
+  </g>
+</svg>

www/assets/js/settings.js

@@ -55,6 +55,11 @@ $('.item-content[data-setting=showhelp] .toggle input').on("change", function ()
     setStorage("show_help", checked);
 });
 
+$('.item-content[data-setting=oldhomeui] .toggle input').on("change", function () {
+    var checked = $(this).prop('checked');
+    setStorage("oldhomeui", checked);
+});
+
 $('.item-link[data-setting=units] select').on("change", function () {
     setStorage("units", $('.item-link[data-setting=units] select').val());
 });

www/pages/home.html

@@ -27,57 +27,39 @@
                     ></div>
             </div>
         </div>
+        {{#if oldui}}
         <div class="list no-hairlines tablet-inset no-margin-top">
             <ul>
+                {{#each pages}}
                 <li>
-                    <a href="/add" class="item-link item-content">
-                        <div class="item-media"><i class="icon fas fa-truck-loading"></i></div>
+                    <a href="{{href}}" class="item-link item-content">
+                        <div class="item-media"><i class="icon {{icon}}"></i></div>
                         <div class="item-inner">
-                            <div class="item-title">Add Items</div>
-                        </div>
-                    </a>
-                </li>
-                <li>
-                    <a href="/list" class="item-link item-content">
-                        <div class="item-media"><i class="icon fas fa-list"></i></div>
-                        <div class="item-inner">
-                            <div class="item-title">Item List</div>
-                        </div>
-                    </a>
-                </li>
-                <li>
-                    <a href="/map" class="item-link item-content">
-                        <div class="item-media"><i class="icon fas fa-map"></i></div>
-                        <div class="item-inner">
-                            <div class="item-title">Delivery Map</div>
-                        </div>
-                    </a>
-                </li>
-                <li>
-                    <a href="/myroute" class="item-link item-content">
-                        <div class="item-media"><i class="icon fas fa-sticky-note"></i></div>
-                        <div class="item-inner">
-                            <div class="item-title">Route Notes</div>
-                        </div>
-                    </a>
-                </li>
-                <li>
-                    <a href="/toolbox" class="item-link item-content">
-                        <div class="item-media"><i class="icon fas fa-tools"></i></div>
-                        <div class="item-inner">
-                            <div class="item-title">Toolbox</div>
-                        </div>
-                    </a>
-                </li>
-                <li>
-                    <a href="/settings" class="item-link item-content">
-                        <div class="item-media"><i class="icon fas fa-cog"></i></div>
-                        <div class="item-inner">
-                            <div class="item-title">Settings</div>
+                            <div class="item-title">{{title}}</div>
                         </div>
                     </a>
                 </li>
+                {{/each}}
             </ul>
         </div>
+        {{else}}
+        <div class="row justify-content-center margin-top">
+            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
+                <div class="row">
+                    {{#each pages}}
+                    <div class="col-50 small-33 large-15">
+                        <div class="card" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
+                            <div class="card-content text-align-center padding-vertical">
+                                <h1 class="no-margin"><i class="{{icon}}"></i></h1>
+                                <br />
+                                <span style="font-weight: 700;">{{title}}</span>
+                            </div>
+                        </div>
+                    </div>
+                    {{/each}}
+                </div>
+            </div>
+        </div>
+        {{/if}}
     </div>
 </div>

www/pages/settings.html

@@ -8,7 +8,7 @@
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
             <div class="left">
-                <a href="#" class="link icon-only back">
+                <a href="#" class="link icon-only" onclick="router.back({force: true, ignoreCache: true})">
                     <i class="icon icon-back"></i>
                 </a>
             </div>

www/routes.js

@@ -5,7 +5,7 @@
  */
 
 var show_help = function () {
-    return localStorage.getItem("show_help") != "false";
+    return getStorage("show_help") != "false";
 }
 
 var routes = [
@@ -24,7 +24,46 @@ var routes = [
                     packageTotal: total,
                     packageLeft: undelivered,
                     packageDelivered: delivered,
-                    packagePercent: percent
+                    packagePercent: percent,
+                    oldui: inStorage("oldhomeui") && getStorage("oldhomeui") == "true",
+                    pages: [
+                        {
+                            title: "Add Items",
+                            href: "/add",
+                            icon: "fas fa-truck-loading",
+                            bg: "add.svg"
+                        },
+                        {
+                            title: "Item List",
+                            href: "/list",
+                            icon: "fas fa-list",
+                            bg: "list.svg"
+                        },
+                        {
+                            title: "Delivery Map",
+                            href: "/map",
+                            icon: "fas fa-map",
+                            bg: "map.svg"
+                        },
+                        {
+                            title: "Route Notes",
+                            href: "/myroute",
+                            icon: "fas fa-sticky-note",
+                            bg: "notes.svg"
+                        },
+                        {
+                            title: "Toolbox",
+                            href: "/toolbox",
+                            icon: "fas fa-tools",
+                            bg: "toolbox.svg"
+                        },
+                        {
+                            title: "Settings",
+                            href: "/settings",
+                            icon: "fas fa-cog",
+                            bg: "settings.svg"
+                        }
+                    ]
                 }
             });
         }
@@ -195,8 +234,8 @@ var routes = [
                         path: '/entries',
                         name: 'entries',
                         async: function (routeTo, routeFrom, resolve, reject) {
-                            if (localStorage.getItem("scanevents") != null && localStorage.getItem("scanevents") != "[]") {
-                                var entries = JSON.parse(localStorage.getItem("scanevents"));
+                            if (getStorage("scanevents") != null && getStorage("scanevents") != "[]") {
+                                var entries = JSON.parse(getStorage("scanevents"));
                                 for (i in entries) {
                                     entries[i].event = entries[i].event.join(' <i class="fas fa-chevron-right"></i> ');
                                 }
@@ -232,7 +271,7 @@ var routes = [
                 path: '/track',
                 name: 'track',
                 async: function (routeTo, routeFrom, resolve, reject) {
-                    var history = localStorage.getItem("trackingcodehistory");
+                    var history = getStorage("trackingcodehistory");
                     if (history == null) {
                         history = false;
                     } else {
@@ -303,8 +342,8 @@ var routes = [
         name: 'settings',
         async: function (routeTo, routeFrom, resolve, reject) {
             var settings = [];
-            if (localStorage.getItem("username") != null && localStorage.getItem("password") != null) {
-                var lastsync = localStorage.getItem("lastsync");
+            if (getStorage("username") != null && getStorage("password") != null) {
+                var lastsync = getStorage("lastsync");
                 if (lastsync == null) {
                     lastsync = "never";
                 } else {
@@ -314,7 +353,7 @@ var routes = [
                         {
                             setting: "account",
                             title: "Account",
-                            text: "Logged in as " + localStorage.getItem("username") + "<br>" + "Last sync: " + lastsync
+                            text: "Logged in as " + getStorage("username") + "<br>" + "Last sync: " + lastsync
                         },
                         {
                             setting: "syncnow",
@@ -364,7 +403,7 @@ var routes = [
                     title: "Keep screen on",
                     text: "Improves GPS accuracy and alert sound reliability, but uses more battery.",
                     toggle: true,
-                    checked: localStorage.getItem("wakelock") == "true",
+                    checked: getStorage("wakelock") == "true",
                     onclick: ""
                 });
             }
@@ -375,7 +414,7 @@ var routes = [
                         title: "Use dark theme",
                         text: "Saves power on phones with OLED screens.",
                         toggle: true,
-                        checked: localStorage.getItem("darktheme") == "true",
+                        checked: getStorage("darktheme") == "true",
                         onclick: ""
                     },
                     {
@@ -383,7 +422,15 @@ var routes = [
                         title: "Show help",
                         text: "Show the <span class=material-icons-intext><i class=material-icons>help</i></span> icons",
                         toggle: true,
-                        checked: localStorage.getItem("show_help") != "false",
+                        checked: getStorage("show_help") != "false",
+                        onclick: ""
+                    },
+                    {
+                        setting: "oldhomeui",
+                        title: "Show home screen as list",
+                        text: "Use a vertical list instead of tiles.",
+                        toggle: true,
+                        checked: getStorage("oldhomeui") == "true",
                         onclick: ""
                     },
                     {
@@ -433,7 +480,7 @@ var routes = [
                             alertsounds.push({
                                 value: id,
                                 label: SETTINGS.alertsounds[id].name,
-                                selected: localStorage.getItem("alertsound") == id
+                                selected: getStorage("alertsound") == id
                             });
                         }
                     }
@@ -452,7 +499,7 @@ var routes = [
                             min: 0,
                             max: 100,
                             step: 1,
-                            value: localStorage.getItem("alertvolume"),
+                            value: getStorage("alertvolume"),
                             slider: true
                         },
                         {
@@ -461,7 +508,7 @@ var routes = [
                             min: 50,
                             max: 500,
                             step: 50,
-                            value: localStorage.getItem("alertradius"),
+                            value: getStorage("alertradius"),
                             slider: true
                         },
                         {
@@ -470,7 +517,7 @@ var routes = [
                             min: 15,
                             max: 120,
                             step: 15,
-                            value: localStorage.getItem("alertinterval") == null ? 30 : localStorage.getItem("alertinterval"),
+                            value: getStorage("alertinterval") == null ? 30 : getStorage("alertinterval"),
                             slider: true
                         }
                     ];
@@ -494,7 +541,7 @@ var routes = [
                             mapstyles.push({
                                 value: id,
                                 label: SETTINGS.maptileurls[id].name,
-                                selected: localStorage.getItem("mapsource") == id
+                                selected: getStorage("mapsource") == id
                             });
                         }
                     }
@@ -515,12 +562,12 @@ var routes = [
                                 {
                                     value: "metric",
                                     label: "Meters/Kilometers",
-                                    selected: localStorage.getItem("units") == "metric"
+                                    selected: getStorage("units") == "metric"
                                 },
                                 {
                                     value: "imperial",
                                     label: "Feet/Miles",
-                                    selected: localStorage.getItem("units") == "imperial"
+                                    selected: getStorage("units") == "imperial"
                                 }
                             ]
                         },
@@ -532,17 +579,17 @@ var routes = [
                                 {
                                     value: 15,
                                     label: "Low",
-                                    selected: localStorage.getItem("trackzoom") == 15
+                                    selected: getStorage("trackzoom") == 15
                                 },
                                 {
                                     value: 16,
                                     label: "Normal",
-                                    selected: localStorage.getItem("trackzoom") == null || localStorage.getItem("trackzoom") == 16
+                                    selected: getStorage("trackzoom") == null || getStorage("trackzoom") == 16
                                 },
                                 {
                                     value: 17,
                                     label: "High",
-                                    selected: localStorage.getItem("trackzoom") == 17
+                                    selected: getStorage("trackzoom") == 17
                                 }
                             ]
                         },
@@ -551,7 +598,7 @@ var routes = [
                             title: "Map Scale Ruler",
                             text: "Show a scale in the corner of the map.",
                             toggle: true,
-                            checked: localStorage.getItem("mapscale") !== "false",
+                            checked: getStorage("mapscale") !== "false",
                             onclick: ""
                         },
                         {
@@ -559,7 +606,7 @@ var routes = [
                             title: "Alternative map",
                             text: "Turn this on if you have problems with the map.",
                             toggle: true,
-                            checked: localStorage.getItem("maptype") == "leaflet",
+                            checked: getStorage("maptype") == "leaflet",
                             onclick: ""
                         }
                     ];