From fa5c8e9d7004f794ee4dbc961f4792f7f477ede1 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Fri, 10 Nov 2023 13:05:19 -0700
Subject: [PATCH] Add detection page and route

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/js/app.js        |  1 +
 src/js/routes.js     |  5 +++++
 src/pages/detect.vue | 37 +++++++++++++++++++++++++++++++++++++
 src/pages/home.vue   |  1 +
 4 files changed, 44 insertions(+)
 create mode 100644 src/pages/detect.vue

diff --git a/src/js/app.js b/src/js/app.js
index 37ef7b9..d989f8f 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -13,6 +13,7 @@ import 'framework7/css/bundle';
 // Import Icons and App Custom Styles
 import '../css/icons.css';
 import '../css/app.css';
+import '../fonts/outlined.css';
 
 // Import App Component
 import App from '../components/app.vue';
diff --git a/src/js/routes.js b/src/js/routes.js
index 3364fe8..0a21850 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -1,6 +1,7 @@
 
 import HomePage from '../pages/home.vue';
 import AboutPage from '../pages/about.vue';
+import DetectPage from '../pages/detect.vue';
 
 import DynamicRoutePage from '../pages/dynamic-route.vue';
 import RequestAndLoad from '../pages/request-and-load.vue';
@@ -15,6 +16,10 @@ var routes = [
     path: '/about/',
     component: AboutPage,
   },
+  {
+    path: '/detect/',
+    component: DetectPage,
+  },
 
 
   {
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
new file mode 100644
index 0000000..8e54497
--- /dev/null
+++ b/src/pages/detect.vue
@@ -0,0 +1,37 @@
+<template>
+    <f7-page name="detect">
+      <!-- Top Navbar -->
+      <f7-navbar large :sliding="false">
+        <f7-nav-left>
+          <f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
+        </f7-nav-left>
+        <f7-nav-title sliding>Region</f7-nav-title>
+      </f7-navbar>
+      <!-- Toolbar-->
+      <f7-toolbar bottom>
+        <f7-link>Left Link</f7-link>
+        <f7-link>Right Link</f7-link>
+      </f7-toolbar>
+
+      <f7-block>
+        <f7-col>
+            <f7-block>
+                Image goes here
+            </f7-block>
+            <f7-row>
+                <f7-link>
+                    Region menu
+                </f7-link>
+                <f7-link icon="material-icons-outlined" icon-material="visibility" icon-size="48" />
+                <f7-link icon="material-icons-outlined" icon-material="image" icon-size="48" />
+                <f7-link icon="material-icons-outlined" icon-material="videocam" icon-size="48" />
+            </f7-row>
+            <f7-list>
+                <f7-list-item>
+                    Results list
+                </f7-list-item>
+            </f7-list>
+        </f7-col>
+      </f7-block>
+    </f7-page>
+</template>
\ No newline at end of file
diff --git a/src/pages/home.vue b/src/pages/home.vue
index 738820b..8932358 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -34,6 +34,7 @@
     </div>
     <f7-block-title>Navigation</f7-block-title>
     <f7-list strong inset dividersIos>
+      <f7-list-item link="/detect/" title="Detect"></f7-list-item>
       <f7-list-item link="/about/" title="About"></f7-list-item>
     </f7-list>