Initial commit

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

CNAME

@@ -0,0 +1 @@
+taxirouter.sg

README.md

@@ -0,0 +1,37 @@
+TaxiRouter SG
+===
+
+![](screenshots/screenshot-1.png)
+
+**TaxiRouter SG** is a web app that lets you explore available taxis and taxi stands in Singapore. Period.
+
+It has very little number of features:
+
+- List all taxi stands in Singapore.
+- Shows all available taxis in the whole Singapore.
+- Tells how many available taxis around you.
+- Tells how far is the nearest taxi stand around you.
+
+That's it.
+
+Technicalities
+---
+
+Data is from <https://data.gov.sg/>.
+
+Here's a sprinkle of NPM magic:
+
+- `npm i` - install everything
+- `npm run taxi-stands` - fetch taxi stands
+- `npm run lodash` - generate a custom Lodash build
+- `npm run inliner` - inline all assets from `_index.html` to `index.html`
+- `npm run watch` - watch files and run `inliner` when files changed
+- `npm run serve` - run a local server
+- `npm start` - runs both `watch` and `serve`
+
+License
+---
+
+Data is copyrighted by the [Land Transport Authority](http://www.lta.gov.sg/).
+
+Everything else [MIT](http://cheeaun.mit-license.org/).

assets/app.css

@@ -0,0 +1,262 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #B3D1FF;
+}
+
+body, input, button {
+  font-family: Roboto, sans-serif;
+}
+
+a{
+  color: #4285f4;
+  text-decoration: none;
+}
+a:hover{
+  text-decoration: underline;
+}
+
+button{
+  font-size: 1em;
+  cursor: pointer;
+  border: 1px solid #4285f4;
+  border-radius: 5px;
+  padding: 10px;
+  color: #4285f4;
+  background-color: transparent;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+button:active{
+  color: #fff;
+  background-color: #4285f4;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+header {
+  padding: 10px;
+  cursor: pointer;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: absolute;
+  z-index: 1;
+}
+
+header:active {
+  opacity: .7;
+}
+
+header h1 {
+  margin: 0;
+  padding: 0;
+  -webkit-filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+}
+
+header svg {
+  vertical-align: top;
+}
+
+#about {
+  color: #333;
+  background-color: rgba(255,255,255,.9);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  max-height: 100%;
+  overflow: auto;
+  z-index: 2;
+  padding: 5px 10px 5px;
+  -webkit-transition: -webkit-transform .3s cubic-bezier(0.150, 0.780, 0.180, 1.170);
+  transition: transform .3s cubic-bezier(0.150, 0.780, 0.180, 1.170);
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+  pointer-events: none;
+}
+
+#about.show {
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  pointer-events: auto;
+  box-shadow: 0 1px 15px rgba(0,0,0,.3);
+}
+
+@media screen and (min-width: 500px) and (min-height: 500px) {
+  #about {
+    width: 500px;
+    left: 50%;
+    margin-left: -250px;
+    border-radius: 5px;
+  }
+  #about.show {
+    transform: translate3d(0, 10px, 0);
+    -webkit-transform: translate3d(0, 10px, 0);
+  }
+}
+
+#about h2{
+  color: #111;
+  margin: 0;
+  padding: 5px 0;
+  font-size: 1.3em;
+  font-weight: 100;
+}
+
+#about p {
+  margin: 0;
+  padding: 0 0 5px;
+}
+
+#about ul{
+  list-style: none;
+  margin: 0 0 5px;
+  padding: 0;
+}
+#about ul li{
+  display: inline-block;
+  margin-right: 1em;
+}
+#about ul li img{
+  vertical-align: middle;
+  margin: 0 3px;
+}
+
+#about button {
+  width: 100%;
+  margin: 5px 0;
+}
+
+#preview{
+  float: right;
+  border: 1px solid #999;
+  margin-left: 10px;
+  margin-top: 5px;
+}
+
+#map{
+  height: 100%;
+}
+
+#info-taxis{
+  font-size: .8em;
+  font-weight: 300;
+  position: absolute;
+  bottom: 24px;
+  right: 68px;
+  margin-left: 10px;
+  border-radius: 5px;
+  padding: 10px;
+  text-align: right;
+  background-color: rgba(255,255,255,.9);
+  -webkit-transition: opacity .3s;
+  transition: opacity .3s;
+}
+#info-taxis b{
+  font-weight: 500;
+}
+
+#info-taxis.loading{
+  -webkit-animation: blink .75s linear infinite alternate;
+  animation: blink .75s linear infinite alternate;
+}
+
+@-webkit-keyframes blink{
+  0% { opacity: 1 }
+  50% { opacity: .2 }
+  100% { opacity: 1 }
+}
+@keyframes blink{
+  0% { opacity: 1 }
+  50% { opacity: .2 }
+  100% { opacity: 1 }
+}
+
+#location{
+  display: none;
+  outline: 0;
+  position: absolute;
+  bottom: 20px;
+  right: 10px;
+  z-index: 1;
+  border: 0;
+  padding: 12px;
+  margin: 0;
+  width: 48px;
+  height: 48px;
+  background-color: #fff;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  vertical-align: top;
+}
+
+#location svg{
+  fill: #666;
+}
+
+#location.active svg{
+  fill: #4285f4;
+}
+
+#location-marker{
+  -webkit-transition: border-width .3s;
+  transition: border-width .3s;
+  box-sizing: content-box;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #4285f4;
+  box-shadow: inset 0 0 0 2px #fff;
+  border: 10px solid rgba(66, 133, 244, .2);
+  background-clip: content-box;
+  pointer-events: none;
+}
+
+#location-marker.compass:after{
+  content: '';
+  display: inline-block;
+  border-left: 4px solid transparent;
+  border-bottom: 6px solid #4285f4;
+  border-right: 4px solid transparent;
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 4px;
+  top: -6px;
+}
+
+#bounds-warning{
+  position: absolute;
+  bottom: 30px;
+  left: 10px;
+  display: none;
+  padding: 10px;
+  background-color: rgba(0,0,0,.7);
+  -webkit-backdrop-filter: blur(1px);
+  backdrop-filter: blur(1px);
+  color: #fff;
+}
+
+#bounds-warning button{
+  display: inline;
+  padding: 0;
+  border: 0;
+  color: #fff;
+  text-decoration: underline;
+}
+
+#bounds-warning.visible{
+  display: block;
+}