From 07de9ff5767ff4ae202b904e36e257571082d693 Mon Sep 17 00:00:00 2001 From: Jonathan Ha <78988736+jonha1@users.noreply.github.com> Date: Tue, 2 Jul 2024 21:48:02 -0400 Subject: [PATCH] FAQ Page (#17) --- src/css/main.css | 143 +++++++++++++++++++++++++++++++---------------- src/help.html | 70 +++++++++++++++++++++++ src/index.html | 38 +++++++++---- vite.config.ts | 1 + 4 files changed, 195 insertions(+), 57 deletions(-) create mode 100644 src/help.html diff --git a/src/css/main.css b/src/css/main.css index e9cb0b7..aba36db 100644 --- a/src/css/main.css +++ b/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; diff --git a/src/help.html b/src/help.html new file mode 100644 index 0000000..c0f2747 --- /dev/null +++ b/src/help.html @@ -0,0 +1,70 @@ + + + + + + + + + + + +
+
+
+
+ + Track callouts + - Announce nearby locations as you move around. +
+
+
+ +
+
+
+ + Announce places near me + - Announce nearby locations and how far away they are. +
+
+
+ +
+
+
+ + Voice + - Select the voice that announces nearby locations. +
+
+
+ + +
+
+
+ +
2
+ +
+ Speaking rate - Adjust how fast the voice talks. +
+
+
+ + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index f520403..3db57b7 100644 --- a/src/index.html +++ b/src/index.html @@ -10,7 +10,6 @@ - + - + +
@@ -52,4 +70,4 @@
- + \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index ceda7c8..00a4ebc 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -13,6 +13,7 @@ export default defineConfig({ input: { index: './src/index.html', replay_gpx: './src/replay_gpx.html', + help: './src/help.html' } } },