FAQ Page

src/css/main.css

@@ -7,97 +7,106 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    font-size: 1.2em;
-    /* Increase default font size for better readability */
+    font-size: 1.8em; /* Increase default font size for better readability */
+    justify-content: center; /* Center content horizontally */
+    align-items: center; /* Center content vertically */
 }
 
 /* Top button bar */
 nav {
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between; /* Adjust alignment of elements */
+    align-items: center;
     background-color: #2c3e50;
+    color: white;
     padding: 15px;
+    overflow-x: hidden; /* Prevent horizontal scrolling */
+}
+
+nav select#voice {
+    max-width: 25%; 
 }
 
-/* beacon-button is the class name for the buttons that appear from the callouts beacon */
+.home-container {
+    margin-right: auto; /* Push the home button to the left */
+}
+
+.title-container {
+    flex-grow: 1; 
+    text-align: center; /* Center-align the title */
+}
+
+nav h1 {
+    /* text-align: center;  */
+    color: white;
+    margin: 0;
+
+}
+
+.nav-button a {
+    color: white; /* Change the color to white */
+}
 
 .nav-button,
 .beacon-button,
 nav input,
 nav select {
-    background-color: #e74c3d;
+    background-color: #e74c3c;
     color: #fff;
     border: none;
-    padding: 15px;
+    padding: 10px; /* Decrease padding */
     border-radius: 8px;
     cursor: pointer;
-    font-size: 1.2em;
-    /* Larger font size for buttons, inputs, and select */
-    margin-right: 10px;
-    /* Add some spacing between controls */
-    max-width: 20%;
+    font-size: 1em; /* Adjust font size */
 }
 
+nav input,
+nav select {
+    max-width: 30%; /* on replay_gpx, don't let file selector/slider get too big */
+}
 
 #rate {
     display: flex;
-    flex-direction: row;
+    /* flex-direction: row; */
     align-items: center;
     justify-content: center;
-    /* border: dashed red; */
     background-color: #e74c3d;
     cursor: pointer;
     font-size: 1.1em;
     margin-right: 10px;
-    padding: 2%;
+    padding: 5px;
     border-radius: 8px;
     max-width: 20%;
 }
 
-#rate div{
-    height: 3vh;
-    padding: 0vw 1.5vw;
-    font-size: 1.1em;
-    color: white;
-    /* text-align: center; */
-    display: flex;
-    justify-content: center;
-    align-items: center;
+#rate div {
+    height: 30px; /* Adjust height of rate value container */
+    padding: 0 10px; /* Add padding */
+    font-size: 1em; /* Adjust font size */
 }
 
 #rate button {
-    /* margin: 0px 6px; */
-    /* Green */
     background-color: transparent;
     border: none;
     color: white;
-    /* text-align: center; */
-    padding: 2vw;
+    padding: 1vw;
     font-size: 1em;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-#rate button:hover {
-    cursor: pointer;
-}
-
 /* Speaking and playback rate selectors don't need to be as large */
 nav input[type="number"] {
-    max-width: 10%;
+    max-width: 10%; /* Adjust width */
 }
 
 /* Voice selector should be wider (names can be long) */
 nav select {
-    max-width: 40%;
+    max-width: 40%; /* Adjust width of voice selector */
 }
 
-/* GPX file selector and seek position should be wider -- probably not running on a phone */
-nav input[type="file"],
-nav input[type="range"] {
-    max-width: none;
-}
+
 
 main {
     padding: 15px;
@@ -106,18 +115,42 @@ main {
     justify-content: space-between;
 }
 
+.grey-box {
+    background-color: #e0e0e0; 
+    padding: 20px; 
+    margin: 10px;
+    align-items: center; /* Align items vertically */
+  }
+
+  .grey-box button {
+    background-color: #e74c3d; 
+    color: white; 
+    border: none; 
+    padding: 10px; 
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+.home {
+    font-size: 2.0em;
+    padding: 5px 10px; 
+    margin-right: auto;
+    background-color: #e74c3d; 
+    border: none; 
+}
+
 #map {
     width: 100%;
     height: 300px;
-    /* Adjusted height for better visibility */
     border: 2px solid #000;
-    /* Higher contrast for the map border */
     margin-bottom: 15px;
 }
 
+
+
 #recentCalloutsArea {
     height: calc(100vh - 435px);
-    /* all vertical space after map + button row */
     overflow-y: auto;
     flex-basis: 100%;
 }
@@ -131,7 +164,6 @@ main {
 #recentCalloutsArea p {
     list-style: none;
     border-bottom: 2px solid #000;
-    /* Higher contrast for list item borders */
     padding: 15px;
     margin: 0;
     overflow: hidden;
@@ -158,13 +190,11 @@ main {
 @media screen and (min-width: 600px) {
     #map {
         height: calc(100vh - 140px);
-        /* all vertical space after button row */
         width: 48%;
     }
 
     #recentCalloutsArea {
         height: calc(100vh - 140px);
-        /* all vertical space after button row */
         flex-basis: 48%;
     }
 
@@ -173,7 +203,7 @@ main {
         padding: 0px;
     }
 
-    #rate div{
+    #rate div {
         font-size: 1.2em;
     }
 
@@ -194,12 +224,31 @@ main {
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-bottom: 40px solid red;
-    /* You can change the color */
     transform-origin: bottom center;
 }
 
+img {
+    width: 25%;
+    height: auto;
+}
+
+.help-link {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.row {
+    margin-bottom: 20px;
+}
 /* Current beacon marker on map */
-.beacon-icon {
+ .beacon-icon {
     position: relative;
     width: 20px;
     height: 20px;

src/help.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
+        <link rel="stylesheet" href="./css/main.css" />
+    </head>
+    <body>
+        <nav>
+            <div class="home-container">
+                <button class="home" title="Home">
+                    <a href="./index.html" class="help-link">&#x2302;</a>
+                </button>
+            </div>
+            <div class="title-container">
+                <h1>Help</h1>
+            </div>
+        </nav>
+
+        <div class="container">
+            <div class="row">
+                <div class="col">
+                    <div class="grey-box">
+                        <button title="Track callouts">
+                            <i class="fas">&#xf124;</i>
+                        </button>
+                        <strong>Track callouts</strong>
+                        - Announce nearby locations as you move around.
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col">
+                    <div class="grey-box">
+                        <button id="btn_near_me" title="Announce places near me">ⓘ</button>
+                        <strong>Announce places near me</strong>
+                        - Announce nearby locations and how far away they are.
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col">
+                    <div class="grey-box">
+                        <button title="Voice">
+                            <i class="fas">🗣</i>
+                        </button>
+                        <strong>Voice</strong>
+                        - Select the voice that announces nearby locations.
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="col">
+                <div class="grey-box">
+                    <div id="rate" title="Speaking rate">
+                        <button id="decreaseRate" title="Decrease speaking rate">−</button>
+                        <div id="rateValue">2</div>
+                        <button id="increaseRate" title="Increase speaking rate">+</button>
+                    </div>
+                    <strong>Speaking rate </strong>- Adjust how fast the voice talks.
+                </div>
+            </div>
+            </div>
+
+    </body>
+</html>

src/index.html

@@ -10,7 +10,6 @@
     <!-- Render to a usable size on mobile -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-
     <script
       type="module"
       src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"
@@ -21,28 +20,47 @@
     ></script>
 
     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
     <link rel="stylesheet" href="./css/main.css" />
-    
+
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
     <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
+    <script src="./js/vendor/unmute.js" type="module"></script>
     <script src="./js/main.js" type="module"></script>
   </head>
   <body>
     <nav>
-      <button class="nav-button" id="btn_callouts" title="Start tracking callouts">
-        ⌖
-      </button>
-      <button class="nav-button" id="btn_near_me" title="Announce places near me">
+      <button class="nav-button"
+      id="btn_callouts" title="btn_callouts">
+        <i class='fas'>&#xf124;</i>
+    </button>
+      <button
+        class="nav-button"
+        id="btn_near_me"
+        title="Announce places near me"
+      >
         ⓘ
       </button>
-      <select class="nav-button" id="voice" name="voice" title="Voice" required></select>
-
+      <select
+        class="nav-button"
+        id="voice"
+        name="voice"
+        title="Voice"
+        required
+      ></select>
+
       <div id="rate" title="Speaking rate">
         <button id="decreaseRate" title="Decrease speaking rate">−</button>
         <div id="rateValue">2</div>
         <button id="increaseRate" title="Increase speaking rate">+</button>
       </div>
-
+
+      <button class="nav-button">
+        <a href="./help.html" title="FAQ page">
+            <i class="fas fa-question" style="color: white;"></i>
+        </a>
+    </button>
+
     </nav>
 
     <main>
@@ -52,4 +70,4 @@
       </section>
     </main>
   </body>
-</html>
+</html>