starter

firebase.json

+{
+  "hosting": {
+    "public": "src",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/js/sw.js",
+      "**/node_modules/**"
+    ]
+  }
+}

gulpfile.js

+/**
+ * Copyright 2018 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const gulp = require('gulp');
+const browserSync = require('browser-sync');
+const workboxBuild = require('workbox-build');
+
+// Inject a precache manifest into the service worker
+const buildSw = () => {
+  return workboxBuild.injectManifest({
+    swSrc: 'src/js/sw.js',
+    swDest: 'src/sw.js',
+    globDirectory: 'src',
+    globPatterns: [
+      'index.html',
+      'favicon.ico',
+      'css\/*.css',
+			'js\/*.js',
+			'images\/*.jpg',
+      'images\/**\/*.png',
+      'images\/**\/*.svg'
+    ]
+  }).then(resources => {
+    console.log(`Injected ${resources.count} resources for precaching, ` +
+        `totaling ${resources.size} bytes.`);
+  }).catch(err => {
+    console.log('Uh oh 😬', err);
+  });
+}
+gulp.task('build-sw', buildSw);
+
+// Build the app, run a local dev server, and rebuild on "src" file changes
+const browserSyncOptions = {
+  server: 'src',
+  port: 8080,
+  open: false
+};
+
+const serve = gulp.series('build-sw', () => {
+  browserSync.init(browserSyncOptions);
+  gulp.watch([
+		'src/**/*',
+		'!src/sw.js'
+	], buildSw).on('change', browserSync.reload);
+});
+gulp.task('serve', serve);
+
+// Set the default task to "serve"
+gulp.task('default', serve);

package.json

+{
+  "name": "PWASkeleton",
+  "version": "0.1.0",
+  "description": "PWA Skeleton",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "gulp serve"
+  },
+  "keywords": [
+    "UiTM",
+    "skeleton",
+    "PWA",
+    "training"
+  ],
+  "author": "mohdrafhanmohdamin",
+  "license": "ISC",
+  "devDependencies": {
+    "browser-sync": "^2.26.10",
+    "gulp": "^4.0.2",
+    "workbox-build": "^5.1.3"
+  }
+}

src/css/app.css

+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  font-family: 'Helvetica', 'Verdana', sans-serif;
+  font-weight: 400;
+  font-display: optional;
+  color: #444;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  overflow: hidden;
+}
+
+body {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  background: #ececec;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.header {
+  width: 100%;
+  height: 56px;
+  color: #FFF;
+  background: #3F51B5;
+  position: fixed;
+	left: 0;
+  font-size: 20px;
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);
+  padding: 16px 16px 0 16px;
+  will-change: transform;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
+  transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
+  transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
+  transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s, -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
+  z-index: 1000;
+}
+
+.header__title {
+  font-weight: 400;
+  font-size: 20px;
+  margin: 0;
+  text-align: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.loader {
+  left: 50%;
+  top: 50%;
+  position: fixed;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.loader #spinner {
+  box-sizing: border-box;
+  stroke: #673AB7;
+  stroke-width: 3px;
+  -webkit-transform-origin: 50%;
+  transform-origin: 50%;
+  -webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
+  animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
+}
+
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(450deg);
+    transform: rotate(450deg);
+  }
+}
+
+@keyframes rotate {
+  from {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(450deg);
+    transform: rotate(450deg);
+  }
+}
+
+@-webkit-keyframes line {
+  0% {
+    stroke-dasharray: 2, 85.964;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dasharray: 65.973, 21.9911;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 2, 85.964;
+    stroke-dashoffset: -65.973;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes line {
+  0% {
+    stroke-dasharray: 2, 85.964;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dasharray: 65.973, 21.9911;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 2, 85.964;
+    stroke-dashoffset: -65.973;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+  }
+}
+
+.main {
+  padding-top: 60px;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.dialog-container {
+  background: rgba(0, 0, 0, 0.57);
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, opacity;
+  -webkit-transform: scale(1.15);
+  transform: scale(1.15);
+  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+  transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+}
+
+.dialog-container--visible {
+  z-index: 1001;
+  opacity: 1;
+  pointer-events: auto;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+}
+
+.dialog {
+  background: #FFF;
+  border-radius: 2px;
+  box-shadow: 0 0 14px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.48);
+  min-width: 280px;
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  -webkit-transform: translate(-50%, -50%) translateY(30px);
+  transform: translate(-50%, -50%) translateY(30px);
+  -webkit-transition: -webkit-transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
+  transition: -webkit-transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
+  transition: transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
+  transition: transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s, -webkit-transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
+}
+
+.dialog>div {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.dialog-title {
+  padding-top: 20px;
+  font-size: 1.25em;
+}
+
+.dialog-body {
+  padding-top: 20px;
+  padding-bottom: 24px;
+}
+
+.dialog-body select {
+  width: 100%;
+  font-size: 2em;
+}
+
+.dialog-buttons {
+  padding: 8px !important;
+  float: right;
+}
+
+.fs-message {
+  background: black;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, opacity;
+  -webkit-transform: scale(1.15);
+  transform: scale(1.15);
+  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+  transition: transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+}
+
+/* effect: see through */
+@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+  .fs-message {
+      background-color: rgba(0,0,0,.6);
+      -webkit-backdrop-filter: brightness(1.5) blur(7px);
+      backdrop-filter: brightness(1.5) blur(7px);
+  }
+}
+
+.fs-message--visible {
+	z-index: 1003;
+	opacity: 1;
+	pointer-events: auto;
+	-webkit-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+}
+
+.fms-container {
+	color: white;
+	text-align: center;
+  min-width: 280px;
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  -webkit-transform: translate(-50%, -50%) translateY(30px);
+  transform: translate(-50%, -50%) translateY(30px);
+  -webkit-transition: -webkit-transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
+  transition: -webkit-transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
+  transition: transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
+  transition: transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s, -webkit-transform 0.333s cubic-bezier(0, 0, 0.21, 1) 0.05s;
+}
+
+.fsm-title {
+	font-size: 15pt;
+  padding-bottom: 1vh;
+}
+
+.fsm-footer {
+	margin-top: 35px;
+}
+
+button, .button {
+	position: relative;
+	font-size: smaller;
+	line-height: 20px;
+  min-width: 88px;
+	margin: 0 5px;
+	font-weight: 500;
+	letter-spacing: .3px;
+	background: #1a73e8;
+	border: 1px solid transparent;
+	padding: 7px 20px;
+	text-align: center;
+	vertical-align: middle;
+  overflow: hidden;
+  cursor: pointer;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	color: white;
+	outline: none;
+	-webkit-transition: all .15s ease-in;
+  transition: all .15s ease-in;
+}
+
+button:hover, button:focus, .button:hover, .button:focus {
+  opacity: .9;
+}
+
+.card {
+  padding: 14px;
+  position: relative;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 2px;
+  margin: 10px 15px 10px 15px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.menu {
+  width: 280px;
+  height: 100%;
+  background: #fff;
+  position: fixed;
+	left: 0;
+  top: 0;
+  bottom: 0;
+  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.4);
+  z-index: 1;
+  -webkit-transition: transform 0.3s cubic-bezier(0, 0, 0.30, 1);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.30, 1);
+  transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.30, 1);
+  transition: transform 0.3s cubic-bezier(0, 0, 0.30, 1);
+  transition: transform 0.3s cubic-bezier(0, 0, 0.30, 1), -webkit-transform 0.3s cubic-bezier(0, 0, 0.30, 1);
+  -webkit-transform: translateX(-110%);
+  transform: translateX(-110%);
+  will-change: transform;
+  z-index: 1002;
+}
+
+.menu--show {
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.menu__overlay {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  -webkit-transition: opacity 0.15s cubic-bezier(0, 0, 0.30, 1);
+  transition: opacity 0.15s cubic-bezier(0, 0, 0.30, 1);
+  visibility: hidden;
+  opacity: 0;
+  z-index: 1001;
+}
+
+.menu__overlay--show {
+  visibility: visible;
+  opacity: 1;
+}
+
+.menu__header {
+  height: 150px;
+  /*background: #3F51B5;*/
+  color: #fff;
+  /*border-bottom: 1px solid #ddd;*/
+}
+
+.menu__list {
+  width: inherit;
+  height: inherit;
+  overflow: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  list-style: none;
+  padding-left: 20px;
+}
+
+.menu__list li a {
+  padding: 13px 0px 13px 20px;
+  color: rgba(0, 0, 0, 0.87);
+  cursor: pointer;
+  display: block;
+  text-decoration: none;
+}
+
+.menu__list li:nth-child(1) {
+  background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMCA1MTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMCA1MTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iaG9tZSI+CgkJPHBvbHlnb24gcG9pbnRzPSIyMDQsNDcxLjc1IDIwNCwzMTguNzUgMzA2LDMxOC43NSAzMDYsNDcxLjc1IDQzMy41LDQ3MS43NSA0MzMuNSwyNjcuNzUgNTEwLDI2Ny43NSAyNTUsMzguMjUgMCwyNjcuNzUgICAgIDc2LjUsMjY3Ljc1IDc2LjUsNDcxLjc1ICAgIiBmaWxsPSIjOTQ5NDk0Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==) no-repeat left center;
+  padding: 0 0 0 12px;
+}
+
+.menu__list li:nth-child(2) {
+  background: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzk0OTQ5NCIgd2lkdGg9IjE4cHgiIGhlaWdodD0iMThweCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOCAySDZjLTEuMSAwLTIgLjktMiAydjE2YzAgMS4xLjkgMiAyIDJoMTJjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnpNNiA0aDV2OGwtMi41LTEuNUw2IDEyVjR6Ii8+PC9zdmc+) no-repeat left center;
+  padding: 0 0 0 12px;
+	background-position-x: -1px;
+}
+
+.menu__list li:nth-child(3) {
+  background: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzk0OTQ5NCIgd2lkdGg9IjE4cHgiIGhlaWdodD0iMThweCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOCAySDZjLTEuMSAwLTIgLjktMiAydjE2YzAgMS4xLjkgMiAyIDJoMTJjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnpNNiA0aDV2OGwtMi41LTEuNUw2IDEyVjR6Ii8+PC9zdmc+) no-repeat left center;
+  padding: 0 0 0 12px;
+	background-position-x: -1px;
+}
+
+.menu__list li:nth-child(4) {
+  background: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzk0OTQ5NCIgd2lkdGg9IjE4cHgiIGhlaWdodD0iMThweCI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xOCAySDZjLTEuMSAwLTIgLjktMiAydjE2YzAgMS4xLjkgMiAyIDJoMTJjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnpNNiA0aDV2OGwtMi41LTEuNUw2IDEyVjR6Ii8+PC9zdmc+) no-repeat left center;
+  padding: 0 0 0 12px;
+}
+
+.menu__list li:nth-child(5) {
+  background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQwOCA0MDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwOCA0MDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ic3luYy1ncmVlbiI+CgkJPHBhdGggZD0iTTAsMjA0YzAsNTYuMSwyMi45NSwxMDcuMSw2MS4yLDE0Mi44TDAsNDA4aDE1M1YyNTVsLTU2LjEsNTYuMUM2OC44NSwyODUuNiw1MSwyNDcuMzUsNTEsMjA0ICAgIGMwLTY2LjMsNDMuMzUtMTIyLjQsMTAyLTE0NS4zNXYtNTFDNjYuMywzMC42LDAsMTA5LjY1LDAsMjA0eiBNNDA4LDBIMjU1djE1M2w1Ni4xLTU2LjFDMzM5LjE1LDEyMi40LDM1NywxNjAuNjUsMzU3LDIwNCAgICBjMCw2Ni4zLTQzLjM1LDEyMi40LTEwMiwxNDUuMzVWNDAyLjljODYuNy0yMi45NSwxNTMtMTAyLDE1My0xOTYuMzUxYzAtNTYuMS0yMi45NS0xMDcuMS02MS4yLTE0Mi44TDQwOCwweiIgZmlsbD0iIzk0OTQ5NCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat left center;
+  padding: 0 0 0 12px;
+}
+
+.menu__list li:nth-child(6) {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA9UlEQVQ4je1UMU4DMRCcsSK3ID5ABJT8IeEl0KQ6ubmHXOO7Kg28hAtfgJIUfAAlrQuGxodsxwUSlDeSZe3s7OxuYRMFvPdrklsAN2WuwJ7kpmma55RkGnRdd2Gt3QM4j9STpMesgHwAcB/DYwjhqm3bzym/SMXW2tvEDJKWANapRtKS/JnjLNa8VA0lGZKQtEvozDDqdnHalSST5halGACccycmNfR9r5IzNeFfMBvOhrPhb1B9y9778V8MSX7Fe5XQH9OfGP/Cy1rNhGzlEMIbgGPR9ABgjOdQ5owxr1mDcuRhGO4kbQFcn+yT413Sxjk3puQ36+RN5C2iKacAAAAASUVORK5CYII=) no-repeat left center;
+  background-position-x: -2px;
+  padding: 0 0 0 12px;
+}
+
+.menu__list li a:active,
+.menu__list li a:hover {
+  /**background: #e7e7e7;*/
+}
+
+.toast__container {
+  position: absolute;
+  /**z-index: 101;**/
+  z-index: 1003;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.toast__msg {
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 3px;
+  -webkit-box-shadow: 0 0 5px black;
+  -moz-box-shadow: 0 0 5px black;
+  box-shadow: 0 0 5px black;
+  color: #fff;
+  /**line-height: 20px;*/
+  padding: 10px 10px 10px 15px;
+  -webkit-transition: opacity 200ms, transform 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+  transition: opacity 200ms, transform 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
+  white-space: nowrap;
+  opacity: 0;
+  transform: translateY(20px);
+  will-change: transform;
+  position: relative;
+  left: 10px;
+  bottom: 10px;
+  margin-top: 5px;
+  display: table;
+  font-size: 0.9em;
+}
+
+.toast__msg--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.logo {
+  display: block;
+  text-align: center;
+  padding-top: 24px;
+}
+
+.version {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  margin-bottom: 10px;
+  font-size: 0.8em;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.view {
+  will-change: transform;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
+}
+
+.page {
+  padding-top: 56px;
+}
+
+/* page */
+.page0 {
+  min-height: 570px;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.page1, .page2, .page3 {
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.page1 {
+	display: table;
+}
+
+.page1 .page {
+	height: 100%;
+}
+
+.page2 .page {
+	height: 100%;
+}
+
+.page3 .page {
+	height: 100%;
+}
+
+/** hide all except page1 **/
+.switch-page1 .page0,
+.switch-page1 .page2,
+.switch-page1 .page3,
+/** hide all except page2 **/
+.switch-page2 .page0,
+.switch-page2 .page1,
+.switch-page2 .page3,
+/** hide all except page3 **/
+.switch-page3 .page0,
+.switch-page3 .page1,
+.switch-page3 .page2
+{
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+	display: none;
+}
+/** show the page **/
+.switch-page1 .page1,
+.switch-page2 .page2,
+.switch-page3 .page3
+{
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.list li {
+  box-sizing: border-box;
+  line-height: 50px;
+  padding: 0 30px;
+  border-bottom: 1px solid #CCC;
+  background: linear-gradient(to bottom, #FFF, #FAFAFA);
+}
+
+.bttn {
+  cursor: pointer;
+}
+
+#news {
+  /*position: absolute;
+  bottom: 0;*/
+	position: static;
+  z-index: -1;
+  padding: 10px 15px 10px;
+  font-size: 0.8em;
+  text-align: center;
+  font-weight: 600;
+  background-color: #666;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: rgba(255,255,255,.5) 0 3px 3px;
+}
+
+.wrapper {
+  margin: auto 13px;
+  text-align: center;
+}
+
+#web-push-toggle {
+	display: inline-flex;
+	display: -webkit-inline-flex;
+	display: -ms-inline-flexbox;
+}
+
+input#toggle {
+  max-height: 0;
+  max-width: 0;
+  opacity: 0;
+}
+
+input#toggle + label {
+  display: inline-block;
+  position: relative;
+  box-shadow: inset 0 0 0px 1px #d5d5d5;
+  text-indent: -5000px;
+  height: 30px;
+  width: 50px;
+  border-radius: 15px;
+}
+
+input#toggle + label:before {
+  content: "";
+  position: absolute;
+  display: block;
+  height: 30px;
+  width: 30px;
+  top: 0;
+  left: 0;
+  border-radius: 15px;
+  background: rgba(19, 191, 17, 0);
+  -moz-transition: .25s ease-in-out;
+  -webkit-transition: .25s ease-in-out;
+  transition: .25s ease-in-out;
+}
+
+input#toggle + label:after {
+  content: "";
+  position: absolute;
+  display: block;
+  height: 30px;
+  width: 30px;
+  top: 0;
+  left: 0px;
+  border-radius: 15px;
+  background: white;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
+  -moz-transition: .25s ease-in-out;
+  -webkit-transition: .25s ease-in-out;
+  transition: .25s ease-in-out;
+}
+
+input#toggle:checked + label:before {
+  width: 50px;
+  background: #13bf11;
+}
+
+input#toggle:checked + label:after {
+  left: 20px;
+  box-shadow: inset 0 0 0 1px #13bf11, 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.disabled {
+  color: #b7b7b7 !important;
+}
+
+.cardbox {
+	background: #fff;
+	border-radius: 7px;
+	min-height: 50px;
+	width: 93vw;
+	margin: 1rem auto;
+	position: relative;
+}
+
+.box-1 {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.box-2 {
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+.cardbox .box-header {
+	padding: 10px 10px 5px 10px;
+  font-weight: 700;
+	border-bottom: 1px #eee solid;
+}
+
+.cardbox .box-header .box-subheader {
+	font-size: small;
+  color: darkgrey;
+}
+
+.cardbox .box-body {
+	padding: 15px 10px 15px 10px;
+}
+
+.cardbox .box-footer {
+	border-top: 1px #eee solid;
+	padding: 10px;
+	border-radius: 0 0 2px 2px;
+}
+
+.cardbox .box-footer.pull-right {
+	justify-content: flex-end;
+}
+
+.cardbox .box-header, .cardbox .box-footer {
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-box-pack: justify;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	min-height: 3rem;
+}
+
+.cardbox.card-primary {
+	border-left: 6px solid #3c8dbc;
+}
+
+.cardbox.card-success {
+	border-left: 6px solid #00a65a;
+}
+
+.cardbox.card-danger {
+	border-left: 6px solid #dd4b39;
+}
+
+.cardbox.card-default {
+	border-left: 6px solid #d2d6de;
+}
+
+.cardbox.card-warning {
+	border-left: 6px solid #f39c12;
+}
+
+.cardbox.card-info {
+	border-left: 6px solid #00c0ef;
+}
+
+.badge {
+	border-radius: 13px;
+	padding: 4px 6px;
+	color: white;
+	min-width: 30px;
+	text-align: center;
+	font-size: small;
+}
+
+.badge.badge-danger {
+	background-color: red;
+}
+
+.pwahomescreen {
+	background-color: #8131b8;
+  color: white;
+	position: relative;
+	overflow: hidden;
+}
+
+.pwahomescreen .box-body {
+	padding: 15px 15px 10px 15px;
+	display: flex;
+}
+
+.pwahomescreen .box-footer {
+	padding: 10px 15px;
+}
+
+.pwahomescreen .pwa-logo {
+	background: url(/images/icons/icon-96x96.png) center no-repeat;
+  background-size: contain;
+  width: 65px;
+	height: 65px;
+	display: inline-block;
+}
+
+/**
+ * The "shine" element
+ */
+.pwahomescreen:after {
+	animation: shine 5s ease-in-out  infinite;
+  animation-fill-mode: forwards;  
+  content: "";
+	pointer-events: none;
+  position: absolute;
+  top: -110%;
+  left: -210%;
+  width: 300%;
+  height: 200%;
+  opacity: 0;
+  transform: rotate(30deg);
+
+  background: rgba(255, 255, 255, 0.13);
+  background: linear-gradient(
+    to right, 
+    rgba(255, 255, 255, 0.13) 0%,
+    rgba(255, 255, 255, 0.13) 77%,
+    rgba(255, 255, 255, 0.5) 92%,
+    rgba(255, 255, 255, 0.0) 100%
+  );
+}
+
+@keyframes shine{
+  10% {
+    opacity: 1;
+    top: -30%;
+    left: -30%;
+    transition-property: left, top, opacity;
+    transition-duration: 0.5s, 0.5s, 0.15s;
+    transition-timing-function: ease;
+  }
+  100% {
+    opacity: 0;
+    top: -30%;
+    left: -30%;
+    transition-property: left, top, opacity;
+  }
+}
+
+.pwahomescreen .pwa-text {
+	display: table;
+	position: absolute;
+	height: 70px;
+	padding-left: 75px;
+}
+
+.pwahomescreen .pwa-text .pwa-middle {
+	display: table-cell;
+  vertical-align: middle;
+}
+
+.pwahomescreen .pwa-header {
+	font-size: 11pt;
+}
+
+.pwahomescreen .pwa-subheader {
+	font-size: 10pt;
+	color: lightgray;
+	margin: 5px 0;
+}
+
+.pwahomescreen .box-footer {
+	-webkit-box-pack: end;
+	justify-content: flex-end;
+	-webkit-box-align: end;
+
+	border-top: none;
+}
+
+.pwahomescreen .box-footer #installpwa {
+	background-color: white;
+	color: #8131b8;
+	padding: 5px 12px;
+	border-radius: 13px;
+	width: 68px;
+	font-size: 11pt;
+	font-weight: 600;
+	text-align: center;
+	margin-left: 30px;
+	border: none;
+	outline: none;
+	cursor: pointer;
+}
+
+.pwahomescreen .box-footer #noinstallpwa {
+	border: none;
+	outline: none;
+	font-size: 11pt;
+	color: #d3d3d3;
+	background: none;
+	cursor: pointer;
+	box-shadow: none;
+}
+
+.ripple:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background-color: currentColor;
+  visibility: hidden;
+  z-index: 2;
+	pointer-events: none;
+}
+
+.ripple:not(:hover):before, .ripple:not(:active):before
+{
+	visibility: visible;
+}
+
+.ripple:hover:before, .ripple:active:before
+{
+	-webkit-animation: ripple 0.7s cubic-bezier(0, 0, 0, 1) 3;
+          animation: ripple 0.7s cubic-bezier(0, 0, 0, 1) 3;
+  -webkit-transition: visibility .7s step-end;
+  transition: visibility .7s step-end;
+}
+
+@-webkit-keyframes ripple {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: .5;
+  }
+  100% {
+    width: 150px;
+    height: 150px;
+    opacity: 0;
+  }
+}
+ 
+@keyframes ripple {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: .5;
+  }
+  100% {
+    width: 150px;
+    height: 150px;
+    opacity: 0;
+  }
+}
+
+/** FLOATING FORM **/
+/* Chrome, Safari, Edge, Opera */
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.floating-form {
+  max-width: 93vh;
+  padding-top: 15px;
+
+	font-family: "Helvetica Neue", Helvetica, "Noto Sans", sans-serif, Arial, sans-serif;
+	font-size: 12px;
+	line-height: 1.42857143;
+	color: #949494;
+}
+
+.floating-form .floating-label { 
+  position:relative; 
+  margin-bottom:20px; 
+}
+
+.floating-form .floating-select {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+.floating-form .floating-input, .floating-form .floating-select {
+	/**text-transform: capitalize;**/
+  font-size:15px;
+  padding:4px 4px 0px 4px;
+  display:block;
+  width:100%;
+  height:30px;
+  background-color: transparent;
+  border:none;
+  border-bottom:1px solid #ececec;
+
+	-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
+  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
+  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 95%, #5264AE 4%);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 95%, #5264AE 4%);
+  background-position: -1000px 0;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.floating-form .floating-input:focus , .floating-form .floating-select:focus {
+  outline:none;
+	box-shadow: none;
+	background-position: 0 0;
+}
+
+.floating-form label {
+  color:#999; 
+  font-size:14px;
+  font-weight:normal;
+  position:absolute;
+  pointer-events:none;
+  left:5px;
+  top:5px;
+  transition:0.2s ease all; 
+  -moz-transition:0.2s ease all; 
+  -webkit-transition:0.2s ease all;
+}
+
+.floating-form .floating-input:focus ~ label, .floating-form .floating-input:not(:placeholder-shown) ~ label {
+  top:-18px;
+  font-size:14px;
+  color:#5264AE;
+}
+
+.floating-form .floating-select:focus ~ label , .floating-form .floating-select:not([value=""]):valid ~ label {
+  top:-18px;
+  font-size:14px;
+  color:#5264AE;
+}
+
+/* active state */
+.floating-form .floating-input:focus ~ .bar:before, .floating-form .floating-input:focus ~ .bar:after, .floating-form .floating-select:focus ~ .bar:before, .floating-form .floating-select:focus ~ .bar:after {
+  width:50%;
+}
+
+.floating-form .floating-textarea {
+  min-height: 30px;
+  max-height: 260px;
+  overflow: hidden;
+  overflow-x: hidden;
+
+	font-family: unset;
+}
+/** FLOATING FORM **/
+
+.segment-text {
+	margin-top: 15px;
+	text-align: center;
+	width: 100%;
+	font-weight: 600;
+	background-color: #666;
+	-webkit-background-clip: text;
+	-moz-background-clip: text;
+	background-clip: text;
+	color: transparent;
+	text-shadow: rgba(255,255,255,.5) 0 3px 3px;
+}
+
+.testform .box-body {
+	text-align: center;
+  text-align: -webkit-center;
+}

src/images/logoUiTM.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 223.1 99" style="enable-background:new 0 0 223.1 99;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#002E6E;}
+	.st2{fill:#8C3392;}
+	.st3{fill:#FEBE10;}
+	.st4{fill:#515254;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M82,59.3c0-0.4,0.1-0.9,0.1-1.3c0-0.4-0.1-0.9-0.1-1.3v-51H9.7v51c0,0.4-0.1,0.9-0.1,1.3c0,0.4,0,0.9,0.1,1.3
+			v0.9h0.1C11,78.7,26.7,93.3,45.9,93.3S80.8,78.7,82,60.2h0.1v-0.9H82z"/>
+		<rect x="11.4" y="8" class="st1" width="68.8" height="51.6"/>
+		<path class="st2" d="M45.8,91c19,0,34.4-15,34.4-33.5S64.8,24,45.8,24S11.3,39,11.3,57.5C11.4,76,26.8,91,45.8,91z"/>
+		<polyline class="st3" points="45.6,61.7 45.6,61.7 52.1,66 45.6,70 		"/>
+		<polygon class="st3" points="24.9,39 45.7,49.1 66.7,39 45.7,46 		"/>
+		<polygon class="st3" points="24.9,34.7 45.7,44.7 66.7,34.7 45.7,41.7 		"/>
+		<path class="st3" d="M45.7,54L25,46.5v-3.7l20.7,7.4c21-7.3,21-7.4,21-7.4v3.7L45.7,54z"/>
+		<polygon class="st3" points="24.9,30.2 45.7,40.3 66.7,30.2 45.7,37.2 		"/>
+		<polygon class="st3" points="24.9,25.9 45.7,36 66.7,25.9 45.7,32.9 		"/>
+		<polygon class="st3" points="24.9,21.4 45.7,31.5 66.7,21.4 45.7,28.5 		"/>
+		<polygon class="st3" points="24.9,18.5 24.9,18.5 45.7,24.9 66.7,18.5 45.7,11.4 		"/>
+		<path class="st0" d="M60.7,61.1l0.4-2l5.5-1.7l2.6,0.6l3.8,2.7l-0.2,0.5l0.9,2.3l-2.2,2.4L68.7,62l-2.3-1L65,62.3l-1.3,0.5
+			c0,0,0.2,0.7-0.4,0.9L61.6,63l2.9,4.3c0,0-3.6-3.1-11.3,1.4c0,0-3.7,3-8.4,4.3c0,0-3.5,0.6-7.5,3.8c-3.9,3.1-10.4,4.5-14.4,6.1
+			c0,0,6.4-5.1,8.7-6c0,0,2.5-1.2,5.5-3.4c3.6-2.7,5.8-3.3,8.1-3.9c0,0,3.2-1,6.3-4c0,0,2.9-1.6,3.5-2.2c0,0,1-1.3,1.9-3.3l0.3,1.1
+			c0,0,1.8-2,1.3-3.3L60.7,61.1z"/>
+		<path class="st0" d="M30,61.1l-0.4-2l-5.5-1.7L21.5,58l-3.7,2.7l0.2,0.5l-0.9,2.3l2.2,2.4l2.8-3.9l2.3-1l1.4,1.3l1.3,0.5
+			c0,0-0.2,0.7,0.4,0.9l1.7-0.7l-2.9,4.3c0,0,3.6-3.1,11.3,1.4c0,0,3.7,3,8.4,4.3c0,0,3.5,0.6,7.5,3.8c3.9,3.1,10.3,5.2,14.3,6.9
+			c0,0-6.3-5.8-8.6-6.8c0,0-2.5-1.2-5.5-3.4c-3.6-2.7-5.8-3.3-8.1-3.9c0,0-3.2-1-6.4-4c0,0-2.9-1.6-3.5-2.2c0,0-1-1.3-1.9-3.3
+			l-0.3,1.1c0,0-1.8-2-1.3-3.3L30,61.1z"/>
+		<path class="st0" d="M76,74L32.4,51.9h-8.9l50.4,25.4C73.9,77.4,75.2,75.7,76,74z"/>
+		<path class="st0" d="M17.4,76.5L68.2,52h-8.9L15.2,73.2C15.3,73.2,17,76.3,17.4,76.5z"/>
+	</g>
+	<g>
+		<g>
+			<path class="st4" d="M92.3,31.1h5.2v1h-0.3c-0.4,0-0.7,0-0.9,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c-0.1,0.2-0.1,0.6-0.1,1.1v7.2
+				c0,1.3,0.1,2.2,0.4,2.8s0.7,1.1,1.3,1.6c0.6,0.4,1.3,0.6,2,0.6c0.8,0,1.5-0.2,2.1-0.7c0.7-0.5,1.1-1,1.4-1.6s0.4-1.6,0.4-2.9
+				v-6.9c0-0.5,0-0.9-0.1-1.1c-0.1-0.2-0.2-0.4-0.4-0.5c-0.2-0.1-0.4-0.2-0.8-0.2h-0.3v-1h4.5v1h-0.3c-0.5,0-0.9,0.1-1,0.3
+				c-0.2,0.2-0.3,0.7-0.3,1.3v7.3c0,1.3-0.2,2.4-0.7,3.3c-0.4,0.9-1,1.6-1.9,2.1c-0.8,0.5-1.8,0.8-2.8,0.8s-2-0.3-2.8-0.8
+				s-1.5-1.2-1.9-2s-0.6-1.8-0.6-3v-7.8c0-0.5,0-0.9-0.1-1.1c-0.1-0.2-0.2-0.4-0.3-0.5c-0.2-0.1-0.4-0.1-0.8-0.1h-0.5v-0.7H92.3z"/>
+			<path class="st4" d="M107.9,33.5h4.2l6.1,10.2v-7.8c0-0.5,0-0.8-0.1-1s-0.2-0.4-0.4-0.5c-0.2-0.1-0.4-0.2-0.8-0.2h-0.3v-0.8h4.5
+				v0.8h-0.2c-0.4,0-0.7,0-0.8,0.1c-0.2,0.1-0.3,0.3-0.5,0.5c-0.1,0.2-0.1,0.6-0.1,1v11.1h-1.2l-7.4-12.2v9.7c0,0.5,0,0.9,0.1,1
+				c0,0.2,0.1,0.3,0.2,0.4c0.1,0.1,0.3,0.2,0.4,0.3c0.2,0.1,0.5,0.1,1,0.1V47h-4.7v-0.8h0.2c0.5,0,0.8,0,0.9-0.1
+				c0.2-0.1,0.3-0.2,0.4-0.5c0.1-0.2,0.1-0.6,0.1-1.1v-8.6c0-0.5,0-0.9,0-1c-0.1-0.2-0.2-0.4-0.3-0.5c-0.2-0.1-0.5-0.1-1-0.1h-0.3
+				V33.5z"/>
+			<path class="st4" d="M122.6,33.5h5.1v0.8h-0.4c-0.4,0-0.6,0.1-0.8,0.2c-0.2,0.1-0.3,0.3-0.4,0.4c-0.1,0.2-0.1,0.6-0.1,1.1v8.8
+				c0,0.4,0,0.7,0.1,0.9s0.2,0.3,0.3,0.4c0.1,0.1,0.4,0.1,0.8,0.1h0.4V47h-5.1v-0.8h0.4c0.4,0,0.7,0,0.8-0.1
+				c0.2-0.1,0.3-0.2,0.3-0.4c0.1-0.1,0.1-0.5,0.1-0.9v-8.9c0-0.5,0-0.9-0.1-1c-0.1-0.2-0.2-0.3-0.3-0.4c-0.1-0.1-0.4-0.1-0.8-0.1
+				h-0.4v-0.9H122.6z"/>
+			<path class="st4" d="M128.5,33.5h4.9v0.8H133c-0.4,0-0.6,0-0.7,0s-0.2,0.1-0.3,0.2c-0.1,0.1-0.1,0.2-0.1,0.3
+				c0,0.2,0.1,0.4,0.2,0.8l3.6,9.4l3.6-9.4c0.1-0.3,0.2-0.6,0.2-0.8s-0.1-0.3-0.2-0.4c-0.1-0.1-0.4-0.1-0.8-0.1H138v-0.8h4.2v0.8
+				c-0.4,0-0.6,0-0.8,0.1c-0.2,0.1-0.3,0.2-0.4,0.3c-0.1,0.2-0.3,0.5-0.5,0.9L135.9,47h-1.4l-4.6-11.4c-0.2-0.4-0.3-0.6-0.3-0.7
+				c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.2-0.1-0.4-0.2c-0.2,0-0.4-0.1-0.7-0.1v-0.8H128.5z"/>
+			<path class="st4" d="M143.3,33.5h11l1.4,3.6l-0.9,0.3c-0.2-0.6-0.4-1.1-0.7-1.4c-0.3-0.3-0.6-0.6-0.9-0.9
+				c-0.3-0.2-0.7-0.4-1.1-0.5s-1-0.1-2-0.1h-3.2v5h1.6c0.6,0,1.1-0.1,1.4-0.3s0.5-0.5,0.6-0.8c0.1-0.2,0.1-0.6,0.1-1.2V37h0.9v6
+				h-0.9v-0.5c0-0.5,0-0.8-0.1-1s-0.2-0.4-0.4-0.6c-0.2-0.2-0.4-0.3-0.6-0.4c-0.2-0.1-0.6-0.1-1.1-0.1h-1.5v4.4c0,0.5,0,0.7,0.1,0.8
+				c0,0.1,0.1,0.2,0.2,0.2s0.3,0.1,0.8,0.1h2c1.1,0,2-0.1,2.7-0.4c0.6-0.3,1.2-0.7,1.7-1.2c0.4-0.4,0.8-1.1,1.1-1.8l0.9,0.3
+				l-1.5,4.2h-11.4v-0.8h0.4c0.5,0,0.7,0,0.9-0.1c0.2-0.1,0.3-0.2,0.4-0.4c0.1-0.1,0.1-0.4,0.1-0.8v-9.4c0-0.4,0-0.7-0.1-0.8
+				s-0.2-0.2-0.4-0.3c-0.1,0-0.5-0.1-1.2-0.1v-0.8H143.3z"/>
+			<path class="st4" d="M157.6,33.5h7c1.3,0,2.3,0.1,3,0.4c0.7,0.3,1.2,0.7,1.6,1.2s0.5,1.1,0.5,1.8s-0.2,1.3-0.5,1.9
+				c-0.4,0.6-0.9,1-1.5,1.3c-0.7,0.3-1.5,0.5-2.7,0.5l3.5,4.4c0.3,0.4,0.5,0.6,0.6,0.7c0.2,0.2,0.5,0.3,0.7,0.5
+				c0.3,0.1,0.5,0.2,0.8,0.2h0.2v0.8h-3.1l-4.9-6.5h-1.7v4.2c0,0.5,0,0.7,0,0.8c0.1,0.2,0.2,0.4,0.3,0.5c0.1,0.1,0.5,0.1,0.9,0.1
+				h0.3v0.8h-5.2v-0.8h0.5c0.3,0,0.6,0,0.7-0.1s0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.3,0.2-0.4c0-0.1,0-0.4,0-1v-8.9c0-0.4,0-0.7-0.1-0.8
+				c-0.1-0.2-0.2-0.3-0.3-0.4c-0.2-0.1-0.4-0.1-0.7-0.1h-0.6v-0.9 M161.1,34.5v5.1h2.8c0.9,0,1.6-0.1,2-0.2c0.5-0.2,1-0.4,1.3-0.9
+				c0.3-0.4,0.5-0.9,0.5-1.6c0-0.5-0.1-1-0.3-1.4c-0.2-0.4-0.5-0.6-0.9-0.8s-1-0.3-1.8-0.3L161.1,34.5L161.1,34.5z"/>
+			<path class="st4" d="M181,33.5h0.7l1,4.2l-0.9,0.3c-0.6-1.2-1.3-2.1-2.2-2.8c-0.8-0.6-1.6-0.8-2.5-0.8c-0.6,0-1.1,0.1-1.5,0.3
+				s-0.8,0.5-1,0.8s-0.3,0.6-0.3,1c0,0.3,0.1,0.6,0.3,0.9c0.2,0.3,0.4,0.5,0.8,0.7s1,0.4,1.8,0.7l2.5,0.7c0.3,0.1,0.8,0.3,1.4,0.5
+				c0.6,0.3,1.1,0.5,1.4,0.8s0.6,0.7,0.8,1.1c0.2,0.4,0.3,0.9,0.3,1.4c0,1.1-0.5,2-1.4,2.8s-2.2,1.2-3.7,1.2c-0.8,0-1.5-0.1-2.1-0.3
+				s-1.3-0.6-2-1.2l-0.5,1.3h-0.7l-0.9-4.8l0.9-0.2c0.3,0.9,0.8,1.6,1.3,2.3c0.5,0.6,1.1,1.1,1.8,1.4c0.7,0.3,1.3,0.5,2,0.5
+				c0.9,0,1.7-0.3,2.4-0.8c0.6-0.5,0.9-1,0.9-1.7c0-0.6-0.2-1.1-0.6-1.4c-0.4-0.4-1.2-0.7-2.3-1l-2.4-0.7c-1.4-0.4-2.3-0.9-2.9-1.5
+				s-0.8-1.3-0.8-2.1c0-0.6,0.2-1.2,0.5-1.7c0.4-0.5,0.9-1,1.6-1.3c0.8-0.4,1.6-0.5,2.5-0.5c0.7,0,1.5,0.1,2.1,0.4
+				c0.5,0.2,0.9,0.4,1.3,0.8L181,33.5z"/>
+			<path class="st4" d="M184.9,33.5h5.1v0.8h-0.4c-0.4,0-0.6,0.1-0.8,0.2c-0.2,0.1-0.3,0.3-0.4,0.4c-0.1,0.2-0.1,0.6-0.1,1.1v8.8
+				c0,0.4,0,0.7,0.1,0.9s0.2,0.3,0.3,0.4c0.1,0.1,0.4,0.1,0.8,0.1h0.4V47h-5v-0.8h0.4c0.4,0,0.6,0,0.8-0.1c0.1-0.1,0.3-0.2,0.3-0.4
+				c0.1-0.1,0.1-0.5,0.1-0.9v-8.9c0-0.5,0-0.9-0.1-1c-0.1-0.2-0.2-0.3-0.3-0.4c-0.2-0.1-0.4-0.1-0.8-0.1h-0.4V33.5z"/>
+			<path class="st4" d="M192,33h0.7l0.1,0.4h8.3l0.1-0.4h0.7l1.4,4l-0.9,0.3c-0.4-1.1-0.9-1.8-1.5-2.2s-1.3-0.6-2.2-0.6
+				c-0.4,0-0.6,0-0.6,0c-0.1,0-0.1,0.1-0.2,0.2c0,0.1,0,0.3,0,0.7v9.4c0,0.5,0,0.8,0.1,0.9c0,0.2,0.1,0.3,0.2,0.4
+				c0.1,0.1,0.2,0.1,0.4,0.2c0.2,0,0.5,0.1,1.1,0.1v0.8h-5.2v-0.8c0.6,0,0.9,0,1-0.1c0.2-0.1,0.4-0.2,0.5-0.4s0.1-0.5,0.1-1v-9.6
+				c0-0.3,0-0.5,0-0.5c0-0.1-0.1-0.1-0.2-0.2c-0.1,0-0.2-0.1-0.5-0.1c-0.7,0-1.3,0.1-1.7,0.3c-0.4,0.2-0.8,0.5-1.2,0.9
+				c-0.4,0.4-0.7,1-0.9,1.7l-0.9-0.3L192,33z"/>
+			<path class="st4" d="M203.9,33.5h5.1v0.8h-0.4c-0.4,0-0.6,0.1-0.8,0.2c-0.2,0.1-0.3,0.3-0.4,0.4c-0.1,0.2-0.1,0.6-0.1,1.1v8.8
+				c0,0.4,0,0.7,0.1,0.9s0.2,0.3,0.3,0.4c0.1,0.1,0.4,0.1,0.8,0.1h0.4V47h-5v-0.8h0.4c0.4,0,0.6,0,0.8-0.1c0.1-0.1,0.3-0.2,0.3-0.4
+				c0.1-0.1,0.1-0.5,0.1-0.9v-8.9c0-0.5,0-0.9-0.1-1c-0.1-0.2-0.2-0.3-0.3-0.4c-0.2-0.1-0.4-0.1-0.8-0.1h-0.4V33.5z"/>
+		</g>
+		<g>
+			<path class="st4" d="M93.7,51.1h0.7l0.1,0.6h8.3l0.1-0.6h0.7l1.4,4.7l-0.9,0.4c-0.4-1.3-0.9-2.1-1.5-2.6s-1.3-0.8-2.2-0.8
+				c-0.4,0-0.6,0-0.7,0.1c-0.1,0-0.1,0.1-0.1,0.2c0,0.1-0.1,0.3-0.1,0.8v11c0,0.5,0,0.9,0.1,1.1c0,0.2,0.1,0.3,0.2,0.4
+				c0.1,0.1,0.2,0.2,0.4,0.2c0.2,0.1,0.5,0.1,1.1,0.1v0.9h-5.2v-0.9c0.6,0,0.9,0,1-0.1c0.2-0.1,0.4-0.2,0.5-0.4s0.1-0.6,0.1-1.2
+				V53.7c0-0.3,0-0.6-0.1-0.6c0-0.1-0.1-0.1-0.2-0.2c-0.1,0-0.2-0.1-0.5-0.1c-0.7,0-1.3,0.1-1.7,0.3c-0.4,0.2-0.8,0.6-1.2,1.1
+				c-0.4,0.5-0.7,1.2-0.9,2l-0.9-0.4L93.7,51.1z"/>
+			<path class="st4" d="M105.7,54.1h11l1.3,3.6l-0.9,0.3c-0.2-0.6-0.4-1.1-0.7-1.4c-0.3-0.3-0.5-0.6-0.9-0.9
+				c-0.4-0.2-0.7-0.4-1.1-0.5s-1-0.1-2-0.1h-3.3V60h1.6c0.6,0,1.1-0.1,1.4-0.3s0.5-0.5,0.7-0.8c0.1-0.2,0.1-0.6,0.1-1.2v-0.2h0.9v6
+				h-0.9V63c0-0.5,0-0.8-0.1-1s-0.2-0.4-0.4-0.6c-0.2-0.2-0.4-0.3-0.6-0.4c-0.2-0.1-0.6-0.1-1.1-0.1h-1.6v4.4c0,0.5,0,0.7,0.1,0.8
+				c0,0.1,0.1,0.2,0.2,0.2c0.1,0.1,0.4,0.1,0.8,0.1h2c1.1,0,2-0.1,2.6-0.4c0.6-0.3,1.2-0.7,1.7-1.3c0.4-0.4,0.7-1,1.1-1.8l0.9,0.3
+				l-1.5,4.2h-11.4v-0.8h0.4c0.5,0,0.7,0,0.8-0.1c0.2-0.1,0.3-0.2,0.4-0.4c0.1-0.1,0.1-0.4,0.1-0.8v-9.4c0-0.4,0-0.7-0.1-0.8
+				s-0.2-0.2-0.4-0.3c-0.1,0-0.5-0.1-1.2-0.1v-0.6H105.7z"/>
+			<path class="st4" d="M120.1,54.1h5.2v0.8h-0.4c-0.4,0-0.7,0.1-0.9,0.1c-0.2,0.1-0.3,0.3-0.4,0.5s-0.1,0.4-0.1,0.8v5.2l5.1-5.4
+				c0.3-0.3,0.4-0.5,0.5-0.6c0-0.1,0.1-0.2,0.1-0.3s-0.1-0.2-0.2-0.3s-0.4-0.1-0.7-0.1H128V54h4.8v0.8c-0.4,0-0.7,0-1,0.1
+				s-0.6,0.2-0.7,0.3c-0.4,0.3-0.7,0.5-0.8,0.7l-3.6,3.7l4.1,5.5c0.4,0.5,0.7,0.8,0.9,1c0.2,0.2,0.4,0.3,0.7,0.4
+				c0.2,0.1,0.6,0.1,1.1,0.1v0.8h-5.7v-0.8h0.3c0.4,0,0.6,0,0.7,0s0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.1-0.2c0-0.2-0.2-0.5-0.7-1.2
+				l-3.1-4.1l-1.7,1.7v2.6c0,0.4,0,0.7,0.1,0.9s0.2,0.3,0.4,0.3c0.1,0.1,0.5,0.1,1.2,0.1v0.8h-5.2v-0.8h0.4c0.4,0,0.7,0,0.8-0.1
+				c0.2-0.1,0.3-0.2,0.3-0.4c0.1-0.2,0.1-0.5,0.1-1v-9c0-0.5-0.1-0.8-0.1-1c-0.1-0.2-0.2-0.3-0.3-0.4c-0.1-0.1-0.5-0.1-0.9-0.1h-0.3
+				L120.1,54.1L120.1,54.1z"/>
+			<path class="st4" d="M134.2,54.1h4.2l6.1,10.1v-7.7c0-0.5,0-0.8-0.1-1s-0.2-0.4-0.4-0.5c-0.2-0.1-0.4-0.1-0.8-0.1h-0.3v-0.8h4.5
+				v0.8h-0.2c-0.4,0-0.7,0-0.8,0.1c-0.2,0.1-0.3,0.3-0.4,0.5s-0.2,0.6-0.2,1v11.1h-1.2l-7.4-12.2v9.7c0,0.5,0,0.9,0.1,1
+				c0,0.2,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.3c0.2,0,0.5,0.1,1,0.1v0.8h-4.6v-0.8h0.3c0.5,0,0.8-0.1,1-0.1
+				c0.2-0.1,0.3-0.2,0.4-0.5c0.1-0.2,0.2-0.6,0.2-1.1v-8.6c0-0.5,0-0.9-0.1-1c-0.1-0.2-0.2-0.4-0.3-0.5c-0.2-0.1-0.5-0.1-1-0.1h-0.4
+				v-0.9H134.2z"/>
+			<path class="st4" d="M156.2,53.9c1.2,0,2.4,0.3,3.4,0.9c1.1,0.6,1.9,1.5,2.5,2.5s0.9,2.2,0.9,3.5c0,2.1-0.7,3.8-1.9,5.1
+				c-1.3,1.3-2.9,2-4.9,2c-2.2,0-4-0.8-5.3-2.4c-1.1-1.3-1.6-2.8-1.6-4.6c0-1.3,0.3-2.5,0.9-3.6s1.4-1.9,2.5-2.5
+				C153.6,54.2,154.8,53.9,156.2,53.9 M156.2,54.9c-1,0-1.9,0.2-2.6,0.7s-1.3,1.1-1.8,2c-0.4,0.9-0.7,2-0.7,3.3s0.2,2.3,0.6,3.2
+				s1,1.5,1.7,2s1.5,0.7,2.5,0.7c0.9,0,1.7-0.2,2.4-0.7c0.7-0.4,1.3-1.2,1.7-2.1c0.4-1,0.7-2.1,0.7-3.3s-0.2-2.3-0.7-3.3
+				c-0.4-0.9-0.9-1.5-1.5-1.9S157.1,54.9,156.2,54.9z"/>
+			<path class="st4" d="M164.8,54.1h5.2v0.8h-0.5c-0.4,0-0.6,0-0.8,0.1c-0.2,0.1-0.3,0.2-0.3,0.3c-0.1,0.1-0.1,0.4-0.1,0.7v9.4
+				c0,0.4,0,0.7,0.1,0.8c0,0.1,0.1,0.2,0.3,0.2c0.1,0,0.3,0.1,0.8,0.1h0.7c0.9,0,1.6-0.1,2.2-0.4c0.6-0.2,1.1-0.6,1.6-1
+				c0.4-0.5,0.9-1.2,1.3-2.1l0.9,0.3l-1.5,4.2h-9.8v-0.8h0.4c0.4,0,0.7,0,0.8-0.1c0.1-0.1,0.2-0.2,0.3-0.4c0.1-0.2,0.1-0.4,0.1-0.9
+				v-9.2c0-0.5,0-0.8-0.1-1s-0.2-0.3-0.3-0.4c-0.1-0.1-0.4-0.1-0.9-0.1h-0.4L164.8,54.1L164.8,54.1z"/>
+			<path class="st4" d="M183.9,53.9c1.2,0,2.4,0.3,3.4,0.9c1.1,0.6,1.9,1.5,2.5,2.5s0.9,2.2,0.9,3.5c0,2.1-0.6,3.8-1.9,5.1
+				s-2.9,2-5,2c-2.2,0-4-0.8-5.3-2.4c-1.1-1.3-1.6-2.8-1.6-4.6c0-1.3,0.3-2.5,0.9-3.6s1.5-1.9,2.6-2.5
+				C181.4,54.2,182.6,53.9,183.9,53.9 M183.9,54.9c-1,0-1.9,0.2-2.6,0.7s-1.3,1.1-1.7,2c-0.4,0.9-0.7,2-0.7,3.3s0.2,2.3,0.6,3.2
+				s1,1.5,1.7,2s1.5,0.7,2.4,0.7s1.7-0.2,2.4-0.7c0.7-0.4,1.3-1.2,1.7-2.1c0.5-1,0.7-2.1,0.7-3.3s-0.2-2.3-0.7-3.3
+				c-0.4-0.9-0.9-1.5-1.5-1.9C185.7,55.1,184.9,54.9,183.9,54.9z"/>
+			<path class="st4" d="M203.3,54.1h0.7l1.1,4.2l-0.9,0.3c-0.6-1.3-1.3-2.3-2-2.8c-0.8-0.6-1.6-0.8-2.6-0.8c-1.4,0-2.5,0.6-3.5,1.7
+				c-0.9,1.1-1.4,2.5-1.4,4.1c0,1.1,0.2,2.2,0.7,3.1c0.5,1,1.1,1.7,1.9,2.2s1.6,0.7,2.5,0.7c0.6,0,1.1-0.1,1.6-0.3s0.9-0.5,1.3-0.7
+				c0.2-0.2,0.4-0.5,0.5-0.7c0.1-0.3,0.1-0.6,0.1-1.1v-0.6c0-0.5-0.1-0.9-0.2-1.1c-0.1-0.2-0.3-0.4-0.5-0.4
+				c-0.2-0.1-0.6-0.1-1.4-0.1V61h5.5v0.8h-0.4c-0.4,0-0.6,0-0.8,0.1c-0.1,0.1-0.2,0.2-0.3,0.4c-0.1,0.1-0.1,0.5-0.1,0.9v4.7h-1
+				l-0.5-1.2c-0.6,0.4-1.1,0.7-1.7,0.9c-0.9,0.3-1.8,0.5-2.7,0.5c-1.8,0-3.4-0.7-4.7-2c-1.3-1.3-1.9-3-1.9-5s0.7-3.6,2-5
+				c1.3-1.3,2.9-2,4.7-2c0.4,0,0.9,0,1.4,0.1s0.9,0.2,1.2,0.4c0.3,0.1,0.6,0.3,1,0.6L203.3,54.1z"/>
+			<path class="st4" d="M208.4,54.1h5.1v0.8h-0.4c-0.4,0-0.6,0.1-0.8,0.2c-0.2,0.1-0.3,0.3-0.4,0.4c-0.1,0.2-0.1,0.6-0.1,1.1v8.8
+				c0,0.4,0,0.7,0.1,0.9s0.2,0.3,0.4,0.4c0.1,0.1,0.4,0.1,0.8,0.1h0.4v0.8h-5.1v-0.8h0.4c0.4,0,0.7-0.1,0.8-0.1
+				c0.2-0.1,0.3-0.2,0.3-0.4c0.1-0.2,0.1-0.5,0.1-0.9v-9c0-0.5,0-0.8-0.1-1s-0.2-0.3-0.3-0.4c-0.1-0.1-0.4-0.1-0.8-0.1h-0.4V54.1z"
+				/>
+		</g>
+		<g>
+			<path class="st4" d="M92.3,71.8h4.3l3.9,12.6l3.9-12.6h4.1v0.9h-0.3c-0.4,0-0.7,0-0.8,0.1c-0.1,0.1-0.3,0.2-0.3,0.4
+				c-0.1,0.2-0.1,0.6-0.1,1v10.7c0,0.7,0,1.1,0.1,1.3s0.2,0.4,0.3,0.5c0.2,0.1,0.4,0.2,0.9,0.2h0.3v1h-5.1v-1h0.4
+				c0.3,0,0.6,0,0.7-0.1s0.3-0.2,0.4-0.3s0.2-0.3,0.2-0.5c0-0.3,0-0.6,0-0.7V73.6l-4.4,14.3h-1l-4.4-14.1v11.3c0,0.6,0,1,0.1,1.2
+				s0.2,0.4,0.4,0.5c0.2,0.1,0.5,0.2,1,0.2h0.3v1h-4.8v-1h0.3c0.5,0,0.8-0.1,1-0.2c0.2-0.1,0.3-0.3,0.4-0.5s0.1-0.6,0.1-1.2V74.6
+				c0-0.6,0-1-0.1-1.1c-0.1-0.2-0.2-0.3-0.4-0.4C93.5,73,93.3,73,92.8,73h-0.5V71.8z"/>
+			<path class="st4" d="M115.6,74.2h1.6l4.2,11.3c0.2,0.6,0.4,1,0.6,1.1c0.2,0.2,0.5,0.3,0.8,0.3h0.2v0.8h-4.8v-0.8
+				c0.2,0,0.3,0,0.5,0c0.3,0,0.5,0,0.6-0.1c0.2-0.1,0.3-0.3,0.3-0.5c0-0.1-0.1-0.5-0.3-1l-0.9-2.6h-4.9l-1.1,2.9
+				c-0.1,0.3-0.2,0.5-0.2,0.6s0,0.2,0.1,0.3s0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.6,0.1c0.2,0,0.3,0,0.4,0v0.8h-4v-0.8
+				c0.4,0,0.6,0,0.8-0.1c0.2-0.1,0.3-0.2,0.4-0.4s0.3-0.5,0.5-1.1L115.6,74.2 M113.9,81.8h4.2L116,76L113.9,81.8z"/>
+			<path class="st4" d="M124.1,74.2h7c1.3,0,2.3,0.1,3,0.4c0.7,0.3,1.2,0.7,1.6,1.2s0.5,1.1,0.5,1.8s-0.2,1.3-0.5,1.9
+				c-0.3,0.5-0.9,1-1.5,1.3c-0.7,0.3-1.5,0.5-2.6,0.5l3.5,4.4c0.3,0.4,0.5,0.6,0.6,0.7c0.2,0.2,0.5,0.4,0.7,0.4
+				c0.3,0.1,0.5,0.2,0.8,0.2h0.3v0.8h-3.1l-4.9-6.5h-1.7v4.2c0,0.4,0,0.7,0.1,0.8c0.1,0.2,0.2,0.4,0.3,0.5c0.2,0.1,0.5,0.1,0.9,0.1
+				h0.4v0.8h-5.2v-0.8h0.5c0.3,0,0.6,0,0.7-0.1s0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.3,0.2-0.4c0-0.1,0-0.4,0-1v-8.9c0-0.4,0-0.7-0.1-0.8
+				c-0.1-0.2-0.2-0.3-0.3-0.4c-0.1-0.1-0.4-0.1-0.7-0.1h-0.6v-0.8 M127.6,75.3v5.1h2.8c0.9,0,1.6-0.1,2-0.2c0.5-0.2,1-0.4,1.3-0.8
+				c0.3-0.4,0.5-0.9,0.5-1.6c0-0.5-0.1-1-0.3-1.4c-0.2-0.4-0.5-0.7-0.9-0.8c-0.4-0.2-1-0.3-1.7-0.3H127.6z"/>
+			<path class="st4" d="M143.4,74.2h1.6l4.2,11.3c0.2,0.6,0.4,1,0.6,1.1c0.2,0.2,0.5,0.3,0.9,0.3h0.2v0.8h-4.8v-0.8
+				c0.2,0,0.3,0,0.5,0c0.3,0,0.5,0,0.6-0.1c0.2-0.1,0.3-0.3,0.3-0.5c0-0.1-0.1-0.5-0.3-1l-0.9-2.6h-4.9l-1.1,2.9
+				c-0.1,0.3-0.2,0.5-0.2,0.6s0,0.2,0.1,0.3s0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.6,0.1c0.2,0,0.3,0,0.4,0v0.8h-4v-0.8
+				c0.4,0,0.7,0,0.8-0.1c0.2-0.1,0.3-0.2,0.4-0.4s0.3-0.5,0.5-1.1L143.4,74.2 M141.7,81.8h4.2l-2.1-5.8L141.7,81.8z"/>
+		</g>
+	</g>
+	<g>
+		<path class="st2" d="M134.1,11.1c0.5-0.8,0-0.5,0-0.5c-0.2,0.4-0.3,0.1-0.3,0.1c-0.6-0.5,0.6-2.4,0.6-2.4c0.2-0.4-0.2,0-0.2,0
+			c-1.4,2.4-0.8,2.9-0.8,2.9C133.7,11.9,134.1,11.1,134.1,11.1z"/>
+		<g>
+			<path class="st2" d="M213.1,21.1c0,0-0.6-7.6-1-10c0,0-0.1-0.7,0.2-0.2l0.5,0.7c0,0,0.1-0.7-0.2-1.3c0,0-0.5-1-0.5-1.3
+				c0,0-0.3-1.1-0.6-0.6c0,0-0.6,1-0.3,1.4l0.9,7.9c0,0,0.7,4.1,0.6,5.3C212.6,22.9,213.1,22.3,213.1,21.1z"/>
+			<path class="st2" d="M208.9,10.6c-0.4,0.7-3.5,3.1-4.2,3.7c0.5-0.3,1.7-0.9,1.7-0.9c1.1-0.6,2.7-2.5,2.7-2.5
+				c0.6,0.5,0.7,0.1,0.7,0.1c0.4-0.5-0.4-0.9-0.4-0.9s0.2-0.5,0-1.5s-1.2,0.1-1.2,0.1c-0.7,0.7-0.3,1.3-0.3,1.3L208.9,10.6z
+				 M208.8,8.9c0.4-0.1,0.3,0.9,0.3,0.9l-0.6-0.4C208.2,9,208.8,8.9,208.8,8.9z"/>
+			<path class="st2" d="M204.5,14.4c0,0,0.1,0,0.2-0.1C204.6,14.3,204.5,14.4,204.5,14.4z"/>
+			<path class="st2" d="M209,14c0.3-0.6-0.1-0.2-0.1-0.2l-0.9,1.7c-0.4,0.8,0.2,1.2,0.2,1.2c0.8,0,0.7-1,0.7-1
+				c-0.2,0.4-0.5,0.2-0.5,0.2c-0.3-0.1,0-0.6,0-0.6L209,14z"/>
+			<path class="st2" d="M209.6,18.5c-1.2-0.9-2.1,1.2-2.1,1.2c-0.6,1.7,1,1.8,1,1.8c0.6-0.1,1.6,0,1.6,0c0.7,0.4,0.2,1.1,0.2,1.1
+				c-0.8,1.3-2.8,2.7-2.8,2.7c-1.4,1.2-2.8,0.7-2.8,0.7c-2.2-1.1-0.8-3.6-0.8-3.6c0.8,0,1.3-0.6,1.3-0.6c0.9-2,0.1-3.2,0.1-3.2
+				c-0.5-0.8-0.7,0.9-0.7,0.9c0,0.3,0.4,0.6,0.4,0.6c0.2,0.6-1.2,0.7-1.2,0.7c-1-0.1-0.8-1.4-0.8-1.4c0.1-0.8-0.6-0.2-0.6-0.2
+				c-1.8,1.5-2.5,1.4-2.5,1.4c0-0.6-1-1.4-1-1.4c-1.4-1-2.3,1.2-2.3,1.2c-0.6,1.7,0.8,1.9,0.8,1.9c0.9,0.4,2.2-0.1,2.2-0.1v0.4
+				c-1.4,1.9-3.6,3-3.6,3c-2.6,1.3-3.4-0.9-3.4-0.9c-0.6-1.5,0.9-2.8,0.9-2.8c0.8-0.7,0.8-2,0.8-2.5c0-0.1,0-0.1,0-0.3
+				c0-0.7-0.7-1.5-0.7-1.5c-0.6-0.6-0.2-0.7-0.2-0.7c0.6,0.2,0.4-0.2,0.4-0.2l-1.3-1.1c-0.4-0.5-0.4-0.1-0.4-0.1v1.3l0.3,0.4
+				c0.1,0.5,1.3,2.4,1.3,2.4c0.3,0.6-0.3,1-0.3,1c-1.1,1.3-5,3.5-5,3.5c-1.7,1.2-6.6,3.1-6.6,3.1c0.4,0,4.8-0.9,4.8-0.9
+				c0.4-0.1,1.2-0.5,1.2-0.5c1-0.6,4.4-2.6,4.4-2.6c-1.2,3.6,1.4,4.4,1.4,4.4c2.8,0.5,5.7-3.2,5.7-3.2c0.6-0.6,0.5-2,0.5-2l0.2-0.3
+				c0.3,0,1.3-0.8,1.3-0.8c0.3-0.4,0.9-0.6,0.9-0.6c0,1.6,1.1,1.7,1.1,1.7c-0.3,0.5-0.4,2.1-0.4,2.1c-0.1,2.9,2.2,2.9,2.2,2.9
+				c2.4,0.1,5.2-3.6,5.2-3.6c0.5-0.6,0.6-2.4,0.6-2.4C211.1,19.5,209.6,18.5,209.6,18.5z M209.6,20.2h-0.9c0,0-0.4-0.2,0.1-0.5
+				c0,0,0.4-0.3,1,0.2C209.6,20,209.9,20.1,209.6,20.2z M197.5,21.1c0,0-0.3-0.2,0.2-0.4c0,0,0.5-0.3,1,0.4H197.5z"/>
+			<path class="st2" d="M186.1,20.5c1.2,0.2,2.1-1.5,2.1-1.5c0.2,0.4,0.9,0.8,0.9,0.8c1.5,0.6,1.8-1,1.8-1c0.4-1.5-0.5-1.9-0.5-1.9
+				c-0.6,1-0.2,1.3-0.2,1.3c0.3,0.4-0.2,0.3-0.2,0.3c-1.6,0-1.2-0.9-1.2-0.9c0.2-0.6-0.2-0.3-0.2-0.3c-0.7,1.4-1.3,1.7-1.3,1.7
+				c-1.9,1-1.9-0.8-1.9-0.8c0.3-0.8-0.1-0.5-0.1-0.5c-1.8,1.8-4.2,2-4.2,2c-2.6,0.3-2.6-1.5-2.6-1.5c0.1-0.9-0.4-0.3-0.4-0.3
+				c-1.2,2-2.9,1.9-2.9,1.9c-1.8-0.2-1.7-2-1.7-2c0.4-1.8-1.2-1.5-1.2-1.5c-2.6,0.9-3.1,3.6-3.1,3.6c-0.8,2.4,2.8,2.3,2.8,2.3
+				c0.8,0.1,0.8,0.8,0.8,0.8c-0.8,0.9-3.5,2.1-3.5,2.1c-3.4,1.6-5.3-0.4-5.3-0.4c-2.4-1.6-0.4-5.9-0.4-5.9c0.3-0.9-0.3,0-0.3,0
+				c-0.6,0.8-1,3.1-1,3.1c-1,5.1,3.9,5.3,3.9,5.3c3,0.1,6.7-2.9,6.7-2.9c1.6-2.4-0.2-3.4-0.2-3.4c-0.9-0.1-2.2-0.5-2.2-0.5
+				c-1.6-0.7,1.5-2.4,1.5-2.4c0.9-0.7,1.2,0.5,1.2,0.5c-0.2,1.5,0.9,2.4,0.9,2.4c1.9,1.4,3.6-1.1,3.6-1.1c0.3-0.4,0.4-0.2,0.4-0.2
+				c0.6,1.8,2.5,1.6,2.5,1.6c1.9,0.1,4.3-1.7,4.3-1.7C184.9,20.6,186.1,20.5,186.1,20.5z"/>
+			<path class="st2" d="M203.3,15.2c0,0-0.4,0.6-0.5,1.2c0,0,0.7,0.4,1.1,0.8c0,0,0.6-0.2,0.8-1.2C204.6,16.1,204.2,15.5,203.3,15.2
+				z"/>
+			<path class="st2" d="M196.5,16.6c0,0,0.7,0.4,1.1,0.8c0,0,0.7-0.2,0.7-1.2c0,0-0.4-0.6-1.3-0.9C197,15.3,196.6,16,196.5,16.6z"/>
+			<path class="st2" d="M201.4,25.2c0,0,0.5-0.8,0.6-1c0,0-0.6-0.6-1.3-0.8l-0.7,1.2c0,0,0.9,0.4,1.1,0.7v0.2l-0.6,1
+				c0,0,1.2,0.7,1.3,0.9c0,0,0.7-0.9,0.7-1.2l-1-0.7L201.4,25.2z"/>
+			<path class="st2" d="M204.7,24.2c0,0-0.1,0.3,0.4-0.1c0,0,1.2-0.8,2.3-1.2c0,0,0.6-1-0.1-0.6l-2.5,1.3L204.7,24.2z"/>
+			<path class="st2" d="M199.7,13.8c0-0.1,0.3-0.3,0.3-0.3h1.7l-2,1.4c2.1-0.2,2.8-1.7,2.8-1.7c0.8-0.8,0.2-0.9,0.2-0.9l-1.9-0.2
+				c-0.7-0.1-0.8,0.2-0.8,0.2l-0.5,0.9C199.2,13.8,199.7,13.8,199.7,13.8z"/>
+			<path class="st2" d="M203,9.6c0.8,0,0.8,1.4,0.8,1.4c0,0.6,0.3,0.4,0.3,0.4c0.2-0.2,0.3-1,0.3-1c0.1-1.3,0.3-1.6,0.3-1.6
+				c0.4-0.5,0.9,0.6,0.9,0.6c0.3-0.5-0.2-1.2-0.2-1.2c-0.9-1.2-1,1-1,1c-0.1,1.1-0.3,1-0.3,1c-0.3-1.7-1.3-1.7-1.3-1.7
+				c-0.8-0.3-0.6,0.6-0.6,0.6C202.1,9.7,203,9.6,203,9.6z"/>
+			<path class="st2" d="M177.4,9.6c0.8,0,0.9,1.4,0.9,1.4c0,0.6,0.3,0.4,0.3,0.4c0.2-0.2,0.3-1,0.3-1c0.1-1.3,0.3-1.6,0.3-1.6
+				c0.4-0.5,0.9,0.6,0.9,0.6c0.3-0.5-0.2-1.2-0.2-1.2c-1-1.2-1.1,1-1.1,1c-0.1,1.1-0.3,1-0.3,1c-0.3-1.7-1.4-1.7-1.4-1.7
+				c-0.8-0.3-0.6,0.6-0.6,0.6C176.4,9.6,177.4,9.6,177.4,9.6z"/>
+			<path class="st2" d="M199.6,9c0,0,0.1,0.1,0.4-0.5c0,0,0.3-0.7-0.6-0.2c0,0-5.1,2.5-5.3,2.7c0,0-0.3,0.4-0.2,0.8
+				C193.9,11.7,198.4,9.3,199.6,9z"/>
+			<path class="st2" d="M195.8,12.1c0,0-2.1,2.3-1,2.9c0,0,0.9,0,0.7-0.9c0,0-0.2-0.2-0.2,0.2c0,0-0.6,0.4-0.5-0.3
+				C194.9,14,195.8,12.6,195.8,12.1z"/>
+			<path class="st2" d="M189.5,9.6c0,0,0.2,0,0.4-0.1c0,0,0.6-0.2,1.3,0c0,0,0.2,0-0.2,0.3l-1.7,1.1c0,0-0.1,0.2,0.4,0
+				c0,0,0.7-0.3,1.1-0.3c0,0,0.5-0.1,1.2-1.1c0,0,1.3-1.2,0.2-1.2c0,0-2.1-0.5-2.5,0.1C189.8,8.4,189.1,9.4,189.5,9.6z"/>
+			<path class="st2" d="M183.5,15.1c1.3-0.1,1.4-1.9,1.4-1.9c0.1-0.8-0.4-0.1-0.4-0.1c-0.2,0.6-0.4,0.7-0.4,0.7
+				c-1.4-0.2-0.4-2.3-0.4-2.3c0.7-1.2,1.2-3.1,1.2-3.1c0.1-0.3-0.2,0.1-0.2,0.1c-1,1.4-2,4.6-2,4.6
+				C182.4,14.9,183.5,15.1,183.5,15.1z"/>
+			<path class="st2" d="M187.4,15.9c0,0,0.4,0.1,1.5-1.4c0,0,0.9-1.6-0.4-1.4c0,0-0.8,0.5-0.6,0.8c0,0,0.1,0,0.2-0.1
+				c0,0,0.7-0.1,0.2,0.7L187.4,15.9z"/>
+			<path class="st2" d="M170.9,11c0,0,0.4,0.1,1.5-1.4c0,0,0.9-1.6-0.4-1.4c0,0-0.8,0.5-0.6,0.8c0,0,0.2-0.1,0.3-0.2
+				c0,0,0.9-0.4,0.1,0.9L170.9,11z"/>
+			<path class="st2" d="M189,21c0,0-2.6,1.1-3.2,1.4c0,0-0.5,0.6-0.2,0.8c0,0,2.7-1.3,3.3-1.5c0,0,0.2,0,0.4-0.3
+				C189.2,21.3,189.4,20.5,189,21z"/>
+			<path class="st2" d="M183.4,22.3c-1.3,1.5-0.8,2.5-0.8,2.5c0.5,0.7,0.9-0.1,0.9-0.1c0.5-0.8,0-0.5,0-0.5
+				c-0.2,0.4-0.4,0.2-0.4,0.2c-0.4-0.4,0.3-1.9,0.3-1.9C183.7,22,183.4,22.3,183.4,22.3z"/>
+			<path class="st2" d="M176.5,13.3h1.7l-1.6,1.1c0,0-0.2,0.4,0.5,0.1c0,0,0.8-0.4,1.1-0.3l0.8-0.9c0,0,1.2-1.4,0.1-1.4H177
+				c0,0-0.8,0.7-0.8,1.4C176.2,13.3,176.2,13.5,176.5,13.3z"/>
+			<path class="st2" d="M170.2,14.4c0,0,0.8,0.6,0.9,0.8c0,0,0.5-0.4,0.7-1c0,0-0.1-0.4,0.4,0l1.1,0.7l0.6-1.1c0,0-0.8-0.8-1.3-0.9
+				c0,0-0.3-0.1-0.8,0.9l-1-0.7c0,0-0.2-0.2-0.5,0.5C170.3,13.5,169.7,14.1,170.2,14.4z"/>
+			<path class="st2" d="M176.8,24.3c0,0,0.5-0.4,0.7-1c0,0-0.1-0.4,0.4,0L179,24l0.6-1.1c0,0-0.8-0.8-1.3-0.9c0,0-0.3-0.1-0.8,1
+				l-1-0.7c0,0-0.2-0.2-0.5,0.5c0,0-0.6,0.6-0.1,0.9C175.9,23.5,176.7,24.1,176.8,24.3z"/>
+			<path class="st2" d="M174.4,25.1c0,0-0.5,1.2-0.8,1l-1-0.7c0,0-0.2-0.2-0.5,0.5c0,0-0.6,0.6-0.1,0.9c0,0,0.8,0.6,1,0.8
+				c0,0,0.5-0.4,0.7-1c0,0-0.1-0.4,0.4,0l1.1,0.7l0.6-1.1C175.6,26,174.8,25.2,174.4,25.1z"/>
+			<path class="st2" d="M155.9,24.6c0,0-0.5,1.2-0.8,1l-1-0.7c0,0-0.2-0.2-0.5,0.5c0,0-0.6,0.6-0.1,0.9c0,0,0.8,0.6,1,0.8
+				c0,0,0.5-0.4,0.7-0.9c0,0-0.1-0.4,0.4,0l1.1,0.7l0.6-1.1C157.2,25.5,156.4,24.7,155.9,24.6z"/>
+			<path class="st2" d="M157.6,16.3c0,0,0.9,0.6,1,0.7c0,0,0.5-0.4,0.6-1c0,0-0.1-0.4,0.4-0.1l1.1,0.6l0.5-1.1c0,0-0.8-0.8-1.3-0.8
+				c0,0-0.4,1.2-0.7,1l-1.1-0.6c0,0-0.2-0.2-0.5,0.5C157.6,15.4,157,16.1,157.6,16.3z"/>
+			<path class="st2" d="M177,26.4l-0.3,0.5c0,0-0.1,0.5,0.4,0.1c0,0,2.1-1.1,3.1-1.5c0,0,0.1-0.2,0.1-0.6
+				C180.3,24.9,178.4,25.6,177,26.4z"/>
+			<path class="st2" d="M158.9,26.2l-0.3,0.5c0,0-0.2,0.5,0.4,0.1c0,0,2.1-1.1,3.1-1.5c0,0,0.1-0.2,0.1-0.6
+				C162.2,24.7,160.4,25.4,158.9,26.2z"/>
+			<path class="st2" d="M165,9.7c0,0,0.4-0.3,1-0.2l0.8,0.1l-1.8,1.5c0,0,1.2-0.5,1.8-0.6c0,0,2.4-2.2,1-2.3h-1.9
+				c0,0-0.5-0.1-0.7,0.4C165.2,8.6,164.2,10,165,9.7z"/>
+			<path class="st2" d="M143.4,9.6c0,0,0.3-0.3,0.9-0.2l0.7,0.1l-1.6,1.5c0,0,1.1-0.5,1.7-0.6c0,0,2.2-2.2,0.9-2.3h-1.7
+				c0,0-0.4-0.1-0.7,0.4C143.6,8.4,142.7,9.9,143.4,9.6z"/>
+			<path class="st2" d="M167,13.3c-0.6,0-1.8,4.1-1.8,4.1c-0.4,1.4,0.3,2.6,0.3,2.6c1,1.2,1.8-1.5,1.8-1.5c0.2-1-0.4-0.4-0.4-0.4
+				c-0.3,1-0.8,0.8-0.8,0.8c-1.3-0.7,0.5-4.3,0.5-4.3C167.1,13.6,167,13.3,167,13.3z"/>
+			<path class="st2" d="M167.5,21.9c0,0-0.1-0.7-0.8-0.2c0,0-0.7,0.6-0.1,0.7c0,0,0.6-0.2,0.2,0.5l-1.1,1.5l0.5-0.3
+				C166.1,24.1,167.7,22.6,167.5,21.9z"/>
+			<path class="st2" d="M158.7,9.8c0,0,0.5,0.3,0.9,0.2c0,0,0.4,0.5,0.5,1.7c0,0,0.7-0.6,0.6-2.5c0,0,0.3-1.1,0.8,0.5
+				c0,0,0.4-1-0.2-1.5c0,0-0.8-0.6-0.8,1.1c0,0,0,0.9-0.1,1.3c0,0-0.5-2.1-1.5-1.8C158.7,8.8,158.2,9.6,158.7,9.8z"/>
+			<path class="st2" d="M150.5,23.8c0,0-0.9-0.6-0.9,1.1c0,0,0,0.9-0.1,1.3c0,0-0.6-2.1-1.7-1.8c0,0-0.5,0.7,0,1
+				c0,0,0.5,0.3,0.9,0.2c0,0,0.4,0.5,0.5,1.7c0,0,0.7-0.6,0.6-2.5c0,0,0.3-1.1,0.9,0.5C150.7,25.3,151.2,24.3,150.5,23.8z"/>
+			<path class="st2" d="M159.9,21.9c0,0,1.4-0.4,1-2.8c0,0-0.5-0.9-0.7-0.4c0,0-0.3,0.9,0,1.3c0,0,0.5,0.6-0.6,0.7
+				c0,0-1.2,0.2-1.4-0.8c0,0,0.2-1.3-0.6-0.5c0,0-1.4,2.6-3.3,1.5c0,0-1.8-0.9-3.3-2.9l-5.3-5c0,0-0.3-0.4,0.2-0.6
+				c0,0,6.6-3.4,9.4-3.2c0,0,1.1,0,0.2,1.1c0,0-1.4,2.1-1.2,2.8c0,0,0.1,0.1,0.5-0.8c0,0,0.8-1.9,1.3-2.4c0,0,1.3-2.4-1.2-2
+				c0,0-4.2,0.6-9.1,3.3c0,0-0.4,0.2-0.7,1.2l-0.2,1.1c0,0,0,0.5,0.6,1.1c0,0,4.2,4.5,4.3,5.6c0,0-0.1,1.3-1.7,0.8
+				c0,0-0.7-0.2-0.8-1.2c0,0,0-1.1-0.5-0.5c0,0-1.3,1.2-1.9,1.5c0,0-0.2-0.1-0.4-0.4c0,0-1-1.9-2.1-0.9c0,0-2,1.9-0.3,3.1
+				c0,0,1.3,0.5,2.2,0c0,0,0.4,0.1-0.1,0.7c0,0-2,2.4-4.1,2.9c0,0-3.6,0.6-2.9-3.2l0.5-1.5c0,0,0.1-0.7-0.2-0.2c0,0-1.9,3.3-0.1,5.6
+				c0,0,1.5,1.5,3.5,0.4c0,0,4.4-2,4.2-4.9c0,0,1.3-1,1.8-1.6c0,0,0.2,1.6,1.4,1.7c0,0,2.8-0.1,1.7-3.2l-0.5-1.1l2.6,2.6
+				c0,0,1.3,2.1,3.3,1.5c0,0,1.4-0.4,1.8-1.6c0,0,0.3-0.6,0.4,0.1C157.8,20.8,158.3,22.7,159.9,21.9z M142.4,21.3
+				c0.8-0.9,1.5,0.1,1.5,0.1C142.8,21.6,142.4,21.3,142.4,21.3z"/>
+			<path class="st2" d="M155.4,14.7c-1.6,2.7-0.9,3.3-0.9,3.3c0.3,0.7,0.8-0.1,0.8-0.1c0.5-0.9,0-0.6,0-0.6
+				c-0.1,0.4-0.4,0.3-0.4,0.3c-0.6-0.6,0.7-2.9,0.7-2.9C155.8,14.3,155.4,14.7,155.4,14.7z"/>
+			<path class="st2" d="M140.5,11.1c0.5-0.8,0-0.5,0-0.5c-0.2,0.4-0.3,0.1-0.3,0.1c-0.6-0.5,0.6-2.4,0.6-2.4c0.2-0.4-0.2,0-0.2,0
+				c-1.4,2.4-0.8,2.9-0.8,2.9C140.1,11.9,140.5,11.1,140.5,11.1z"/>
+			<path class="st2" d="M151.3,15l-3-0.9c-0.7-0.2-0.4,0.1-0.4,0.1c0.2,0,0.6,0.5,0.6,0.5l2.5,0.7c0.8,0.3,0.9-0.6,0.9-0.6
+				c0.7-1-1.4-1.2-1.4-1.2c-0.9-0.3-0.5-0.6-0.5-0.6c0.6-0.5,1.1-0.1,1.1-0.1c0.3,0.3,0.4-0.1,0.4-0.1c0.4-0.5-0.3-0.5-0.3-0.5
+				c-1.8,0-1.8,1-1.8,1c-0.1,0.9,2,1,2,1C152,15,151.3,15,151.3,15z"/>
+			<path class="st2" d="M127.2,15.4l-2.7-1.4c-0.6-0.3-0.4,0-0.4,0c0.2,0,0.5,0.6,0.5,0.6l2.3,1.2c0.7,0.4,1-0.4,1-0.4
+				c0.9-0.8-1.1-1.4-1.1-1.4c-0.8-0.5-0.4-0.7-0.4-0.7c0.6-0.3,1,0.1,1,0.1c0.2,0.4,0.4,0,0.4,0c0.4-0.4-0.2-0.6-0.2-0.6
+				c-1.7-0.3-1.9,0.6-1.9,0.6c-0.2,0.8,1.7,1.4,1.7,1.4C127.8,15.5,127.2,15.4,127.2,15.4z"/>
+			<path class="st2" d="M144.1,16.6c-0.6,0.9-0.4,1.1-0.4,1.1c0.3,0.1,0.9,0.6,0.9,0.6c0.3,0.3,0.6-0.3,0.6-0.3c0.5-0.7,0.1-1,0.1-1
+				l-1-0.6C144.2,16.3,144.1,16.6,144.1,16.6z"/>
+			<path class="st2" d="M141.7,13.9l0.7,0.5c0,0,0.4,0.1-0.1,0.6c0,0-2.3,2.1-2.6,2.3c0,0,0.5-0.1,1-0.5c0,0,1.7-0.9,2.2-2
+				c0,0,0.3,0.1,0.4,0.3c0,0,0.3,0,0.4-0.6c0,0-0.1-0.3-0.4-0.5c0,0-0.1-0.1,0-0.5c0,0,0-2.1-0.7-1.5
+				C142.5,12,140.8,13.3,141.7,13.9z M142.4,12.8c0.3-0.1,0.3,0.9,0.3,0.9l-0.7-0.4C141.8,13,142.4,12.8,142.4,12.8z"/>
+			<path class="st2" d="M136.2,21.7c0,0,2-0.8,1.9-2.1c0,0,0.3-2.6-0.7-8.5c0,0-0.2-0.5,0.2-0.1l0.6,0.6c0,0,0.4,0.2-0.2-1.1
+				c0,0-0.9-2.8-1.2-2.4c0,0-0.4,1.1-0.4,1.4c0,0,0.1,0.1,0.1,0.7l1,8.6c0,0,0.5,0.9-2.3,1.7c0,0-0.3-2.3-2.3-1.7c0,0-1,0.3-1.1,1.8
+				c0,0-0.3,1.4,1,1.6c0,0,1.3,0.1,1.9-0.1c0,0,0.3,0.5-0.2,0.9c0,0-2.5,2.6-4.7,2.9c0,0-1.9,0.6-2.2-1.7c0,0-0.1-1.8,0.7-2.7
+				c0,0,0.4-1.3-0.1-0.5c0,0-2,3.1-0.5,5.6c0,0,1.2,1.9,3.8,0.4c0,0,3.4-2,3.7-3.4c0,0,0.3-1.1,0.3-1.4
+				C135.5,22,135.6,21.9,136.2,21.7z M132.8,20.7c0.7-1,1.5,0.1,1.5,0.1C133.7,20.9,132.8,20.7,132.8,20.7z"/>
+			<path class="st2" d="M127.1,20.5c0,0,2-1.3,2.9-1.8c0,0,0.1-0.3,0-0.6c0,0-1.8,0.9-3.1,1.9l-0.2,0.5
+				C126.7,20.5,126.6,21,127.1,20.5z"/>
+			<path class="st2" d="M127.1,26.4l-0.7-0.5c-0.4-0.3-0.5,0-0.5,0l-0.3,0.6c-0.2,0.5-0.5,0.1-0.5,0.1l-0.7-0.5
+				c-0.3-0.3-0.4,0-0.4,0l-0.4,0.8c-0.2,0.3,0.1,0.5,0.1,0.5c0.3,0.1,0.7,0.5,0.7,0.5c0.3,0.3,0.4,0.1,0.4,0.1
+				c0.3-0.3,0.5-0.8,0.5-0.8c0.2-0.4,1,0.4,1,0.4c0.4,0.3,0.5,0.1,0.5,0.1l0.4-0.6C127.4,26.5,127.1,26.4,127.1,26.4z"/>
+			<path class="st2" d="M134.9,14.7c0,0,0.1,0,0.2,0.3c0,0,0.3-0.1,0.4-0.3c0.2-0.3-0.2-0.6-0.2-0.6c0.3-0.6,0.1-1.5,0.1-1.5
+				c-0.1-1.4-1.4,0.3-1.4,0.3c-0.8,0.8,0.5,1.5,0.5,1.5s0.3,0,0,0.4c0,0-2.7,2.1-3.1,2.5C131.4,17.1,133.8,16,134.9,14.7z
+				 M134.3,13.2c0,0-0.3-0.3,0.3-0.5c0,0,0.3-0.2,0.3,0.9L134.3,13.2z"/>
+			<path class="st2" d="M125.4,22.2c0,0,0.5,0,0.8,0.4c0,0-0.4,0.7-2,1.4c0,0-3.5,2.1-5.9,1.7c0,0-4.4-0.9-2.1-6.5
+				c0,0,0.5-0.8,0.1-0.9c0,0-0.3,0-0.6,1c0,0-2,4.8,0.3,6.8c0,0,1.9,2,4.9,0.8c0,0,3.6-1.5,5-2.6c0,0,2.1-3.2-0.8-3.6
+				c0,0,1.8-1.3,0.8-3.6c0,0-1-1.4-1.7-1.8c0,0-1.7-1.3-1.8-1.8c0,0,0.3-0.1,0.9,0.2c0,0,0.5,0,0-0.4l-1.8-1.2c0,0-0.4-0.2,0.2-0.5
+				c0,0,4.2-1.9,7.5-2.6c0,0,2.1-0.4,1.5,0.7c0,0-0.9,1.5-1.2,2.7c0,0-0.2,0.8,0.3,0c0,0,1.1-2.5,1.5-3.1c0,0,0.6-1.2-0.4-1.6
+				c0,0-0.7-0.2-1.9,0.1c0,0-3.1,0.5-7.5,2.6c0,0-1.3,1.7-0.5,2.8c0,0,0.8,0.9,1.2,1.4c0,0,1.4,1.5,2,1.9c0,0,2.2,1.6,1.7,2.4
+				c0,0-0.7,0.9-2.8,1.7c0,0-0.2,0-0.3,0.9c0,0,0,0.4,0.8,0.5L125.4,22.2z"/>
+			<path class="st2" d="M119.2,9.3c0.3,0.1,0.9,0.6,0.9,0.6c0.3,0.3,0.6-0.3,0.6-0.3c0.5-0.7,0.1-1,0.1-1l-1-0.6
+				c-0.2-0.1-0.3,0.2-0.3,0.2C118.9,9,119.2,9.3,119.2,9.3z"/>
+			<path class="st2" d="M118.7,17.4c0,0,0.3-0.2,0.9-0.2l0.7,0.1l-1.6,1.4c0,0,1.1-0.4,1.7-0.5c0,0,2.2-2,0.9-2.1h-1.7
+				c0,0-0.4-0.1-0.7,0.4C118.9,16.4,118,17.7,118.7,17.4z"/>
+			<path class="st2" d="M120.3,22.1c0,0,0.1-1.5-0.7-1c0,0-0.7,0.6-0.5,1c0,0,0.1,0.1,0.2-0.1c0,0,0.6-0.4,0.3,0.3
+				c0,0-0.5,1.3-1.3,2.1C118.3,24.5,119.8,23.4,120.3,22.1z"/>
+			<path class="st2" d="M115.4,14.8c0,0-0.4,1.1-0.9,0.9c0,0-0.8-0.9-0.3-2.8c0,0,1.1-2.6,1.2-3.2l1.3-0.5c0,0,0.6-0.6,0.2-1.1
+				c0,0-9.4,4.6-10.3,5.3c0,0-0.3,0.3-0.3,0.9c0,0,0.1,0.2,0.4-0.1c0,0,4.7-2.8,8.2-4.2c0,0,0.1,0.2-0.3,0.8c0,0-1.4,2.6-1.1,4.8
+				c0,0,0.1,2.2,1.2,1.4c0,0,0.9-0.6,0.9-2.1C115.7,14.8,115.5,14.5,115.4,14.8z"/>
+			<path class="st2" d="M109.8,16.9c0,0,0,0.3,0.4-0.1c0,0,1.5-1.8,0.7-2.4c0,0-0.4-0.5-0.8,0.3c0,0-0.3,0.4,0.1,0.4
+				c0,0,0.6-0.4,0.5,0.2C110.7,15.3,110.4,16.3,109.8,16.9z"/>
+			<path class="st2" d="M107.5,9.6c0,0,0.6,0.2,1,0.1c0,0,0.5,0.4,0.7,1.6c0,0,0.7-0.7,0.3-2.6c0,0,0.2-1.2,0.9,0.4
+				c0,0,0.3-1-0.4-1.5c0,0-0.9-0.5-0.8,1.2c0,0,0.1,1,0,1.3c0,0-0.8-2.1-1.9-1.7C107.4,8.7,107,9.5,107.5,9.6z"/>
+			<path class="st2" d="M107.2,18.6c-0.6,1-0.1,1.5-0.1,1.5c0.7,0.5,1-0.5,1-0.5c0.2-0.7-0.1-0.3-0.1-0.3c-0.1,0.4-0.5,0.3-0.5,0.3
+				c-0.6-0.5,0.5-2.3,0.5-2.3C107.8,17.1,107.2,18.6,107.2,18.6z"/>
+			<path class="st2" d="M104.7,26.1c-0.1,0.4-0.4,0.3-0.4,0.3c-0.5-0.5,0.5-2.3,0.5-2.3c-0.2-0.1-0.8,1.4-0.8,1.4
+				c-0.5,1-0.1,1.5-0.1,1.5c0.6,0.5,0.9-0.5,0.9-0.5C105,25.8,104.7,26.1,104.7,26.1z"/>
+			<path class="st2" d="M113,19c-1.1-1.2-2.2,1-2.2,1c-0.4,0-0.5,0.3-0.5,0.3c-0.1,0.5-0.5,1.2-0.5,1.2c-1.8,2-3.5,0.5-3.5,0.5
+				c-1.1-0.8-1.1-7.8-1.1-7.8c-0.1-2.4-0.7-5.6-0.7-5.6c0-0.7-0.3-0.4-0.3-0.4l-0.5,1.1c0.1,0.2,0.3,1.5,0.3,1.5
+				c0.6,1.9,0.5,7.3,0.9,10.3s2.9,2.9,2.9,2.9c1.7,0,2.5-2.4,2.5-2.4c0.6,0.6,2.2,1.1,2.2,1.1c0.5,0.1,0.9-0.1,0.9-0.1l0.4-1.1v-0.1
+				C113.8,20.5,113,19,113,19z M111.1,20.5c0.3-0.6,0.9-0.4,0.9-0.4c0.6,0.3,0.6,1,0.6,1L111.1,20.5z"/>
+			<path class="st2" d="M111.9,24.3c0,0-0.1-0.2-0.2,0.1c0,0-0.2,1-1.4,1.5c0,0-2,1-2.8,1.2c0,0,1.2-0.2,1.6-0.1
+				c0,0,1.7-0.8,2.2-1.1c0,0,0.4-0.5,0.5-0.8c0,0,0.2-0.1,0.8,0.3c0,0,0.4,0.2,0.5-0.2c0,0,0.2-0.5-0.3-1.4
+				C112.8,23.8,112.3,23.4,111.9,24.3z M112.5,24.7l-0.4-0.2C112.6,24.1,112.5,24.7,112.5,24.7z"/>
+			<path class="st2" d="M103.6,19.3l-1-1.8h0.4c0,0,0.1-0.2-0.4-0.6c0,0-0.8-1.4-1-0.8c0,0-0.3,1.3,0,1.5c0,0,0.1,0.1,0.3,0.6
+				c0,0,1.6,2.2,1,2.9c0,0-0.9,1-1.6,1.4c0,0-6.2,3.9-8.6,4.7c0,0,2.6-0.7,3.6-0.7c0,0,1.2-0.1,1.7-0.5l4.5-3
+				C102.4,23,104.3,21.3,103.6,19.3z"/>
+			<path class="st2" d="M103.2,12.8c0,0,0.2-0.1,0.3-0.4c0,0,0.2-0.7-0.2-0.3l-4.4,2.4c0,0-0.2,0.5-0.2,0.7L103.2,12.8z"/>
+			<path class="st2" d="M100.9,10.7c0.1-0.5-0.1-0.4-0.2-0.1s-0.3,0.1-0.3,0.1c-0.7-0.8,0.5-2.5,0.5-2.5c0.2-0.6-0.3,0-0.3,0
+				c-1.3,2.1-0.5,3.3-0.5,3.3C100.8,11.8,100.9,10.7,100.9,10.7z"/>
+			<path class="st2" d="M96.9,19.5c0,0,0.6,3.3,0.3,4.2c0,0,1-1.6,0.5-5.1l-0.9-7.7c0,0,0.5,0.5,0.7,0.8c0,0,0.2-0.4-0.2-1.1
+				c0,0-0.9-3.1-1.2-2.7c0,0-0.7,1.1-0.3,1.4L96.9,19.5z"/>
+		</g>
+	</g>
+</g>
+</svg>

src/index.html

+<!DOCTYPE html>
+<html lang="en" translate="no">
+<head>
+  <!-- https://github.com/gokulkrishh/awesome-meta-and-manifest -->
+	<!-- Must -->
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,width=device-width,viewport-fit=cover,minimal-ui">
+	<meta name="description" content="Training Progressive Web App" />
+	<meta name="keywords" content="UiTM, training, web app, PWA" />
+	<meta name="google" content="notranslate" />
+
+	<title>PWATraining</title>
+
+	<link rel="shortcut icon" href="/favicon.ico">
+
+  <link rel="canonical" href="https://uitmpwatraining.web.app/">
+
+	<!-- Android  -->
+	<meta name="theme-color" content="#3F51B5">
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta name="format-detection" content="telephone=no">
+
+	<!-- iOS -->
+	<meta name="apple-mobile-web-app-title" content="PWATraining">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="#3F51B5">
+  <link rel="apple-touch-icon" href="images/icons/icon-152x152.png">
+
+	<!-- Windows  -->
+	<meta name="msapplication-navbutton-color" content="#3F51B5">
+	<meta name="msapplication-TileColor" content="#3F51B5">
+	<meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
+	<meta name="msapplication-config" content="browserconfig.xml">
+
+	<!-- Pinned Sites  -->
+	<meta name="application-name" content="PWATraining">
+	<meta name="msapplication-tooltip" content="Training Progressive Web App">
+	<meta name="msapplication-starturl" content="/">
+
+	<!-- Tap highlighting  -->
+	<meta name="msapplication-tap-highlight" content="no">
+
+	<!-- UC Mobile Browser  -->
+	<meta name="full-screen" content="yes">
+	<meta name="browsermode" content="application">
+	
+	<!-- Disable night mode for this page  -->
+	<meta name="nightmode" content="enable/disable">
+
+	<!-- Layout mode -->
+	<meta name="layoutmode" content="fitscreen/standard">
+
+	<!-- imagemode - show image even in text only mode  -->
+	<meta name="imagemode" content="force">
+
+	<!-- Orientation  -->
+	<meta name="screen-orientation" content="portrait">
+
+	<!-- Social media -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://uitmpwatraining.web.app/">
+  <meta property="og:title" content="PWATraining">
+  <meta property="og:image" content="images/icons/icon-512x512.png">
+  <meta property="og:site_name" content="PWATraining">
+  <meta property="og:description" content="Training Progressive Web App">
+
+  <meta name='twitter:creator' content='@your-twitter-handler'>
+  <meta name="twitter:url" content="https://uitmpwatraining.web.app/">
+  <meta name="twitter:title" content="PWATraining">
+  <meta name="twitter:image" content="images/icons/icon-512x512.png">
+  <meta name="twitter:site" content="@your-twitter-handler">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:description" content="Training Progressive Web App">
+
+  <link rel="stylesheet" type="text/css" href="css/app.css">
+
+</head>
+
+<body>
+
+	<div class="menu">
+    <div class="menu__header">
+      <span class="logo">
+				<img alt="Logo UiTM" src="images/logoUiTM.svg" height=100>
+      </span>
+    </div>
+    <ul class="menu__list">
+      <li><a id="page0" href="/#/home">Demo</a></li>
+      <li><a id="page1" href="/#/virtualcard">Page 1</a></li>
+      <li><a id="page2" href="/#/panduan">Page 2</a></li>
+      <li><a id="page3" href="/#/scheduler">Page 3</a></li>
+      <li id="web-push-toggle">
+        <a id="menuPush" onclick="return false">Notification &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a>
+        <div class="wrapper" style="">
+          <input type="checkbox" name="toggle" id="toggle">
+          <label for="toggle"></label>
+        </div>
+      </li>
+      <li><a id="menuAbout" href="/#">About</a></li>
+    </ul>
+
+    <div class="version">Version 0.10 ALPHA</div>
+  </div>
+
+  <div class="menu__overlay"></div>
+
+  <header class="header">
+    <span class="header__icon bttn" id="btnMenu">
+      <svg class="menu__icon no--select" width="24px" height="24px" viewBox="0 0 48 48" fill="#fff">
+        <path d="M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z" />
+      </svg>
+    </span>
+    <span class="bttn" id="btnBackHome" hidden>
+      <svg width="22px" height="22px" viewBox="0 0 306 306">
+        <polygon points="247.35,35.7 211.65,0 58.65,153 211.65,306 247.35,270.3 130.05,153" fill="#FFFFFF"/>
+      </svg>
+    </span>
+
+    <h1 class="header__title">PWA<b>Training</b></h1>
+
+    <span class="bttn" id="btnShare" style="display: block">
+      <svg width="22" height="22" viewBox="0 0 24 24">
+        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" fill="#FFFFFF"></path>
+      </svg>
+    </span>
+    <span class="bttn" id="btnHome" hidden>
+      <svg width="22" height="22" viewBox="0 0 510 510">
+        <polygon points="204,471.75 204,318.75 306,318.75 306,471.75 433.5,471.75 433.5,267.75 510,267.75 255,38.25 0,267.75 76.5,267.75 76.5,471.75" fill="#FFFFFF"/>
+      </svg>
+    </span>
+  </header>
+
+  <div class="container">
+    <div class="view page0">
+			<div class="page">
+
+				<div class="cardbox box-1 pwahomescreen" hidden>
+					<div class="box-body">
+						<span class="pwa-logo"></span>
+						<div class="pwa-text">
+							<div class="pwa-middle">
+								<div class="pwa-header">Easy access on Home Screen</div>
+								<div class="pwa-subheader">Our app is fast, small, and works offline.</div>
+							</div>
+						</div>
+					</div>
+					<div class="box-footer">
+						<button id="noinstallpwa" class="ripple">Not now</button><button id="installpwa" class="ripple">Install</button>
+					</div>
+				</div>
+
+				<div class="segment-text">Form</div>
+
+				<div class="cardbox box-1 testform">
+					<div class="box-body">
+						<div class="floating-form">
+							<div class="floating-label">      
+								<input id="i1" class="floating-input" type="text" style="text-transform: capitalize" placeholder=" ">
+								<label for="i1">Display name</label>
+							</div>
+							<div class="floating-label">      
+								<input id="i2" class="floating-input" type="text" onclick="(this.type='number')" pattern="[0-9]*" inputmode="numeric" min="0" oninput="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder=" ">
+								<label for="i2">Your height</label>
+							</div>
+							<div class="floating-label">      
+								<input id="i3" class="floating-input" type="password" placeholder=" ">
+								<label for="i3">Password</label>
+							</div>
+							<div class="floating-label">      
+								<input id="i4" class="floating-input" type="text" 
+											 onfocus="(this.type='time')" 
+											 onblur="this.type=this.value?'time':'text'"
+											 placeholder=" ">
+								<label for="i4">Time</label>
+							</div>
+							<div class="floating-label">      
+								<input id="i5" class="floating-input" type="text" 
+											 onfocus="(this.type='date')" 
+											 onblur="this.type=this.value?'date':'text'"
+											 placeholder=" ">
+								<label for="i5">Date</label>
+							</div>
+							<div class="floating-label">      
+								<input id="i6" class="floating-input" type="text" 
+											 onfocus="(this.type='datetime-local')" 
+											 onblur="this.type=this.value?'datetime-local':'text'"
+											 placeholder=" ">
+								<label for="i6">Date & time</label>
+							</div>
+							<div class="floating-label">  
+								<select id="i7" class="floating-select" onchange="this.setAttribute('value', this.value);" value="">
+									<option value=""></option>
+									<option value="1">Johor</option>
+									<option value="2">Kedah</option>
+									<option value="3">Kelantan</option>
+									<option value="4">Melaka</option>
+									<option value="5">Negeri Sembilan</option>
+								</select>
+								<label for="i7">State</label>
+							</div>
+							<div class="floating-label">      
+								<textarea id="i8" class="floating-input floating-textarea" placeholder=" "></textarea>
+								<label for="i8">Textarea</label>
+							</div>
+
+						</div>
+					</div>
+					<div class="box-footer pull-right">
+						<div class="button ripple">Save</div>
+					</div>
+				</div>
+
+				<div class="segment-text">Examples / Previews</div>
+
+				<div class="cardbox box-1 card-primary">
+					<div class="box-header">
+						<div>
+							Enroll Now!
+							<div class="box-subheader">Dont miss the opportunity</div>
+						</div>
+						<div class="badge badge-danger">35</div>
+					</div>
+					<div class="box-body">Body</div>
+					<div class="box-footer">
+						<div>Button 2</div><div class="button ripple">Button 1</div>
+					</div>
+				</div>
+				
+				<div class="cardbox box-1 card-danger">
+					<div class="box-header">
+						<div>
+							Enroll Now!
+							<div class="box-subheader">Dont miss the opportunity</div>
+						</div>
+					</div>
+					<div class="box-body">Body</div>
+					<div class="box-footer">
+						<div>Button 2</div><div>Button 1</div>
+					</div>
+				</div>
+
+				<div class="cardbox box-1 card-warning">
+					<div class="box-header">
+						<div>
+							Enroll Now!
+						</div>
+						<div class="badge badge-danger">99+</div>
+					</div>
+					<div class="box-body">Body</div>
+					<div class="box-footer pull-right">
+						<div>Button 1</div>
+					</div>
+				</div>
+
+				<div id="news">&copy 2020 Universiti Teknologi Mara (UiTM), Progressive Web App Training</div>
+			</div>
+    </div>
+
+    <div class="view page1">
+      <div class="page">
+
+				Page 1
+
+      </div>
+    </div>
+
+    <div class="view page2">
+      <div class="page">
+
+				Page 2
+
+      </div>
+    </div>
+
+		<div class="view page3">
+      <div class="page">
+
+				Page 3
+
+      </div>
+    </div>
+  </div>
+
+  <div class="dialog-container">
+    <div class="dialog">
+      <div class="dialog-title">Popup<b>Dialog</b></div>
+      <div class="dialog-body">
+        Contents here...
+      </div>
+    </div>
+  </div>
+
+	<div class="fs-message">
+		<div class="fms-container">
+			<div class="fsm-title">Fullscreen<b>Message</b></div>
+			<div class="fsm-body">
+				Text here...
+			</div>
+			<div class="fsm-footer" hidden>
+				<button class="btnLeft ripple" hidden>ACTION</button><button class="btnRight ripple" hidden>ACTION</button>
+			</div>
+		</div>
+  </div>
+
+  <div class="loader">
+    <svg viewBox="0 0 32 32" width="32" height="32">
+      <circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
+    </svg>
+  </div>
+
+  <div class="toast__container"></div>
+
+  <script src="js/menu.js" async></script>
+  <script src="js/toast.js" async></script>
+  <script src="js/swipe.js" async></script>
+  <script src="js/share.js" async></script>
+  <script src="js/app.js" type="module" async></script>
+
+</body>
+
+</html>

src/js/app.js

+(function() {
+  'use strict';
+
+  var app = {
+	registration: null,
+	visibleEl: null,
+	state: null,
+
+	appName: document.querySelector('.header__title').innerHTML,
+    isLoading: true,
+	daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+	months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+
+	page: document.querySelector('.container'),
+	spinner: document.querySelector('.loader'),
+    popupBox: document.querySelector('.dialog-container'),
+	fsMsg: document.querySelector('.fs-message'),
+	toast: document.querySelector('.toast__container'),
+	pwahomescreen: document.querySelector('.pwahomescreen'),
+	buttonInstall: document.getElementById('installpwa')
+  };
+
+  /*****************************************************************************
+   *
+   * Functions
+   *
+   ****************************************************************************/
+
+	app.changeView = function(cls = false, title = false) {
+		app.hideMenu();
+
+		// spesific actions for page
+		switch (cls) {
+			case 'switch-page0':
+				cls = false;
+				title = false;
+				break;
+			case 'switch-page1':
+				
+				break;
+			case 'switch-page2':
+				
+				break;
+			case 'switch-page3':
+				
+				break;
+		}
+
+		document.querySelector('.header__title').innerHTML = (title ? title : app.appName);
+		app.page.setAttribute('class', 'container');
+
+		if (cls) {
+			document.querySelector('#btnHome').style.display = 'block';
+			document.querySelector('#btnShare').style.display = 'none';
+
+			app.page.classList.add(cls);
+			app.visibleEl = '::' + cls;
+		}
+		else { // home page view
+			document.querySelector('#btnHome').style.display = 'none';
+			document.querySelector('#btnShare').style.display = 'block';
+
+			app.visibleEl = '::home';
+		}
+  };
+
+	app.reloadWebApp = function() {
+		document.location.reload();
+	};
+
+	app.closeFullscreenMsg = function() {
+		app.fsMsg.classList.remove('fs-message--visible');
+
+		// trick to remove all listeners
+		var el = app.fsMsg.querySelector('.fsm-footer');
+		var elClone = el.cloneNode(true);
+
+		el.parentNode.replaceChild(elClone, el);
+
+		app.fsMsg.querySelector('.fsm-footer').setAttribute('hidden', true);
+
+		app.fsMsg.querySelector('.fsm-footer button.btnLeft').setAttribute('hidden', true);
+		app.fsMsg.querySelector('.fsm-footer button.btnLeft').innerHTML = 'Action';
+		app.fsMsg.querySelector('.fsm-footer button.btnLeft').style.background = '#1a73e8';
+
+		app.fsMsg.querySelector('.fsm-footer button.btnRight').setAttribute('hidden', true);
+		app.fsMsg.querySelector('.fsm-footer button.btnRight').innerHTML = 'Action';
+		app.fsMsg.querySelector('.fsm-footer button.btnRight').style.background = '#e81a5d';
+	};
+
+	app.togglePopupDialog = function(visible = true) {
+    if (visible) {
+      app.popupBox.classList.add('dialog-container--visible');
+    }
+    else {
+      app.popupBox.classList.remove('dialog-container--visible');
+    }
+  };
+
+	app.showAboutDialog = function(e) {
+		e.preventDefault();
+		app.hideMenu();
+
+		app.popupBox.querySelector('.dialog-title').innerHTML = app.appName;
+		app.popupBox.querySelector('.dialog-body').innerHTML = 'Aplikasi ini adalah untuk kegunaan <i>Training</i> <b>Progressive Web App</b>.<br><br>Maklumat terkini akan dikemaskini dari semasa ke semasa.<br><br><span style="font-size: 70%;">Icon made by <b>Pixel perfect</b> from www.flaticon.com</span>';
+
+		app.togglePopupDialog(true);
+  };
+
+	app.disableContent = function(target, bool = true) {
+		var nodes = document.querySelector(target).getElementsByTagName('*');
+		for(var i = 0; i < nodes.length; i++){
+			nodes[i].disabled = bool;
+		}
+
+		if (bool)
+			document.querySelector(target).classList.add('disabled');
+		else
+			document.querySelector(target).classList.remove('disabled');
+	}
+
+	// Boilerplate borrowed from https://www.npmjs.com/package/web-push#using-vapid-key-for-applicationserverkey
+	app.urlBase64ToUint8Array = function(base64String) {
+		const padding = '='.repeat((4 - base64String.length % 4) % 4);
+		const base64 = (base64String + padding)
+			.replace(/\-/g, '+')
+			.replace(/_/g, '/');
+
+		const rawData = window.atob(base64);
+		const outputArray = new Uint8Array(rawData.length);
+
+		for (let i = 0; i < rawData.length; ++i) {
+			outputArray[i] = rawData.charCodeAt(i);
+		}
+		return outputArray;
+	};
+
+	app.registerPush = async function() {
+		toast('To be implemented.');
+
+	};
+
+	app.unregisterPush = function() {
+		toast('To be implemented.');
+
+	};
+
+	app.updateSubscriptionToTheServer = async function(subscription) {
+		console.info('Updating subscription...');
+
+	};
+
+	app.askPermission = function() {
+
+	};
+
+	app.subWebPush = function() {
+
+	};
+
+	app.installPromotion = function(show = true) {
+		app.pwahomescreen.style.display = (show ? 'block' : 'none');
+	};
+
+	app.toFixedTwo = function(number, pad) {
+    return "00000".substring((number + "").length, pad) + number;
+  };
+
+	app.isUrl = function(s) {
+		var regexp = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
+		return regexp.test(s.toLowerCase());
+	};
+
+  app.isLocalhost = function() {
+		// https://stackoverflow.com/questions/53563619/exclude-index-html-from-service-worker-cache-in-create-react-app
+		return Boolean(
+			window.location.hostname === 'localhost' ||
+			// [::1] is the IPv6 localhost address.
+			window.location.hostname === '[::1]' ||
+			// 127.0.0.1/8 is considered localhost for IPv4.
+			window.location.hostname.match(
+				/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+			)
+		);
+	};
+
+	app.updateOnlineStatus = function() {
+
+	};
+
+	app.fullscreenMsg = function(msg, title = app.appName, obj = false) {
+		app.fsMsg.querySelector('.fsm-title').innerHTML = title;
+		app.fsMsg.querySelector('.fsm-body').innerHTML = msg;
+
+		app.fsMsg.querySelector('.fsm-footer').removeAttribute('hidden');
+
+		if (obj) {
+			if (obj.right) {
+				app.fsMsg.querySelector('.fsm-footer button.btnRight').removeAttribute('hidden');
+				app.fsMsg.querySelector('.fsm-footer button.btnRight').innerHTML = obj.right.label;
+				app.fsMsg.querySelector('.fsm-footer button.btnRight').style.background = obj.right.color ? obj.right.color : '#1a73e8';
+				app.fsMsg.querySelector('.fsm-footer button.btnRight').addEventListener('click', obj.right.action ? obj.right.action : app.closeFullscreenMsg);
+			}
+			
+			if (obj.left) {
+				app.fsMsg.querySelector('.fsm-footer button.btnLeft').removeAttribute('hidden');
+				app.fsMsg.querySelector('.fsm-footer button.btnLeft').innerHTML = obj.left.label;
+				app.fsMsg.querySelector('.fsm-footer button.btnLeft').style.background = obj.left.color ? obj.left.color : '#e81a5d';
+				app.fsMsg.querySelector('.fsm-footer button.btnLeft').addEventListener('click', obj.left.action ? obj.left.action : app.closeFullscreenMsg);
+			}
+		}
+		else {
+			app.fsMsg.querySelector('.fsm-footer button.btnRight').removeAttribute('hidden');
+			app.fsMsg.querySelector('.fsm-footer button.btnRight').innerHTML = 'OK';
+			app.fsMsg.querySelector('.fsm-footer button.btnRight').style.background = '#1a73e8';
+			app.fsMsg.querySelector('.fsm-footer button.btnRight').addEventListener('click', app.closeFullscreenMsg);
+		}
+
+		app.fsMsg.classList.add('fs-message--visible');
+	};
+
+	async function run() {
+
+	};
+
+	app.nextTick = function() {
+		// run after registering Service Worker
+		console.info("Running other functions after registering SW...");
+
+		app.firstLoadFromHashIfAny();
+	};
+
+	app.firstLoadFromHashIfAny = function() {
+		var v1 = app.getHashParam().hash;
+		var v2 = document.querySelector("a[href='/" + v1 + "']");
+
+		if (v2) 
+			app.changeView('switch-'+v2.id, v2.innerHTML);
+	};
+
+	app.getState = function() {
+		if (document.visibilityState === 'hidden') {
+			return 'hidden';
+		}
+		if (document.hasFocus()) {
+			return 'focused';
+		}
+		return 'not focused';
+	};
+
+	app.logStateChange = function(nextState) {
+		var prevState = app.state;
+		if (nextState !== prevState) {
+			var timeBadge = new Date().toTimeString().split(' ')[0];
+			console.info('' + timeBadge + ' State changed from ' + prevState + ' to ' + nextState + '.');
+
+			app.state = nextState;
+		}
+	};
+
+	app.onPageStateChange = function() {
+		//app.logStateChange(app.getState())
+	};
+
+	app.getHashParam = function() {
+		if (window.location.hash) {
+			var tmp = window.location.hash.split('?')
+
+			var result         = {};
+					result['hash'] = tmp[0];
+
+			if (tmp[1]) {
+				tmp[1].split('&').reduce(function (result2, item) {
+					var parts = item.split('=');
+					result[parts[0]] = parts[1];
+				}, {});
+			}
+
+			return result;
+		}
+
+		return { hash: null };
+	};
+
+	/*****************************************************************************
+   *
+   * Event listeners for UI elements
+   *
+   ****************************************************************************/
+	
+  document.getElementById('btnHome').addEventListener('click', function() {
+    app.changeView();
+  });
+
+	document.getElementById('btnBackHome').addEventListener('click', function() {
+    app.changeView();
+  });
+
+  document.getElementById('page0').addEventListener('click', function(e) {
+		e.preventDefault();
+		app.changeView();
+	});
+
+  document.getElementById('page1').addEventListener('click', function(e) {
+		e.preventDefault();
+		app.changeView('switch-'+this.id, this.innerHTML);
+	});
+
+	document.getElementById('page2').addEventListener('click', function(e) {
+		e.preventDefault();
+		app.changeView('switch-'+this.id, this.innerHTML);
+	});
+
+	document.getElementById('page3').addEventListener('click', function(e) {
+		e.preventDefault();
+		app.changeView('switch-'+this.id, this.innerHTML);
+	});
+
+  document.getElementById('menuAbout').addEventListener('click', app.showAboutDialog);
+
+	app.popupBox.addEventListener('click', function() {
+    app.togglePopupDialog(false);
+  });
+
+	app.toast.addEventListener('click', function(event) {
+    if (event.target.classList.contains('clicktoreload'))
+      document.location.reload();
+  });
+
+	document.getElementById('toggle').addEventListener('change', function() {
+		if(this.checked) {
+			app.subWebPush();
+		}
+		else {
+			app.unregisterPush();
+		}
+	});
+
+	document.getElementById('noinstallpwa').addEventListener('click', function() {
+		app.installPromotion(false);
+	});
+	
+	['pageshow', 'focus', 'blur', 'visibilitychange', 'resume'].forEach(function (type) {
+		window.addEventListener(type, app.onPageStateChange, {capture: true});
+	});
+
+	// disable back function of the back button
+	window.addEventListener('popstate', function() {
+		history.pushState(null, document.title, location.href);
+	});
+
+  /*****************************************************************************
+   *
+   * Methods to update/refresh the UI
+   *
+   ****************************************************************************/
+
+  app.hideMenu = function() {
+    var menuElement = document.querySelector('.menu');
+    var menuOverlayElement = document.querySelector('.menu__overlay');
+
+    menuElement.style.transform = "translateX(-110%)";
+    menuElement.classList.remove('menu--show');
+    menuOverlayElement.classList.remove('menu__overlay--show');
+    menuElement.addEventListener('transitionend', onTransitionEnd, false);
+  };
+
+  function onTransitionEnd() {
+    var touchStartPoint;
+    var menuElement = document.querySelector('.menu');
+    var menuOverlayElement = document.querySelector('.menu__overlay');
+
+    if (touchStartPoint < 10) {
+      menuElement.style.transform = "translateX(0)";
+      menuOverlayElement.classList.add('menu__overlay--show');
+      menuElement.removeEventListener('transitionend', onTransitionEnd, false);
+    }
+  };
+
+	var isTouchSupported = 'ontouchstart' in window;
+  var evt = isTouchSupported ? 'touchend' : 'mouseup';
+
+  // iOS
+  document.ontouchmove = function(e) {
+    e.preventDefault();
+  };
+
+  var scrollingDiv0 = document.getElementsByClassName('page0')[0];
+  scrollingDiv0.addEventListener('touchmove', function(event) {
+		event.stopPropagation();
+  });
+
+  var scrollingDiv1 = document.getElementsByClassName('page1')[0];
+  scrollingDiv1.addEventListener('touchmove', function(event) {
+    event.stopPropagation();
+  });
+
+  var scrollingDiv2 = document.getElementsByClassName('page2')[0];
+  scrollingDiv2.addEventListener('touchmove', function(event) {
+		event.stopPropagation();
+  }); 
+
+	var scrollingDiv3 = document.getElementsByClassName('page3')[0];
+  scrollingDiv3.addEventListener('touchmove', function(event) {
+    event.stopPropagation();
+  });
+
+
+	window.addEventListener('load', function() {
+		console.group('[Starting App]');
+
+		if (app.isLocalhost()) {
+			// debugging
+			document.querySelector('.header__title').addEventListener('click', function() {
+				console.info(app.visibleEl);
+			});
+		}
+		else {
+			window.oncontextmenu = function(ev) {
+				ev.preventDefault();
+				ev.stopPropagation();
+				return false;
+			};
+		}
+
+		app.state = app.getState();
+
+		console.info(app.isLocalhost() ? 'localhost' : 'internet');
+
+		app.updateOnlineStatus();
+
+		if (typeof(Storage) !== "undefined") {
+			console.info("✔ 1) LocalStorage is supported.");
+		}
+		else {
+			console.info("✘ 1) Your browser has no LocalStorage support.");
+
+			document.getElementById('menuPush').classList.add("disabled");
+			document.getElementById('toggle').setAttribute("disabled", "disabled");
+		}
+
+		if (!("Notification" in window)) {
+			// Notification isn't supported on this browser, disable or hide UI.
+			console.info("✘ 2) Your browser has no Notification support.");
+
+			document.getElementById('menuPush').classList.add("disabled");
+			document.getElementById('toggle').setAttribute("disabled", "disabled");
+		}
+		else {
+			console.info("✔ 2) Notification is supported.");
+
+			if (Notification.permission === "granted") {
+				if (localStorage.getItem("subWebPush")==1)
+					document.querySelector('#toggle').checked = true;
+			}
+
+		}
+
+		if (!('PushManager' in window)) {
+			// Push isn't supported on this browser, disable or hide UI.
+			console.info("✘ 3) Your browser has no PushManager support.");
+
+			document.getElementById('menuPush').classList.add("disabled");
+			document.getElementById('toggle').setAttribute("disabled", "disabled");
+		}
+		else {
+			console.info("✔ 3) PushManager is supported.");
+		}
+
+		if ("Notification" in window && "showTrigger" in Notification.prototype) {
+			/* origin-trial - Notification Triggers supported */
+			console.info("✔ 4) Notification Triggers is supported.");
+		}
+		else {
+			console.info("✘ 4) Your browser has no Notification Triggers support.");
+		}
+
+		if (!('serviceWorker' in navigator)) {
+			// Service Worker isn't supported on this browser, disable or hide UI.
+			console.info("Service Worker isn't supported on this browser.");
+		}
+		else {
+			console.info('Registering service worker...');
+
+			run().then(app.nextTick);
+		}
+
+		if (app.isLoading) {
+			app.spinner.setAttribute('hidden', true);
+
+			app.isLoading = false;
+		}
+
+		console.groupEnd();
+
+	});
+
+})();

src/js/menu.js

+(function() {
+  'use strict';
+
+  var menuIconElement = document.querySelector('.header__icon');
+  var menuElement = document.querySelector('.menu');
+  var menuOverlayElement = document.querySelector('.menu__overlay');
+
+  //Menu click event
+  menuIconElement.addEventListener('click', showMenu, false);
+  menuOverlayElement.addEventListener('click', hideMenu, false);
+  menuElement.addEventListener('transitionend', onTransitionEnd, false);
+
+  //To show menu
+  function showMenu() {
+    menuElement.style.transform = "translateX(0)";
+    menuElement.classList.add('menu--show');
+    menuOverlayElement.classList.add('menu__overlay--show');
+  }
+
+  //To hide menu
+  function hideMenu() {
+    menuElement.style.transform = "translateX(-110%)";
+    menuElement.classList.remove('menu--show');
+    menuOverlayElement.classList.remove('menu__overlay--show');
+    menuElement.addEventListener('transitionend', onTransitionEnd, false);
+  }
+
+  var touchStartPoint, touchMovePoint;
+
+  /*Swipe from edge to open menu*/
+
+  //`TouchStart` event to find where user start the touch
+  document.body.addEventListener('touchstart', function(event) {
+    touchStartPoint = event.changedTouches[0].pageX;
+    touchMovePoint = touchStartPoint;
+  }, false);
+
+  //`TouchMove` event to determine user touch movement
+  document.body.addEventListener('touchmove', function(event) {
+    touchMovePoint = event.touches[0].pageX;
+    if (touchStartPoint < 10 && touchMovePoint > 30) {
+      menuElement.style.transform = "translateX(0)";
+    }
+  }, false);
+
+  function onTransitionEnd() {
+    if (touchStartPoint < 10) {
+      menuElement.style.transform = "translateX(0)";
+      menuOverlayElement.classList.add('menu__overlay--show');
+      menuElement.removeEventListener('transitionend', onTransitionEnd, false);
+    }
+  }
+})();

src/js/share.js

+(function() {
+  'use strict';
+
+  
+})();

src/js/sw.js

+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.3/workbox-sw.js');
+
+if (workbox) {
+  console.log(`Yay! Workbox is loaded 🎉`);
+
+  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
+
+	workbox.googleAnalytics.initialize();
+
+} else {
+  console.log(`Boo! Workbox didn't load 😬`);
+}
+
+self.addEventListener('install', function(e) {
+  self.skipWaiting();
+
+});
+
+self.addEventListener('activate', function(e) {
+  return self.clients.claim();
+
+});
+
+self.addEventListener('push', function(e) {
+  const data = e.data.json();
+  var options;
+
+  if (data.url) {
+    options = {
+      body : data.body,
+      badge: "./images/badges/notification_192.png",
+      icon : "./images/icons/icon-192x192.png",
+      vibrate: [100, 50, 100],
+			data : {url: data.url},
+      actions: [
+        {
+          action: 'web-action',
+          title: 'Open web'
+        }
+      ]
+    }
+  }
+  else {
+    options = {
+      body : data.body,
+      badge: "./images/badges/notification_192.png",
+      icon : "./images/icons/icon-192x192.png",
+      vibrate: [100, 50, 100]
+    }
+  }
+
+  self.registration.showNotification(data.title, options);
+});
+
+self.addEventListener('pushsubscriptionchange', function(e) {
+  console.info('Subscription expired');
+
+});
+
+self.addEventListener('notificationclick', function(e) {
+  if (!e.action) {
+    // Was a normal notification click
+    console.info('Notification Click.');
+    return;
+  }
+
+  switch (e.action) {
+    case 'web-action':
+      e.notification.close();
+
+      e.waitUntil(
+        clients.openWindow(e.notification.data.url)
+      );
+      break;
+  }
+});

src/js/swipe.js

+(function() {
+  'use strict';
+
+  // credit: http://www.javascriptkit.com/javatutors/touchevents2.shtml
+   function swipedetect(el, callback){
+
+    var touchsurface = el,
+    swipedir,
+    startX,
+    startY,
+    dist,
+    distX,
+    distY,
+    threshold = 120, //required min distance traveled to be considered swipe
+    restraint = 100, // maximum distance allowed at the same time in perpendicular direction
+    allowedTime = 300, // maximum time allowed to travel that distance
+    elapsedTime,
+    startTime,
+    handleswipe = callback || function(swipedir){};
+
+    touchsurface.addEventListener('touchstart', function(e){
+    var touchobj = e.changedTouches[0];
+      swipedir = 'none';
+      dist = 0;
+      startX = touchobj.pageX;
+      startY = touchobj.pageY;
+      startTime = new Date().getTime(); // record time when finger first makes contact with surface
+    }, false);
+/**
+    touchsurface.addEventListener('touchmove', function(e){
+      e.preventDefault() // prevent scrolling when inside DIV
+    }, false);
+**/
+    touchsurface.addEventListener('touchend', function(e){
+      if(e.changedTouches.length > 0) {
+        var touchobj = e.changedTouches[0];
+        distX = touchobj.pageX - startX; // get horizontal dist traveled by finger while in contact with surface
+        distY = touchobj.pageY - startY; // get vertical dist traveled by finger while in contact with surface
+        elapsedTime = new Date().getTime() - startTime; // get time elapsed
+        if (elapsedTime <= allowedTime){ // first condition for awipe met
+          if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
+            swipedir = (distX < 0)? 'left' : 'right'; // if dist traveled is negative, it indicates left swipe
+          }
+          else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
+            swipedir = (distY < 0)? 'up' : 'down'; // if dist traveled is negative, it indicates up swipe
+          }
+        }
+        handleswipe(swipedir);
+      }
+    }, false);
+  }
+
+  var menuIconElement    = document.querySelector('.header__icon');
+  var menuElement        = document.querySelector('.menu');
+  var menuOverlayElement = document.querySelector('.menu__overlay');
+
+  function showMenu() {
+    menuElement.style.transform = "translateX(0)";
+    menuElement.classList.add('menu--show');
+    menuOverlayElement.classList.add('menu__overlay--show');
+  }
+
+  //USAGE:
+  // swipedir contains either "none", "left", "right", "top", or "down"
+
+  var e;
+  try {
+    e = new Event('touchend');
+  }
+  catch (error) {
+    e = document.createEvent('TouchEvent');
+    e.initEvent('touchend', true, true);
+  }
+
+  var main = document.querySelector('.page0');
+  swipedetect(main, function(swipedir){
+    if(swipedir=='right') {
+      showMenu();
+    }
+  });
+
+})();

src/js/toast.js

+(function(exports) {
+  'use strict';
+
+  var toastContainer = document.querySelector('.toast__container');
+
+  function toast(msg, options, clss) {
+    if (!msg) return;
+
+    options = options || 3000;
+		clss = clss || '';
+
+    var toastMsg = document.createElement('div');
+
+    toastMsg.className = 'toast__msg toast__msg--visible ' + clss;
+    toastMsg.innerHTML = msg;
+
+    toastContainer.appendChild(toastMsg);
+
+    //Show toast for 3secs and hide it
+    setTimeout(function() {
+      toastMsg.classList.remove('toast__msg--visible');
+    }, options);
+
+    //Remove the element after hiding
+    toastMsg.addEventListener('transitionend', function(event) {
+      event.target.parentNode.removeChild(event.target);
+    });
+  }
+
+  exports.toast = toast; //Make this method available in global
+})(typeof window === 'undefined' ? module.exports : window);

src/sw.js

+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.3/workbox-sw.js');
+
+if (workbox) {
+  console.log(`Yay! Workbox is loaded 🎉`);
+
+  workbox.precaching.precacheAndRoute([{"revision":"b1c77f9c5225951a9c6bd70d4188fa6a","url":"index.html"},{"revision":"6f38b559ee2733468231d0e3589a46f2","url":"favicon.ico"},{"revision":"fa694d319ff249bbafc9b0ebeb5bdd8a","url":"css/app.css"},{"revision":"0d606a447f16af75e775b64b27f3c442","url":"js/app.js"},{"revision":"ae75e72cfa193100f2baba436c50616b","url":"js/menu.js"},{"revision":"07eab90e6269c3f19ddc34ddfb890adf","url":"js/share.js"},{"revision":"fc8aef5e3399c8fb6efea89b54459f11","url":"js/swipe.js"},{"revision":"609e8f6ce7aa15cd2e5effde31057a80","url":"js/toast.js"},{"revision":"9cff0b914c679f32a3c1e4162f80522a","url":"images/badges/notification_192.png"},{"revision":"784b1c63c7be412d166db4a3d49f2501","url":"images/icons/icon-128x128.png"},{"revision":"adb787791bb14d1a5a076321c886b171","url":"images/icons/icon-144x144.png"},{"revision":"e25a0afa07977ad1039a46b9ab82daee","url":"images/icons/icon-152x152.png"},{"revision":"86e1f0fae80ecb97faad31f57d88aaec","url":"images/icons/icon-192x192.png"},{"revision":"72c220ac025d55ff95abe164ffb31db4","url":"images/icons/icon-384x384.png"},{"revision":"720fb062cb6d0f37070a9d877967a894","url":"images/icons/icon-512x512.png"},{"revision":"c03ad90690383f8dc249bb6c7a407aab","url":"images/icons/icon-72x72.png"},{"revision":"2ee2cc270deb2d95e2c8773398eff1fe","url":"images/icons/icon-96x96.png"},{"revision":"1b9053762212073bbade3145680cbf41","url":"images/logoUiTM.svg"}]);
+
+	workbox.googleAnalytics.initialize();
+
+} else {
+  console.log(`Boo! Workbox didn't load 😬`);
+}
+
+self.addEventListener('install', function(e) {
+  self.skipWaiting();
+
+});
+
+self.addEventListener('activate', function(e) {
+  return self.clients.claim();
+
+});
+
+self.addEventListener('push', function(e) {
+  const data = e.data.json();
+  var options;
+
+  if (data.url) {
+    options = {
+      body : data.body,
+      badge: "./images/badges/notification_192.png",
+      icon : "./images/icons/icon-192x192.png",
+      vibrate: [100, 50, 100],
+			data : {url: data.url},
+      actions: [
+        {
+          action: 'web-action',
+          title: 'Open web'
+        }
+      ]
+    }
+  }
+  else {
+    options = {
+      body : data.body,
+      badge: "./images/badges/notification_192.png",
+      icon : "./images/icons/icon-192x192.png",
+      vibrate: [100, 50, 100]
+    }
+  }
+
+  self.registration.showNotification(data.title, options);
+});
+
+self.addEventListener('pushsubscriptionchange', function(e) {
+  console.info('Subscription expired');
+
+});
+
+self.addEventListener('notificationclick', function(e) {
+  if (!e.action) {
+    // Was a normal notification click
+    console.info('Notification Click.');
+    return;
+  }
+
+  switch (e.action) {
+    case 'web-action':
+      e.notification.close();
+
+      e.waitUntil(
+        clients.openWindow(e.notification.data.url)
+      );
+      break;
+  }
+});