Add UI for selecting appointment type

www/assets/css/app.css

@@ -180,4 +180,8 @@ Framework7 and FontAwesome both have a .fab class
     background-color: white;
     padding: 1em;
     border-radius: 10px;
+}
+
+.card.pointercursor {
+    cursor: pointer;
 }

www/assets/css/home.css

@@ -12,8 +12,4 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 .widelogo {
     max-width: 200px;
     width: 50%;
-}
-
-div.page[data-name="home"] .card {
-    cursor: pointer;
 }

www/pages/appointment.html

@@ -13,13 +13,37 @@
                     <span class="if-not-md">Back</span>
                 </a>
             </div>
-            <div class="title">Schedule Pickup</div>
+            <div class="title">Book Appointment</div>
         </div>
     </div>
 
 
+    {{#if url}}
     <div class="page-content" style="overflow-y: hidden;">
         <iframe src="{{url}}" style="width: 100%; border: none; height: 100%;"></iframe>
     </div>
+    {{else}}
+    <div class="page-content noselect">
+        <div class="row justify-content-center margin-top">
+            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
+                <div class="row justify-content-center">
+                    {{#each services}}
+                    <div class="col-100 small-50 large-33 no-margin-vertical">
+                        <div class="card hapticbtn pointercursor" onclick="router.navigate('/appointment/{{serviceid}}');">
+                            <div class="card-content text-align-center padding">
+                                <h1 class="no-margin"><i class="{{icon}}"></i></h1>
+                                <br />
+                                <span style="font-weight: 700;">{{title}}</span>
+                                <br />
+                                <span>{{text}}</span>
+                            </div>
+                        </div>
+                    </div>
+                    {{/each}}
+                </div>
+            </div>
+        </div>
+    </div>
+    {{/if}}
 
 </div>

www/pages/home.html

@@ -22,7 +22,7 @@
                 <div class="row justify-content-center">
                     {{#each pages}}
                     <div class="col-100 small-50 large-33 no-margin-vertical">
-                        <div class="card hapticbtn" onclick="router.navigate('{{href}}');">
+                        <div class="card hapticbtn pointercursor" onclick="router.navigate('{{href}}');">
                             <div class="card-content text-align-center padding">
                                 <h1 class="no-margin"><i class="{{icon}}"></i></h1>
                                 <br />

www/routes.js

@@ -15,10 +15,10 @@ var routes = [
                 context: {
                     pages: [
                         {
-                            title: "Schedule Pickup",
+                            title: "Book Appointment",
                             href: "/appointment",
                             icon: "fad fa-calendar-alt",
-                            text: "Request a curbside courier to mail and ship your items."
+                            text: "Get mailing, shipping, and notary services on your schedule anywhere in the Helena area."
                         },
                         {
                             title: "Track Package",
@@ -59,18 +59,45 @@ var routes = [
         path: '/appointment',
         name: 'appointment',
         async: function (routeTo, routeFrom, resolve, reject) {
-            var url = SETTINGS.appointmenturl;
-            if ($("#app").hasClass("theme-dark")) {
-                url = SETTINGS.appointmenturl_darkmode;
-            }
             resolve({
                 templateUrl: './pages/appointment.html'
             }, {
                 context: {
-                    url: url
+                    services: [
+                        {
+                            title: "Package Pickup",
+                            text: "A courier will come to you and ship your mail, packages, etc.",
+                            icon: "fad fa-hand-holding-box",
+                            serviceid: 19
+                        },
+                        {
+                            title: "Mobile Notary",
+                            text: "A notary public will come to you and notarize your documents.",
+                            icon: "fad fa-file-signature",
+                            serviceid: 21
+                        }
+                    ]
                 }
             });
-        }
+        },
+        routes: [
+            {
+                path: "/:serviceId",
+                async: function (routeTo, routeFrom, resolve, reject) {
+                    var url = SETTINGS.appointmenturl;
+                    if ($("#app").hasClass("theme-dark")) {
+                        url = SETTINGS.appointmenturl_darkmode;
+                    }
+                    resolve({
+                        templateUrl: './pages/appointment.html'
+                    }, {
+                        context: {
+                            url: url + "&service=" + routeTo.params.serviceId
+                        }
+                    });
+                }
+            }
+        ]
     },
     {
         path: '/track',

www/settings.js

@@ -12,8 +12,8 @@ var SETTINGS = {
         loyalty: "https://helena.express/loyalty.php"
     },
     stripe_pubkey: "pk_live_RgpadCo1LIIkfyUsY47VhUq6",
-    appointmenturl: "https://appointments.netsyms.com/index.php?service=19&hlnexp=1&embed=1&only=1",
-    appointmenturl_darkmode: "https://appointments.netsyms.com/index.php?service=19&hlnexp=1&embed=1&only=1&theme=darkly",
+    appointmenturl: "https://appointments.netsyms.com/index.php?hlnexp=1&embed=1&only=1&theme=darkly",
+    appointmenturl_darkmode: "https://appointments.netsyms.com/index.php?hlnexp=1&embed=1&only=1&theme=darkly",
     branding: {
         apptitle: "Helena Express",
         company: "Helena Express",