wtg / shuttle-tracker-web Goto Github PK
View Code? Open in Web Editor NEWLicense: Mozilla Public License 2.0
License: Mozilla Public License 2.0
Is your feature request related to a problem? Please describe.
I noticed the new Shuttle Tracker launched recently. At the bottom of the page, there is a link that says "Old Web Interface," and it lets you use Shuttle Tracker in its original appearance. The problem with this is the text color for this link does not contrast well enough with the background. On light mode, it is a light gray that almost blends in with the white background, and on dark mode, it is completely black and is hard to see on a near-black background.
Describe the solution you'd like
I think it would be best to make the text color on light mode darker and the text color on dark mode much brighter. With these changes, this text will contrast more with the background and be more visible to the user.
Screenshots
Light mode text color:
Dark mode text color:
We need to add an apple-app-site-association
file. This file must be formatted in JSON with the following content, exactly verbatim:
{
"appclips": {
"apps": [
"SYBLH277NF.com.gerzer.shuttletracker.appclip"
]
}
}
It must be accessible at this exact URL: https://web.shuttletracker.app/.well-known/apple-app-site-association
(Note the .
in .well-known
and the lack of a file extension.)
This file is necessary to make the iOS App Clip work properly.
Add the green crosshair and purple exclamation mark icons for color blind mode.
Web UI on large screens (union especially) looks weird. Add a full screen mode support to solve it.
Make it easier for the user to change light and dark mode than changing the system's settings.
Add the switch (similar to the colorblind switch) under settings.
Create a dev mode that adds both high quality and low quality data to the map.
Our map is now a square, sad. Lets change it back to have rounded corners.
Parse announcements from server and display it in the frontend.
Add an <html lang="en">
to identify the language of the page.
for the bus icon descriptions, show icon images rather than using descriptive text
change the H, L colorblind bus icons to plus and exclamation mark
Our API is dead :(
Add option to change to colorblind mode; if in it, have different emojis for high quality/low quality buses.
Update to Spring 2022 schedule.
I've been told that we need to add a link to the old Web interface prior to our coordinated public launch. The link should direct to https://old.shuttletracker.app.
Add a bus schedule that only appears on the map when full-screen mode is enabled.
Added some CSS to the schedule to reduce the size of the bullets and change the padding
Add a static schedule (operational hours) just under the map as a new Vue component.
Something like this from the old shuttle tracker.
Add a link to the IOS app in the footer.
We need to add the following <meta>
tag:
<meta name="apple-itunes-app" content="app-id=1583503452, app-clip-bundle-id=com.gerzer.shuttletracker.appclip, app-clip-display=card">
Add favicons to the shuttle tracker site. This includes:
Also include a manifest file in the header to manage the icons. Checkout this site for more info. All of these files can be generated with an online tool.
Create a .env file to configure global settings such as API_URL, API_VERSION, DEV_TOOLS_ENABLED and more, to get ready for the production release.
Scrolling animation of the announcement banner is too fast on large screens (non-mobile widths).
When color blind mode is toggled, a modal will pop up that explains what each icon do. Also add a cookie so the modal is only shown once
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.