Loading
,
9 | })}
10 | {...args}
11 | />
12 | );
13 |
14 | export default ProtectedRoute;
15 |
--------------------------------------------------------------------------------
/src/components/Logo.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useHistory } from "react-router-dom";
3 |
4 | const Logo = () => {
5 | const history = useHistory();
6 |
7 | return (
8 |
7 |
16 |
17 | );
18 | };
19 |
20 | export default MaindHOC(Contact);
21 |
--------------------------------------------------------------------------------
/src/containers/Wrapper.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useAuth0 } from "@auth0/auth0-react";
3 | import { Redirect } from "react-router";
4 | import Home from "./Home";
5 |
6 | const Wrapper = () => {
7 | const { isLoading, isAuthenticated } = useAuth0();
8 | if (isLoading) {
9 | return Loading
;
10 | }
11 | return (
12 | <>
13 | {isAuthenticated &&
30 |
33 |
38 | );
39 | };
40 |
41 | export default CookieDeclaration;
42 |
--------------------------------------------------------------------------------
/src/__test__/Nearby.test.js:
--------------------------------------------------------------------------------
1 | /* jshint esversion: 6 */
2 |
3 | import React from "react";
4 | import { Nearby as OgNearby } from "./../containers/Nearby";
5 | import { shallow } from "enzyme";
6 |
7 | describe("Testing Nearby component", () => {
8 | const params = {
9 | lat: 12,
10 | lng: 30,
11 | };
12 |
13 | beforeAll(() => {
14 | window.fetch = jest.fn();
15 | global.fetch = jest.fn();
16 | window.fetch = jest.fn();
17 | });
18 |
19 | beforeEach(() => {
20 | jest.spyOn(global, "fetch").mockResolvedValue({
21 | json: jest.fn().mockResolvedValue({ results: [] }),
22 | });
23 | });
24 |
25 | it("Functions inside componentdidmount should run successfully", () => {
26 | const prop = { auth0: { isAuthenticated: false } };
27 | const wrapper = shallow(
34 | 
35 |
37 |
35 | Cookies & Privacy Policy
36 |
54 | {this.props.children}
55 |
56 | );
57 | }
58 | }
59 |
60 | export default SearchRoute;
61 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | # pull official base image
2 | FROM ubuntu:18.04
3 |
4 | # set working directory
5 | WORKDIR /app
6 |
7 | # add `/app/node_modules/.bin` to $PATH
8 | ENV PATH /app/node_modules/.bin:$PATH
9 |
10 | # install curl
11 | RUN apt-get update && apt-get install -y --no-install-recommends curl ca-certificates && update-ca-certificates && apt-get clean && rm -rf /var/lib/apt/lists/*
12 |
13 | # nvm environment variables
14 | ENV NVM_DIR /usr/local/nvm
15 | ENV NODE_VERSION 14.11.0
16 | RUN mkdir -p $NVM_DIR
17 |
18 | # install nvm
19 | # https://github.com/creationix/nvm#install-script
20 | RUN curl --silent -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.3/install.sh | bash
21 |
22 | # install node and npm
23 | RUN . $NVM_DIR/nvm.sh \
24 | && nvm install $NODE_VERSION \
25 | && nvm alias default $NODE_VERSION \
26 | && nvm use default
27 |
28 | # add node and npm to path so the commands are available
29 | ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
30 | ENV PATH $NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH
31 |
32 | # confirm installation
33 | RUN node -v
34 | RUN npm -v
35 |
36 | # export keys to env file
37 | ADD "https://www.random.org/cgi-bin/randbyte?nbytes=10&format=h" skipcache
38 | RUN if [ -f ".env" ]; then echo "paste env var values to .env"; else touch .env; fi;
39 |
40 | ADD "https://www.random.org/cgi-bin/randbyte?nbytes=10&format=h" skipcache
41 | RUN if [ -f "package-lock.json" ]; then rm package-lock.json; fi;
42 | RUN if [ -d "node_modules" ]; then rm -rf node_modules; fi;
43 | RUN if [ -d "~/.npm/_cacache" ]; then rm -rf ~/.npm/_cacache; fi;
44 |
45 | # install packages
46 | COPY package.json ./
47 | RUN npm i
48 |
49 | # add app
50 | COPY public ./public
51 | COPY src ./src
52 | COPY .babelrc ./
53 | COPY .jshintrc ./
54 | COPY .whitesource ./
55 | COPY tsconfig.json ./
56 |
57 | # build
58 | RUN npm run build
59 |
60 | # start app
61 | CMD ["npm", "start"]
62 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
16 |
17 |
18 |
19 |
23 |
24 |
25 |
29 |
33 |
37 | 
54 |
55 |
56 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "b2c",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@auth0/auth0-react": "^1.5.0",
7 | "@testing-library/jest-dom": "^5.1.0",
8 | "@testing-library/react": "^10.0.0",
9 | "@testing-library/user-event": "^7.2.1",
10 | "@types/googlemaps": "^3.0.0",
11 | "@types/markerclustererplus": "^2.1.29",
12 | "@types/node": "^14.0.26",
13 | "@types/react": "^16.9.43",
14 | "@types/react-dom": "^16.9.8",
15 | "@types/react-router-dom": "^5.1.5",
16 | "eslint-plugin-jsx-a11y": "^6.3.1",
17 | "node-gyp": "^8.4.1",
18 | "node-sass": "^7.0.1",
19 | "react": "^16.13.1",
20 | "react-dom": "^16.13.1",
21 | "react-google-maps": "^9.4.5",
22 | "react-meta-tags": "^0.7.4",
23 | "react-router-dom": "^5.2.0",
24 | "react-scripts": "^5.0.0",
25 | "sass": "^1.45.1",
26 | "serve": "^11.3.2",
27 | "ts-jest": "^27.0.2",
28 | "typescript": "^3.9.7"
29 | },
30 | "devDependencies": {
31 | "@types/jest": "^27.0.3",
32 | "@typescript-eslint/eslint-plugin": "^4.6.0",
33 | "@typescript-eslint/parser": "^4.6.0",
34 | "enzyme": "^3.11.0",
35 | "enzyme-adapter-react-16": "^1.15.6",
36 | "eslint-config-prettier": "^6.15.0",
37 | "prettier": "^2.1.2",
38 | "stylelint": "^14.0.0",
39 | "stylelint-config-standard": "^23.0.0"
40 | },
41 | "jshintConfig": {
42 | "esversion": 6
43 | },
44 | "scripts": {
45 | "eslint:github-action": "eslint --fix src/",
46 | "fmt": "prettier --write src/**.{json,js,ts,yml,md}",
47 | "fmt:check": "prettier --check src/**.{json,js,ts,yml,md}",
48 | "serve": "serve -s build",
49 | "build-dev-and-serve": "npm run build && npm run serve",
50 | "start": "react-scripts start",
51 | "build": "react-scripts build",
52 | "test": "react-scripts test",
53 | "eject": "react-scripts eject",
54 | "watch": "./node_modules/.bin/tsc --watch"
55 | },
56 | "eslintConfig": {
57 | "extends": "react-app"
58 | },
59 | "browserslist": {
60 | "production": [
61 | ">0.2%",
62 | "not dead",
63 | "not op_mini all"
64 | ],
65 | "development": [
66 | "last 1 chrome version",
67 | "last 1 firefox version",
68 | "last 1 safari version"
69 | ]
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/.github/workflows/node.js.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: Node.js CI
5 |
6 | on:
7 | push:
8 | branches: [master]
9 | pull_request:
10 | branches: '*'
11 |
12 | jobs:
13 | build:
14 | runs-on: ubuntu-latest
15 |
16 | strategy:
17 | matrix:
18 | node-version: [10.x, 12.x, 14.x]
19 |
20 | steps:
21 | - uses: actions/checkout@v2
22 | - name: Use Node.js ${{ matrix.node-version }}
23 | uses: actions/setup-node@v1
24 | env:
25 | GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
26 | FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
27 | FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
28 | FIREBASE_DB_URL: ${{ secrets.FIREBASE_DB_URL }}
29 | FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
30 | FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
31 | FIREBASE_MSG_SENDER_ID: ${{ secrets.FIREBASE_MSG_SENDER_ID }}
32 | FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
33 | FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MEASUREMENT_ID }}
34 | COOKIEBOT_CONSENT_DECLARATION: ${{ secrets.COOKIEBOT_CONSENT_DECLARATION }}
35 | COOKIEBOT_CONSENT_HEAD: ${{ secrets.COOKIEBOT_CONSENT_HEAD }}
36 | TAWKTO: ${{ secrets.TAWKTO }}
37 | COOKIEBOT_CONSENT_HEAD_DATA_CBID: ${{ secrets.COOKIEBOT_CONSENT_HEAD_DATA_CBID }}
38 | ESP_PROXY_DOMAIN: ${{ secrets.ESP_PROXY_DOMAIN }}
39 | ESP_PROXY_PORT: ${{ secrets.ESP_PROXY_PORT }}
40 | AUTH0_DOMAIN: ${{ secrets.REACT_APP_AUTH0_DOMAIN }}
41 | AUTH0_CLIENT_ID: ${{ secrets.REACT_APP_AUTH0_CLIENT_ID }}
42 | with:
43 | node-version: ${{ matrix.node-version }}
44 | - run: ./startup.sh
45 | - run: npm i
46 | - name: Run Prettier
47 | run: npm run fmt
48 | - name: Run Prettier Check
49 | run: npm run fmt:check
50 | - name: Run ESLint
51 | run: npm run eslint:github-action
52 | - run: CI=false NODE_ENV=production npm ci
53 | - run: CI=false npm run build --if-present
54 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 | build
40 |
41 | # Dependency directories
42 | node_modules/
43 | jspm_packages/
44 |
45 | # ignore misc ides settings
46 | .vscode/
47 | .theia/
48 |
49 | # TypeScript v1 declaration files
50 | typings/
51 |
52 | # TypeScript cache
53 | *.tsbuildinfo
54 |
55 | # Optional npm cache directory
56 | .npm
57 |
58 | # Optional eslint cache
59 | .eslintcache
60 |
61 | # Microbundle cache
62 | .rpt2_cache/
63 | .rts2_cache_cjs/
64 | .rts2_cache_es/
65 | .rts2_cache_umd/
66 |
67 | # Optional REPL history
68 | .node_repl_history
69 |
70 | # Output of 'npm pack'
71 | *.tgz
72 |
73 | # Yarn Integrity file
74 | .yarn-integrity
75 |
76 | # dotenv environment variables file
77 | .env
78 | .env.test
79 |
80 | # parcel-bundler cache (https://parceljs.org/)
81 | .cache
82 |
83 | # Next.js build output
84 | .next
85 |
86 | # Nuxt.js build / generate output
87 | .nuxt
88 | dist
89 |
90 | # Gatsby files
91 | .cache/
92 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
93 | # https://nextjs.org/blog/next-9-1#public-directory-support
94 | # public
95 |
96 | # vuepress build output
97 | .vuepress/dist
98 |
99 | # Serverless directories
100 | .serverless/
101 |
102 | # FuseBox cache
103 | .fusebox/
104 |
105 | # DynamoDB Local files
106 | .dynamodb/
107 |
108 | # TernJS port file
109 | .tern-port
110 |
111 | # Miscellaneous
112 | .DS_Store
113 |
114 | package-lock.json
115 |
--------------------------------------------------------------------------------
/src/components/Map.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import {
3 | withGoogleMap,
4 | withScriptjs,
5 | GoogleMap,
6 | DirectionsRenderer,
7 | } from "react-google-maps";
8 |
9 | /**
10 | * The Map Component.
11 | *
12 | * @class Map
13 | * @extends React.Component
14 | * @param {Array<{string,Object}>} myPlaces
15 | */
16 | const Map = ({ myPlaces }) => {
17 | /** @type {[boolean,Function]} loading */
18 | const [isLoading, setIsLoading] = useState(true);
19 |
20 | /** @type {[Object,Function]} direction */
21 | const [directions, setDirections] = useState(null);
22 |
23 | /**
24 | * A react hook method called when myPlaces props changes value.
25 | * Fetches direction from current location to destination on google map.
26 | */
27 | useEffect(() => {
28 | setIsLoading(true);
29 | getDirection(myPlaces);
30 | }, [myPlaces]);
31 |
32 | /**
33 | * Set direction from source and destination
34 | * @param {Array<{string,Object}>} myPlaces - Source and Destination positions.
35 | */
36 | const getDirection = (myPlaces) => {
37 | const directionsService = new window.google.maps.DirectionsService();
38 | const origin = myPlaces[0].pos;
39 | const destination = myPlaces[1].pos;
40 | directionsService.route(
41 | {
42 | origin,
43 | destination,
44 | travelMode: window.google.maps.TravelMode.DRIVING,
45 | },
46 | (result, status) => {
47 | if (status === window.google.maps.DirectionsStatus.OK) {
48 | setDirections(result);
49 | setIsLoading(false);
50 | } else if (process.env.NODE_ENV === "development") {
51 | // show alert in dev mode
52 | alert(`error fetching directions ${result}`);
53 | }
54 | }
55 | );
56 | };
57 |
58 | const GoogleMapExample = withGoogleMap((props) => (
59 |
32 | {isAuthenticated && (
33 |
78 | );
79 | };
80 |
81 | export default Login;
82 |
--------------------------------------------------------------------------------
/src/__test__/Login.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen, cleanup, fireEvent } from "@testing-library/react";
2 | import { useAuth0 } from "@auth0/auth0-react";
3 | import { mocked } from "ts-jest/utils";
4 | import Login from "../components/Login";
5 | import ReactDOM from "react-dom";
6 | import React from "react";
7 | import { BrowserRouter, Route } from "react-router-dom";
8 |
9 | const user = {
10 | email: "johndoe@me.com",
11 | email_verified: true,
12 | sub: "google-oauth2|12345678901234",
13 | };
14 |
15 | const mockHistoryPush = jest.fn();
16 |
17 | jest.mock("react-router-dom", () => ({
18 | ...jest.requireActual("react-router-dom"),
19 | useHistory: () => ({
20 | push: mockHistoryPush,
21 | }),
22 | }));
23 |
24 | afterEach(cleanup);
25 |
26 | // intercept the useAuth0 function and mock it
27 | jest.mock("@auth0/auth0-react");
28 |
29 | const mockedUseAuth0 = mocked(useAuth0, true);
30 |
31 | describe("Login Component Tests - Logged in", () => {
32 | beforeEach(() => {
33 | mockedUseAuth0.mockReturnValue({
34 | isAuthenticated: true,
35 | user,
36 | logout: jest.fn(),
37 | loginWithRedirect: jest.fn(),
38 | getAccessTokenWithPopup: jest.fn(),
39 | getAccessTokenSilently: jest.fn(),
40 | getIdTokenClaims: jest.fn(),
41 | loginWithPopup: jest.fn(),
42 | isLoading: false,
43 | });
44 | });
45 |
46 | // to test if Login component renders correctly
47 | test("Logout component renders correctly", () => {
48 | const div = document.createElement("div");
49 | ReactDOM.render(
34 |
71 | )}
72 | {!isAuthenticated && !isLoading && (
73 |
35 |
70 | setOpen((open) => !open)}
38 | >
39 | 
46 |
47 | {open && (
48 | 43 | Welcome, {user?.given_name} 44 |
45 |
49 |
68 | )}
69 | -
50 |
- { 54 | return history.push("/profile"); 55 | }} 56 | > 57 | My Profile 58 | 59 |
- logout({ returnTo: window.location.origin })} 62 | > 63 | {" "} 64 | Log Out 65 | 66 |
74 |
76 | )}
77 | 40 | 41 | --- 42 | 43 | In general follow this [Javascript Styleguide](https://google.github.io/styleguide/jsguide.html) 44 | 45 | ### Always follow Guidelines!! Helps everyone who are trying to contribute. 46 | 47 | 48 | 49 | ## 3. Installation 50 | 51 | These instructions will create a Docker container with the required stack for running and developing the project. If you have Node v14 or higher installed already, and are working on the front end, you can run the front-end locally without preparing at Docker container by following the steps in section 4. 52 | 53 | #### Prepare .env keys 54 | 55 | Copy the .env.example file to create your own local .env file. 56 | 57 | ```bash 58 | cp .env.example .env 59 | ``` 60 | 61 | Update any relevant keys in your new .env file. For example, if you will be working on functionality that requires logging in, create a free Auth0 account [here](https://auth0.com/signup?signUpData=%7B%22category%22%3A%22button%22%7D) and enter the relevant credentials from your account in your local .env file. 62 | 63 | Please note: Any time you change the values in this .env file, you will need to stop and restart your Docker container in order for the new values to take effect. 64 | 65 | #### Install Docker Compose on Mac 66 | 67 | - Click https://docs.docker.com/compose/install/, to start to install Docker Compose 68 | - Click Get Docker Desktop for Mac under Install Compose on macOS 69 | - Click Download from Docker Hub 70 | - Click Get Docker to download docker and run Docker.dmg 71 | - Install docker compose using PIP in command line: pip install -U docker-compose 72 | - Run docker-image to start instance: 73 | 74 | ```bash 75 | docker-compose -f "docker-compose.yml" up -d --build 76 | ``` 77 | 78 | If this command doesn't work, run 79 | 80 | ```bash 81 | PORT=9119 docker-compose up 82 | ``` 83 | 84 | Typescript to compile project. 85 | Babel does the transpiling from target to es5 browser compatible code, tsc does the type-checking. 86 | [See this](https://babeljs.io/blog/2018/08/27/7.0.0) for more info on how to run babel projects using tsc. 87 | 88 | 89 | 90 | ## 4. Developing Locally without Docker 91 | 92 | In order to run the client locally in development mode you must already have Node v14+ installed. 93 | 94 | Create a local .env file if you have not already. 95 | 96 | ```bash 97 | cp .env.example .env 98 | ``` 99 | 100 | Add relevant keys to your local .env file. For example, if you will be working on functionality that requires logging in, create a free Auth0 account [here](https://auth0.com/signup?signUpData=%7B%22category%22%3A%22button%22%7D) and enter the relevant credentials from your account in your local .env file. 101 | 102 | Please note: any time one of the values in this .env file changes, you will need to stop (`ctrl-c`) and restart the development server in order for the changes to take effect. 103 | 104 | Install dependencies. 105 | 106 | ```bash 107 | npm i 108 | ``` 109 | 110 | If you run into errors with deprecated dependencies or dependency tree errors, try running `yarn install` instead. Once dependencies have successfully installed, start the development server. 111 | 112 | ```bash 113 | npm start 114 | ``` 115 | 116 | --- 117 | 118 | If you want to watch the build run compiler- 119 | 120 | ```bash 121 | ./node_modules/.bin/tsc -p tsconfig.json --watch 122 | ``` 123 | 124 | If you want more help on running the app using npm then type- 125 | 126 | ```bash 127 | npm --help 128 | ``` 129 | 130 | or visit [here](https://docs.npmjs.com/) 131 | 132 | --- 133 | 134 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 135 | 136 | The page will automatically reload if you make changes to the code.
137 | You will see the build errors and lint warnings in the console. 138 | 139 | Check package.json for scripts on how to build and run. 140 | 141 | --- 142 | 143 | 144 | 145 | ## 5. Frameworks and services- 146 | 147 | ### Frameworks- 148 | 149 | 1. [React](https://reactjs.org/) 150 | 151 | ### Services- 152 | 153 | 1. [ Firebase ](https://firebase.google.com/) 154 | 2. [ Docker ](https://www.docker.com/) 155 | 156 | 157 | 158 | ## 6. Contributing 159 | 160 | Please read [CONTRIBUTING.md](/CONTRIBUTING.md) before you help us! 161 | 162 | 163 | 164 | ## 7. Credits 165 | 166 | (IN NO SPECIFIC ORDER) 167 | 168 | [ codecakes ](https://github.com/codecakes) 169 | 170 | [ GeekySankar ](https://github.com/GeekySankar) 171 | 172 | [ akshayparmar90 ](https://github.com/akshayparmar90) 173 | 174 | [ MEME-MAN234 ](https://github.com/MEME-MAN234) 175 | 176 | [ jmakhack ](https://github.com/jmakhack) 177 | 178 | [ Augilar ](https://github.com/Augilar) 179 | 180 | [ odysseaspapadimas ](https://github.com/odysseaspapadimas) 181 | -------------------------------------------------------------------------------- /src/containers/Profile.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import MaindHOC from "../components/MainHOC"; 3 | import { useAuth0 } from "@auth0/auth0-react"; 4 | import SearchRoute from "../components/SearchRoute"; 5 | import useDeviceDetect from "../utils/useDeviceDetect"; 6 | 7 | export const Profile = () => { 8 | const { user, isAuthenticated } = useAuth0(); 9 | const { name, picture } = user; 10 | 11 | const [isEdit] = useState(null); 12 | 13 | const [activeTab, setActiveTab] = useState("home"); 14 | 15 | const { isMobile } = useDeviceDetect(); 16 | 17 | return ( 18 |
19 | {!isMobile && (
20 | <>
21 |
188 | );
189 | };
190 | export default MaindHOC(Profile);
191 |
--------------------------------------------------------------------------------
/src/containers/Search.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import MetaTags from "react-meta-tags";
3 | import MaindHOC from "../components/MainHOC";
4 | import FireStore from "../firebase/fireStore";
5 | import Map from "../components/Map";
6 | import { withAuth0 } from "@auth0/auth0-react";
7 | import { compose } from "recompose";
8 | import Login from "../components/Login";
9 |
10 | import {
11 | GOOGLE_MAPS_API_KEY,
12 | UBER_CLIENT_ID,
13 | alternativeCityNamesLookup,
14 | ESP_PROXY_DOMAIN,
15 | ESP_PROXY_PORT,
16 | } from "../constants";
17 | import LoginButton from "../components/LoginButton";
18 |
19 | const MAP_API = `${GOOGLE_MAPS_API_KEY}`.match(/[A-Za-z0-9_]+/i)[0];
20 | const googleMapURL = `https://maps.googleapis.com/maps/api/js?key=${MAP_API}`;
21 |
22 | /**
23 | * The Search Component.
24 | *
25 | * @class Search
26 | * @extends React.Component
27 | */
28 | class Search extends Component {
29 | constructor(props) {
30 | super(props);
31 | this.state = {
32 | lat: parseFloat(this.props.match.params.lat) || 0,
33 | lng: parseFloat(this.props.match.params.lng) || 0,
34 | selectedLat: 0,
35 | selectedLng: 0,
36 | city: "",
37 | pickupAddress: "",
38 | results: [],
39 | isLoading: true,
40 | isAndroid: /Android/i.test(navigator.userAgent),
41 | isIos: /iPhone|iPod|iPad/.test(navigator.platform),
42 | };
43 | }
44 |
45 | /**
46 | * Find and update city name from current latitude and longitude
47 | * @fires Search#getAddressFromLocation
48 | */
49 | getAddressFromLocation = () => {
50 | const { lat, lng } = this.state;
51 | fetch(
52 | `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&sensor=true&key=${MAP_API}`
53 | )
54 | .then((response) => response.json())
55 | .then((data) => {
56 | const main_pint = data.results[0];
57 | const locality = (main_pint?.address_components || [])?.filter((x) =>
58 | x.types?.includes("locality")
59 | );
60 | const city = locality[0]?.long_name || "";
61 | /**
62 | * Callback function passed
63 | * @callback CallBack
64 | */
65 | /** Set current city name.
66 | * @event Search#getAddressFromLocation
67 | * @type {updater}
68 | * @property {city} state.city
69 | * @property {CallBack} getLocationResults
70 | */
71 | this.setState(
72 | {
73 | city: city.toLowerCase(),
74 | pickupAddress: main_pint?.formatted_address || "",
75 | },
76 | () => this.getLocationResults()
77 | );
78 | })
79 | .catch(console.error);
80 | };
81 |
82 | /**
83 | * Store search results in state
84 | *
85 | * @fires Search#setResults
86 | */
87 |
88 | setResults = (results) => {
89 | /** Set list of hospitals in result.
90 | * @event setResults
91 | * @type {updater}
92 | * @property {results} state.results
93 | * @property {selectedLat} state.selectedLat
94 | * @property {selectedLng} state.selectedLng
95 | * @property {isLoading} state.isLoading
96 | */
97 |
98 | this.setState({
99 | results,
100 | selectedLat: (results[0]?.geometry?.location || {}).lat,
101 | selectedLng: (results[0]?.geometry?.location || {}).lng,
102 | isLoading: false,
103 | });
104 | };
105 |
106 | /**
107 | * Fetch list of hospitals available in current city
108 | */
109 | getLocationResults = () => {
110 | let { city } = this.state;
111 | city = alternativeCityNamesLookup[city] || city;
112 | FireStore.firebaseInit();
113 | FireStore.fetchCityData(city, this.setResults);
114 | };
115 |
116 | /**
117 | * Set Latitude and Logitude of selected hospital
118 | *
119 | * @fires Search#setNewLocation
120 | * @param {number} lat - Latitude of the city.
121 | * @param {number} lng - Longitude of the city.
122 | */
123 |
124 | setNewLocation = (lat, lng) => {
125 | /**
126 | * Set Latitude and Logitude of selected hospital
127 | * @event setNewLocation
128 | * @type {updater}
129 | * @property {selectedLat} state.selectedLat
130 | * @property {selectedLng} state.selectedLng
131 | */
132 | this.setState({
133 | selectedLat: lat,
134 | selectedLng: lng,
135 | });
136 | };
137 |
138 | /**
139 | * Find distance between current location and selected hospital
140 |
141 | * @param {number} lat1 - Latitude of the source location.
142 | * @param {number} lng1 - Longitude of the source location.
143 | * @param {number} lat2 - Latitude of the destination location.
144 | * @param {number} lng2 - Longitude of the destination location.
145 | * @param {string} unit - required unit of distance in kilometers('K') or nautical miles('N').
146 | * @return {number} The distance between two co-ordinates
147 | */
148 | generateDistance = (lat1, lon1, lat2, lon2, unit) => {
149 | if (lat1 === lat2 && lon1 === lon2) {
150 | return 0;
151 | } else {
152 | const radlat1 = (Math.PI * lat1) / 180;
153 | const radlat2 = (Math.PI * lat2) / 180;
154 | const theta = lon1 - lon2;
155 | const radtheta = (Math.PI * theta) / 180;
156 | let dist =
157 | Math.sin(radlat1) * Math.sin(radlat2) +
158 | Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
159 | if (dist > 1) {
160 | dist = 1;
161 | }
162 | dist = Math.acos(dist);
163 | dist = (dist * 180) / Math.PI;
164 | dist = dist * 60 * 1.1515;
165 | if (unit === "K") {
166 | dist = dist * 1.609344;
167 | }
168 | if (unit === "N") {
169 | dist = dist * 0.8684;
170 | }
171 | return dist.toFixed(2);
172 | }
173 | };
174 |
175 | /**
176 | * Deeplink to Uber app or store based on app installation status
177 |
178 | * @param {string} address - address of the selected location.
179 | * @param {number} lat - Latitude of the selected location.
180 | * @param {number} lng - Longitude of the selected location.
181 | */
182 | redirectToUber = (dropOffAddress, dropoffLat, dropOffLng) => {
183 | const { isAndroid, isIos, pickupAddress, lat, lng } = this.state;
184 |
185 | if (isAndroid) {
186 | window.location = `https://m.uber.com/ul/?action=setPickup&pickup[latitude]=${lat}&pickup[longitude]=${lng}&pickup[formatted_address]=${encodeURI(
187 | pickupAddress
188 | )}&client_id=${UBER_CLIENT_ID}&dropoff[formatted_address]=${encodeURI(
189 | dropOffAddress
190 | )}&dropoff[latitude]=${dropoffLat}&dropoff[longitude]=${dropOffLng}`;
191 | } else if (isIos) {
192 | // redirect to app store if uber not installed
193 | setTimeout(function () {
194 | window.location.href = "https://apps.apple.com/in/app/uber/id368677368";
195 | }, 2000);
196 |
197 | window.location = `uber://?action=setPickup&pickup[latitude]=${lat}&pickup[longitude]=${lng}&pickup[formatted_address]=${encodeURI(
198 | pickupAddress
199 | )}&client_id=${UBER_CLIENT_ID}&dropoff[formatted_address]=${encodeURI(
200 | dropOffAddress
201 | )}&dropoff[latitude]=${dropoffLat}&dropoff[longitude]=${dropOffLng}`;
202 | } else {
203 | window.open(
204 | `https://m.uber.com?action=setPickup&pickup[latitude]=${lat}&pickup[longitude]=${lng}&pickup[formatted_address]=${encodeURI(
205 | pickupAddress
206 | )}&client_id=${UBER_CLIENT_ID}&dropoff[formatted_address]=${encodeURI(
207 | dropOffAddress
208 | )}&dropoff[latitude]=${dropoffLat}&dropoff[longitude]=${dropOffLng}`,
209 | "_blank"
210 | );
211 | }
212 | };
213 |
214 | /**
215 | * A react lifecycle method called when the component has mounted.
216 | * It calls the getAddressFromLocation method right after updating.
217 | */
218 | componentDidMount() {
219 | this.getAddressFromLocation();
220 | }
221 |
222 | /**
223 | * The render function.
224 | */
225 | render() {
226 | const { isAuthenticated } = this.props.auth0;
227 | const {
228 | lat,
229 | lng,
230 | city,
231 | results,
232 | isLoading,
233 | selectedLat,
234 | selectedLng,
235 | isAndroid,
236 | isIos,
237 | } = this.state;
238 | const result_list =
239 | results && results.length !== 0
240 | ? results.map(
241 | (
242 | { facility_type, formatted_address, geometry: { location } },
243 | index
244 | ) => {
245 | return (
246 |
22 |
73 |
23 |
72 |
24 | 
26 | {/* TO DO: add edit button */}
27 |
28 |
33 |
34 | Profile
25 |{name}
29 | {user?.address && (
30 | {user?.address}
31 | )}
32 |
35 |
71 |
36 |
40 |
37 | Personal Details
38 |
39 |
41 |
69 | {/* TODO: add dob, location & password fields */}
70 |
42 |
54 |
55 |
43 |
44 |
52 |
53 |
56 |
68 |
57 |
58 |
66 |
67 |
74 |
75 |
78 |
79 |
80 |
83 |
84 |
85 |
86 | )}
87 | {isMobile && (
88 | <>
89 | {activeTab === "profile" && (
90 |
91 |
142 | )}
143 | {activeTab === "home" && (
144 |
92 |
141 |
93 |
95 | {/* TO DO: add edit button */}
96 |
97 |
102 |
103 | Profile
94 |{name}
98 | {user?.address && (
99 | {user?.address}
100 | )}
101 |
104 |
140 |
105 |
109 |
106 | Personal Details
107 |
108 |
110 |
138 | {/* TODO: add dob, location & password fields */}
139 |
111 |
123 |
124 |
112 |
113 |
121 |
122 |
125 |
137 |
126 |
127 |
135 |
136 |
145 |
158 | )}
159 |
146 |
147 |
150 |
151 |
152 |
155 |
156 |
157 |
160 |
185 |
186 | )}
187 | setActiveTab("home")}
165 | >
166 |
167 | Home
168 |
169 | {isAuthenticated && (
170 |
177 | setActiveTab("profile")}
180 | />
181 | Me
182 |
183 | )}
184 |
250 | this.setNewLocation(location.lat, location.lng)
251 | }
252 | >
253 |
291 | );
292 | }
293 | )
294 | : [];
295 | return (
296 | <>
297 | 254 | {facility_type}{" "} 255 | 256 | {this.generateDistance( 257 | lat, 258 | lng, 259 | location.lat, 260 | location.lng, 261 | "K" 262 | )}{" "} 263 | Km 264 | 265 |
266 | 267 | 268 | {formatted_address} 269 | 270 | 271 | 289 | {/* TODO(@codecakes): add phone number */} 290 |
306 | {isLoading && }
307 | {results && results.length === 0 && !isLoading && (
308 |
352 |
353 | );
354 | }
355 | }
356 | export default compose(withAuth0, MaindHOC)(Search);
357 |
--------------------------------------------------------------------------------
/src/containers/Nearby.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import MetaTags from "react-meta-tags";
3 | import MaindHOC from "../components/MainHOC";
4 | import Map from "../components/Map";
5 | import { withAuth0 } from "@auth0/auth0-react";
6 | import { compose } from "recompose";
7 |
8 | import {
9 | GOOGLE_MAPS_API_KEY,
10 | UBER_CLIENT_ID,
11 | alternativeCityNamesLookup,
12 | ESP_PROXY_DOMAIN,
13 | ESP_PROXY_PORT,
14 | } from "../constants";
15 | import LoginButton from "../components/LoginButton";
16 |
17 | const MAP_API = `${GOOGLE_MAPS_API_KEY}`.match(/[A-Za-z0-9_]+/i)[0];
18 | const googleMapURL = `https://maps.googleapis.com/maps/api/js?key=${MAP_API}`;
19 |
20 | /**
21 | * The Nearby Component.
22 | *
23 | * @class Nearby
24 | * @extends React.Component
25 | */
26 | export class Nearby extends Component {
27 | constructor(props) {
28 | super(props);
29 | this.state = {
30 | lat:
31 | this.props && this.props.match
32 | ? parseFloat(this.props.match.params.lat)
33 | : 0,
34 | lng:
35 | this.props && this.props.match
36 | ? parseFloat(this.props.match.params.lng)
37 | : 0,
38 | selectedLat: 0,
39 | selectedLng: 0,
40 | city: "",
41 | pickupAddress: "",
42 | results: [],
43 | isLoading: true,
44 | isAndroid: /Android/i.test(navigator.userAgent),
45 | isIos: /iPhone|iPod|iPad/.test(navigator.platform),
46 | allStates: [],
47 | };
48 | }
49 |
50 | /**
51 | * Find and update city name from current latitude and longitude
52 | * @fires Search#getAddressFromLocation
53 | */
54 | getAddressFromLocation = () => {
55 | const { lat, lng } = this.state;
56 | fetch(
57 | `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&sensor=true&key=${MAP_API}`
58 | )
59 | .then((response) => response.json())
60 | .then((data) => {
61 | const main_pint = data.results[0];
62 | const locality = (main_pint?.address_components || [])?.filter((x) =>
63 | x.types?.includes("locality")
64 | );
65 | const city = locality[0]?.long_name || "";
66 | // get postal code
67 | const postalLoc = (main_pint?.address_components || [])?.filter((x) =>
68 | x.types?.includes("postal_code")
69 | );
70 |
71 | const postal_code = postalLoc[0]?.long_name || "";
72 |
73 | /**
74 | * Callback function passed
75 | * @callback CallBack
76 | */
77 | /** Set current city name.
78 | * @event Search#getAddressFromLocation
79 | * @type {updater}
80 | * @property {city} state.city
81 | * @property {CallBack} getVaccineSessionsByPin
82 | */
83 | this.setState(
84 | {
85 | city: city.toLowerCase(),
86 | pickupAddress: main_pint?.formatted_address || "",
87 | },
88 | () => this.getVaccineSessionsByPin(postal_code)
89 | );
90 | })
91 | .catch(console.error);
92 | };
93 |
94 | /**
95 | * Function to fech nearby vaccine centers based on pincode
96 | * @param { string } pincode - User's pincode
97 | */
98 | getVaccineSessionsByPin = (pincode) => {
99 | console.log("getting vaccine centers by pincode");
100 | const datestring = new Date()
101 | .toLocaleDateString("en-GB", {
102 | day: "numeric",
103 | month: "numeric",
104 | year: "numeric",
105 | })
106 | .replace(/\//g, "-");
107 |
108 | fetch(
109 | `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByPin?pincode=${pincode}&date=${datestring}`
110 | )
111 | .then((response) => response.json())
112 | .then((data) => {
113 | this.findVaccineCentersByLatLong(data.sessions);
114 | })
115 | .catch(console.error);
116 | };
117 |
118 | /**
119 | * Filter vaccine centers based on distance
120 | * @param {Array<{string,Object}>} results - Center results fron findByPin API
121 | * @param {String} distance - Distance from search param in url
122 | */
123 | filterResultsByDistance = (results, distance) => {
124 | const vaccineCenters = results.filter((res) => {
125 | const calcDistance = Number(
126 | this.generateDistance(
127 | this.state.lat,
128 | this.state.lng,
129 | res.lat,
130 | res.long,
131 | "K"
132 | )
133 | );
134 | if (calcDistance <= distance) {
135 | res.distance = calcDistance;
136 | return res;
137 | }
138 | });
139 | return vaccineCenters;
140 | };
141 | /**
142 | * Store search results in state
143 | *
144 | * @fires Search#setResults
145 | */
146 |
147 | setResults = (results) => {
148 | /** Set list of hospitals in result.
149 | * @event setResults
150 | * @type {updater}
151 | * @property {results} state.results
152 | * @property {selectedLat} state.selectedLat
153 | * @property {selectedLng} state.selectedLng
154 | * @property {isLoading} state.isLoading
155 | */
156 |
157 | this.setState({
158 | results,
159 | selectedLat: (results[0] || {}).lat,
160 | selectedLng: (results[0] || {}).long,
161 | isLoading: false,
162 | });
163 | };
164 |
165 | /**
166 | * Set Latitude and Logitude of selected hospital
167 | *
168 | * @fires Search#setNewLocation
169 | * @param {number} lat - Latitude of the city.
170 | * @param {number} lng - Longitude of the city.
171 | */
172 |
173 | setNewLocation = (lat, lng) => {
174 | /**
175 | * Set Latitude and Logitude of selected hospital
176 | * @event setNewLocation
177 | * @type {updater}
178 | * @property {selectedLat} state.selectedLat
179 | * @property {selectedLng} state.selectedLng
180 | */
181 | this.setState({
182 | selectedLat: lat,
183 | selectedLng: lng,
184 | });
185 | };
186 |
187 | /**
188 | * Find distance between current location and selected hospital
189 |
190 | * @param {number} lat1 - Latitude of the source location.
191 | * @param {number} lng1 - Longitude of the source location.
192 | * @param {number} lat2 - Latitude of the destination location.
193 | * @param {number} lng2 - Longitude of the destination location.
194 | * @param {string} unit - required unit of distance in kilometers('K') or nautical miles('N').
195 | * @return {number} The distance between two co-ordinates
196 | */
197 | generateDistance = (lat1, lon1, lat2, lon2, unit) => {
198 | if (lat1 === lat2 && lon1 === lon2) {
199 | return 0;
200 | } else {
201 | const radlat1 = (Math.PI * lat1) / 180;
202 | const radlat2 = (Math.PI * lat2) / 180;
203 | const theta = lon1 - lon2;
204 | const radtheta = (Math.PI * theta) / 180;
205 | let dist =
206 | Math.sin(radlat1) * Math.sin(radlat2) +
207 | Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
208 | if (dist > 1) {
209 | dist = 1;
210 | }
211 | dist = Math.acos(dist);
212 | dist = (dist * 180) / Math.PI;
213 | dist = dist * 60 * 1.1515;
214 | if (unit === "K") {
215 | dist = dist * 1.609344;
216 | }
217 | if (unit === "N") {
218 | dist = dist * 0.8684;
219 | }
220 | return dist.toFixed(2);
221 | }
222 | };
223 |
224 | /**
225 | * Deeplink to Uber app or store based on app installation status
226 |
227 | * @param {string} address - address of the selected location.
228 | * @param {number} lat - Latitude of the selected location.
229 | * @param {number} lng - Longitude of the selected location.
230 | */
231 | redirectToUber = (dropOffAddress, dropoffLat, dropOffLng) => {
232 | const { isAndroid, isIos, pickupAddress, lat, lng } = this.state;
233 |
234 | if (isAndroid) {
235 | window.location = `https://m.uber.com/ul/?action=setPickup&pickup[latitude]=${lat}&pickup[longitude]=${lng}&pickup[formatted_address]=${encodeURI(
236 | pickupAddress
237 | )}&client_id=${UBER_CLIENT_ID}&dropoff[formatted_address]=${encodeURI(
238 | dropOffAddress
239 | )}&dropoff[latitude]=${dropoffLat}&dropoff[longitude]=${dropOffLng}`;
240 | } else if (isIos) {
241 | // redirect to app store if uber not installed
242 | setTimeout(function () {
243 | window.location.href = "https://apps.apple.com/in/app/uber/id368677368";
244 | }, 2000);
245 |
246 | window.location = `uber://?action=setPickup&pickup[latitude]=${lat}&pickup[longitude]=${lng}&pickup[formatted_address]=${encodeURI(
247 | pickupAddress
248 | )}&client_id=${UBER_CLIENT_ID}&dropoff[formatted_address]=${encodeURI(
249 | dropOffAddress
250 | )}&dropoff[latitude]=${dropoffLat}&dropoff[longitude]=${dropOffLng}`;
251 | } else {
252 | window.open(
253 | `https://m.uber.com?action=setPickup&pickup[latitude]=${lat}&pickup[longitude]=${lng}&pickup[formatted_address]=${encodeURI(
254 | pickupAddress
255 | )}&client_id=${UBER_CLIENT_ID}&dropoff[formatted_address]=${encodeURI(
256 | dropOffAddress
257 | )}&dropoff[latitude]=${dropoffLat}&dropoff[longitude]=${dropOffLng}`,
258 | "_blank"
259 | );
260 | }
261 | };
262 |
263 | /**
264 | * Find vaccine centers by lat-long
265 | * @param {any} sessionsData - sessions array from findByPin API
266 | */
267 | findVaccineCentersByLatLong(sessionsData) {
268 | const { lat, lng } = this.state;
269 | fetch(
270 | `https://cdn-api.co-vin.in/api/v2/appointment/centers/public/findByLatLong?lat=${lat}&long=${lng}`
271 | )
272 | .then((response) => response.json())
273 | .then((data) => {
274 | this.filterSessions(sessionsData, data.centers);
275 | })
276 | .catch(console.error);
277 | }
278 |
279 | /**
280 | * Filters centers based on same center_id to get exact lat-long for the center & distance
281 | * @param {any} sessionsData - sessionsData array from findByPin API
282 | * @param {any} centersByLatLng - centers array from findByLatLong API
283 | */
284 | filterSessions(sessionsData, centersByLatLng) {
285 | const filteredCenters = centersByLatLng.filter((cen) => {
286 | if (sessionsData.some(({ center_id }) => cen.center_id === center_id)) {
287 | cen.lat = Number(cen.lat);
288 | cen.long = Number(cen.long);
289 | return cen;
290 | }
291 | });
292 | const distance =
293 | this.props.location && this.props.location.search
294 | ? Number(
295 | new URLSearchParams(this.props.location.search).get("distance")
296 | )
297 | : 100;
298 |
299 | const centerDataWithDis = this.filterResultsByDistance(
300 | filteredCenters,
301 | distance || 100
302 | );
303 |
304 | centerDataWithDis.sort(function (a, b) {
305 | return parseFloat(a.distance) - parseFloat(b.distance);
306 | });
307 |
308 | this.setResults(centerDataWithDis);
309 | }
310 |
311 | /**
312 | * A react lifecycle method called when the component has mounted.
313 | * It calls the getStates method right after updating.
314 | */
315 | componentDidMount() {
316 | this.getAddressFromLocation();
317 | }
318 |
319 | /**
320 | * The render function.
321 | */
322 | render() {
323 | const { isAuthenticated } = this.props.auth0;
324 | const {
325 | lat,
326 | lng,
327 | city,
328 | results,
329 | isLoading,
330 | selectedLat,
331 | selectedLng,
332 | isAndroid,
333 | isIos,
334 | } = this.state;
335 |
336 | const result_list =
337 | results && results.length !== 0
338 | ? results.map((vaccineCenter, index) => {
339 | return (
340 |
309 |
310 |
325 | )}
326 | {results && results.length !== 0 && !isLoading && (
327 |
311 |
313 | {!isAuthenticated && ( 314 | 315 | Please register a request to enable service in your area{" "} 316 | 317 | )} 318 |
319 | {!isAuthenticated && (
320 | No results found for {city}
312 |313 | {!isAuthenticated && ( 314 | 315 | Please register a request to enable service in your area{" "} 316 | 317 | )} 318 |
321 |
323 | )}
324 |
328 |
350 | )}
351 |
329 |
334 |
330 |
332 | Search Results for {city}
331 |{result_list}
333 |
335 |
339 | }
340 | myPlaces={[
341 | { id: "1", pos: { lat, lng } },
342 | {
343 | id: "2",
344 | pos: { lat: selectedLat, lng: selectedLng },
345 | },
346 | ]}
347 | />
348 |
349 |
344 | this.setNewLocation(vaccineCenter.lat, vaccineCenter.long)
345 | }
346 | >
347 |
385 | );
386 | })
387 | : [];
388 | return (
389 | <>
390 | 348 | {vaccineCenter?.name}{" "} 349 | 350 | {this.generateDistance( 351 | lat, 352 | lng, 353 | vaccineCenter.lat, 354 | vaccineCenter.long, 355 | "K" 356 | )}{" "} 357 | Km 358 | 359 |
360 | 361 | 362 | {vaccineCenter?.address} 363 | 364 | 365 | 383 | {/* TODO(@codecakes): add phone number */} 384 |
399 | {isLoading && }
400 | {results && results.length === 0 && !isLoading && (
401 |
449 |
450 | );
451 | }
452 | }
453 | export default compose(withAuth0, MaindHOC)(Nearby);
454 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background-color: #fff;
9 | padding: 0;
10 | font-family: "Lato", sans-serif;
11 | font-size: 24px;
12 | }
13 |
14 | /* ************ */
15 |
16 | /* ** HEADER ** */
17 |
18 | /* ************ */
19 |
20 | header {
21 | width: 100%;
22 | height: auto;
23 | margin: 0 auto;
24 | box-shadow: 1px 0 10px -5px #000;
25 | }
26 | header .headerin {
27 | display: flex;
28 | justify-content: space-between;
29 | align-items: center;
30 | padding: 0 120px;
31 | }
32 | header .headerin .logo {
33 | width: 180px;
34 | height: auto;
35 | }
36 |
37 | /* ************ */
38 |
39 | /* ** FOOTER ** */
40 |
41 | /* ************ */
42 |
43 | footer {
44 | width: 100%;
45 | margin: 0 auto;
46 | padding: 24px 0;
47 | border-top: 1px solid #252759;
48 | }
49 |
50 | footer .footerin {
51 | display: flex;
52 | justify-content: space-around;
53 | align-items: center;
54 | padding: 20px;
55 | }
56 |
57 | footer .footerin .w40 {
58 | display: flex;
59 | flex-direction: column;
60 | align-items: center;
61 | }
62 |
63 | footer .footerin h3 {
64 | font-size: 20px;
65 | margin: 0 0 15px 0;
66 | padding: 0;
67 | color: #252759;
68 | font-family: "Montserrat", sans-serif;
69 | }
70 |
71 | footer .footerin button {
72 | padding: 10px 20px;
73 | border: 1px solid #0455bf;
74 | font-family: "Montserrat", sans-serif;
75 | font-size: 16px;
76 | letter-spacing: 1px;
77 | color: #fff;
78 | background-color: #0455bf;
79 | cursor: pointer;
80 | }
81 |
82 | footer .footerin button:hover {
83 | background-color: #003474;
84 | outline: none;
85 | }
86 |
87 | footer .footerin a {
88 | text-decoration: none;
89 | }
90 |
91 | footer .footerin .w30 {
92 | display: flex;
93 | flex-direction: column;
94 | align-items: flex-start;
95 | }
96 |
97 | footer .footerin .w30 .links {
98 | display: flex;
99 | flex-direction: column;
100 | justify-content: center;
101 | }
102 |
103 | footer .footerin .w30 .links a {
104 | text-decoration: none;
105 | text-transform: uppercase;
106 | font-family: "Montserrat", sans-serif;
107 | font-size: 16px;
108 | letter-spacing: 1px;
109 | color: #252759;
110 | margin-bottom: 10px;
111 | }
112 |
113 | footer .footerin .w30 .media-links {
114 | display: flex;
115 | align-items: flex-start;
116 | flex-direction: column;
117 | padding: 0;
118 | margin: 0;
119 | }
120 |
121 | footer .footerin .w30 .media-links .first-row {
122 | display: flex;
123 | align-items: center;
124 | }
125 |
126 | footer .footerin .w30 .media-links .second-row {
127 | display: flex;
128 | align-items: center;
129 | }
130 |
131 | footer .footerin .w30 .media-links img {
132 | width: 100px;
133 | height: auto;
134 | margin: 10px 10px 10px 0;
135 | }
136 |
137 | footer .footerin .w30 .media-links #square {
138 | height: 30px;
139 | width: auto;
140 | }
141 |
142 | footer #cookieData .closebtn {
143 | float: right;
144 | }
145 |
146 | /* ***************** */
147 |
148 | /* ** COPYRIGHT ** */
149 |
150 | /* ***************** */
151 |
152 | .copyright {
153 | background-color: #1e2248;
154 | width: 100%;
155 | margin: 0 auto;
156 | }
157 |
158 | .copyright p {
159 | font-size: 14px;
160 | color: #fff;
161 | padding: 20px;
162 | }
163 |
164 | /* ************ */
165 |
166 | /* ** COOKIE ** */
167 |
168 | /* ************ */
169 |
170 | #cookieData .cookie-title {
171 | display: flex;
172 | justify-content: center;
173 | flex-direction: row;
174 | width: 100%;
175 | }
176 |
177 | #cookieData .cookie-title h3 {
178 | text-align: left;
179 | font-size: 24px;
180 | letter-spacing: 0;
181 | color: #252759;
182 | opacity: 1;
183 | }
184 | #cookieData .cookie-title img {
185 | width: 30px;
186 | height: 30px;
187 | margin: 0 5px;
188 | }
189 |
190 | #cookieData .cookie-close {
191 | background: transparent;
192 | border: none;
193 | color: black;
194 | float: right;
195 | height: 20px;
196 | opacity: 1;
197 | width: 20px;
198 | clear: both;
199 | display: block;
200 | line-height: 0;
201 | }
202 | #cookieData {
203 | padding: 20px;
204 | -ms-overflow-style: none; /* IE and Edge */
205 | scrollbar-width: none; /* Firefox */
206 | }
207 | #cookieData::-webkit-scrollbar {
208 | display: none;
209 | }
210 |
211 | #cookieData p,
212 | #cookieData div {
213 | text-align: left;
214 | font-size: 14px;
215 | letter-spacing: 0;
216 | opacity: 1;
217 | color: #707070;
218 | }
219 | #CookieDeclarationChangeConsent {
220 | padding: 20px 0;
221 | }
222 | #CookieDeclarationChangeConsent a {
223 | background-color: #0455bf;
224 | color: #fff;
225 | padding: 10px;
226 | border-radius: 5px;
227 | }
228 |
229 | #CookieDeclarationUserStatusLabelWithdraw a {
230 | border: 1px solid #0455bf;
231 | background-color: #fff;
232 | color: #0455bf;
233 | }
234 |
235 | #cookieData .CookieDeclarationTable a {
236 | text-decoration: underline;
237 | }
238 |
239 | /* ***************** */
240 |
241 | /* ** HOME BANNER ** */
242 |
243 | /* ***************** */
244 |
245 | #banner {
246 | width: 100%;
247 | height: auto;
248 | margin: 0 auto;
249 | padding: 80px 0;
250 | background-repeat: no-repeat;
251 | background-position: center;
252 | background-size: 100%;
253 | background-image: url("https://d2vgampz89jm7o.cloudfront.net/Hero+Image-Half+Blur.png");
254 | background-color: rgba(0, 0, 0, 0.53);
255 | background-blend-mode: darken;
256 | background-attachment: fixed;
257 | box-shadow: 1px 0 10px -5px #000;
258 | }
259 |
260 | #banner .banner-in {
261 | width: 98%;
262 | max-width: 1200px;
263 | height: auto;
264 | margin: 0 auto;
265 | padding: 0;
266 | text-align: center;
267 | }
268 |
269 | #banner .banner-in h1 {
270 | font-family: "Lato", sans-serif;
271 | font-size: 76px;
272 | font-weight: normal;
273 | color: #fff;
274 | margin: 0;
275 | padding: 0;
276 | }
277 |
278 | #banner .banner-in p {
279 | font-size: 24px;
280 | font-weight: normal;
281 | color: #fff;
282 | margin: 0 auto;
283 | font-family: "Montserrat", sans-serif;
284 | text-align: center;
285 | max-width: 560px;
286 | line-height: 45px;
287 | }
288 |
289 | #banner .banner-in button {
290 | background-color: #f15c08;
291 | margin: 20px 0 100px 0;
292 | padding: 30px;
293 | border-radius: 100%;
294 | border: 0;
295 | width: 220px;
296 | height: 220px;
297 | box-shadow: 0 10px 20px -5px #000;
298 | outline: 0;
299 | cursor: pointer;
300 | text-shadow: 0 0 10px -5px #000;
301 | }
302 |
303 | #banner .banner-in button:hover {
304 | background-color: #bf4600;
305 | }
306 |
307 | #banner .banner-in button h2 {
308 | font-family: "Montserrat", sans-serif;
309 | font-size: 50px;
310 | margin: 0;
311 | padding: 0;
312 | font-weight: normal;
313 | letter-spacing: 2px;
314 | color: #fff;
315 | }
316 |
317 | #banner .banner-in button p {
318 | font-size: 16px;
319 | font-weight: 700;
320 | margin: 20px 0 0 0;
321 | padding: 0;
322 | letter-spacing: 2px;
323 | color: #fff;
324 | line-height: 30px;
325 | }
326 |
327 | /* ************ */
328 |
329 | /* ** SEARCH ** */
330 |
331 | /* ************ */
332 |
333 | #search {
334 | width: 100%;
335 | height: 600px;
336 | margin: 0 auto;
337 | padding: 0;
338 | position: relative;
339 | box-shadow: 1px 0 10px -5px #000;
340 | }
341 |
342 | #search .noresults {
343 | width: auto;
344 | height: auto;
345 | position: absolute;
346 | top: 50%;
347 | left: 50%;
348 | transform: translate(-50%, -50%);
349 | text-align: center;
350 | }
351 |
352 | #search .noresults .icon {
353 | width: 250px;
354 | height: 250px;
355 | background-image: url("/src/assets/noresults.png");
356 | background-repeat: no-repeat;
357 | background-size: 100%;
358 | background-position: center;
359 | margin: 0 auto;
360 | }
361 |
362 | #search .noresults .text {
363 | width: auto;
364 | height: auto;
365 | margin: 0 auto;
366 | padding: 50px 0 0 0;
367 | }
368 |
369 | #search .noresults .text h2 {
370 | font-size: 30px;
371 | font-weight: normal;
372 | margin: 0;
373 | padding: 0;
374 | color: #2f97f2;
375 | letter-spacing: 3px;
376 | text-transform: uppercase;
377 | }
378 |
379 | #search .noresults .text span {
380 | font-size: 18px;
381 | font-weight: bold;
382 | color: #207ecf;
383 | }
384 |
385 | #search .noresults button {
386 | padding: 10px 20px;
387 | font-family: "Montserrat", "sans-serif";
388 | font-size: 16px;
389 | color: #fff;
390 | background-color: #0455bf;
391 | cursor: pointer;
392 | margin-top: 14px;
393 | border: none;
394 | border-radius: 3px;
395 | }
396 |
397 | #search .noresults button:hover {
398 | background-color: darkblue;
399 | border: none;
400 | }
401 |
402 | #search .search-in {
403 | width: 100%;
404 | height: 100%;
405 | margin: 0 auto;
406 | padding: 0;
407 | display: flex;
408 | }
409 |
410 | #search .search-in .results {
411 | width: 40%;
412 | height: 100%;
413 | margin: 0;
414 | padding: 0;
415 | }
416 |
417 | #search .search-in .results .header {
418 | width: 100%;
419 | height: 62px;
420 | margin: 0 auto;
421 | padding: 0;
422 | display: block;
423 | background-color: #f0f9fe;
424 | box-shadow: inset 0 0 10px -5px #f0f9fe;
425 | }
426 |
427 | #search .search-in .results .header h2 {
428 | font-size: 18px;
429 | font-weight: bold;
430 | margin: 0;
431 | padding: 20px;
432 | color: #2f97f2;
433 | }
434 |
435 | #search .search-in .results .content {
436 | width: 100%;
437 | height: 537px;
438 | overflow: scroll;
439 | }
440 |
441 | #search .search-in .results .content .location {
442 | width: calc(100% - 40px);
443 | height: auto;
444 | margin: 20px auto;
445 | padding: 0;
446 | background-color: #f0f9fe;
447 | cursor: pointer;
448 | border-radius: 3px;
449 | box-shadow: -10px 10px 20px -11px #bdbdbd;
450 | overflow: hidden;
451 | }
452 |
453 | #search .search-in .results .content .location h2 {
454 | font-size: 20px;
455 | font-weight: bold;
456 | display: block;
457 | margin: 0;
458 | padding: 20px;
459 | color: #2f97f2;
460 | position: relative;
461 | }
462 |
463 | #search .search-in .results .content .location h2 span {
464 | position: absolute;
465 | right: 18px;
466 | top: 24px;
467 | font-size: 14px;
468 | letter-spacing: 1px;
469 | color: #151515;
470 | }
471 |
472 | #search .search-in .results .content .location address,
473 | #search .search-in .results .content .location p {
474 | font-size: 16px;
475 | font-weight: normal;
476 | font-style: normal;
477 | color: #222;
478 | padding: 0 15px 15px 50px;
479 | margin: 0;
480 | line-height: 30px;
481 | position: relative;
482 | }
483 |
484 | #search .search-in .results .content .location p {
485 | padding: 10px 20px 27px 20px;
486 | }
487 |
488 | #search .search-in .results .content .location address i,
489 | #search .search-in .results .content .location p i {
490 | font-size: 20px;
491 | color: #2f97f2;
492 | margin-right: 10px;
493 | }
494 |
495 | #search .search-in .results .content .location address i {
496 | margin-right: 15px;
497 | position: absolute;
498 | left: 20px;
499 | top: 4px;
500 | }
501 |
502 | #search .maparea {
503 | width: 60%;
504 | height: 100%;
505 | margin: 0;
506 | padding: 0;
507 | position: relative;
508 | }
509 |
510 | #search .uberBtn {
511 | position: relative;
512 | display: block;
513 | background: black;
514 | color: white;
515 | border-radius: 3px;
516 | padding: 8px;
517 | border: none;
518 | float: right;
519 | margin: 0 15px 15px;
520 | }
521 |
522 | #search .tooltipText {
523 | visibility: hidden;
524 | width: 120px;
525 | background-color: #555;
526 | color: #fff;
527 | text-align: center;
528 | border-radius: 6px;
529 | padding: 5px 0;
530 | position: absolute;
531 | z-index: 1;
532 | bottom: 125%;
533 | left: 50%;
534 | margin-left: -60px;
535 | opacity: 0;
536 | transition: opacity 0.3s;
537 | }
538 |
539 | #search .uberBtn .tooltipText::after {
540 | content: "";
541 | position: absolute;
542 | top: 100%;
543 | left: 50%;
544 | margin-left: -5px;
545 | border-width: 5px;
546 | border-style: solid;
547 | border-color: #555 transparent;
548 | }
549 |
550 | #search .uberBtn:hover .tooltipText {
551 | visibility: visible;
552 | opacity: 1;
553 | }
554 |
555 | #cover {
556 | width: 100%;
557 | height: 100%;
558 | background-image: url("/src/assets/loading.gif");
559 | background-repeat: no-repeat;
560 | background-size: 100px 100px;
561 | background-position: center;
562 | }
563 | a {
564 | text-decoration: none;
565 | color: #000;
566 | }
567 | .btn {
568 | border: 1px solid transparent;
569 | color: #000;
570 | padding: 12px 32px;
571 | text-align: center;
572 | text-decoration: none;
573 | display: inline-block;
574 | font-size: 14px;
575 | margin: 4px 2px;
576 | cursor: pointer;
577 | background: transparent;
578 | }
579 | .btn-edit {
580 | color: #0e5cc1;
581 | text-decoration: underline;
582 | }
583 | .btn-primary {
584 | background-color: #0455bf;
585 | color: #fff;
586 | }
587 | .btn-outline-primary {
588 | background-color: white;
589 | color: #0455bf;
590 | border: 1px solid #0455bf;
591 | }
592 | .btn-secondary {
593 | background-color: #f25c05;
594 | color: #fff;
595 | }
596 | .btn-ternary {
597 | background-color: white;
598 | color: #0e5cc1;
599 | font-weight: bold;
600 | border-radius: 4px;
601 | font-size: 12px;
602 | border: 2px solid #0e5cc1;
603 | }
604 | .dropdown {
605 | position: relative;
606 | margin: 16px;
607 | width: auto;
608 | display: inline-block;
609 | }
610 | .avatar {
611 | vertical-align: middle;
612 | width: 40px;
613 | height: 40px;
614 | border-radius: 50%;
615 | }
616 | .avatar-drop {
617 | box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
618 | border-radius: 5px;
619 | right: 0;
620 | top: 50px;
621 | z-index: 3;
622 | }
623 | .avatar-btn {
624 | cursor: pointer;
625 | display: flex;
626 | align-items: center;
627 | }
628 | .avatar-btn p {
629 | font-size: 14px;
630 | margin: 0px 5px 0px 0px;
631 | }
632 | .absolute {
633 | position: absolute;
634 | }
635 | .ml-96 {
636 | margin-left: 96px;
637 | }
638 | .w-56 {
639 | width: 14rem;
640 | }
641 | .h-auto {
642 | height: auto;
643 | }
644 | .list-group {
645 | list-style-type: none;
646 | padding: 0;
647 | margin: 0;
648 | }
649 |
650 | .list-group .list-group-item {
651 | border: 1px solid #ddd;
652 | margin-top: -1px; /* Prevent double borders */
653 | background-color: #fff;
654 | padding: 12px;
655 | font-size: 14px;
656 | cursor: pointer;
657 | }
658 | .d-flex {
659 | display: flex;
660 | }
661 | .justify-content-center {
662 | justify-content: center;
663 | }
664 | .justify-content-between {
665 | justify-content: space-between;
666 | }
667 | .align-items-center {
668 | align-items: center;
669 | }
670 | .m-0 {
671 | margin: 0;
672 | }
673 | .profile-sec-left {
674 | height: 100%;
675 | box-shadow: 0px 3px 6px #00000029;
676 | background: #fff;
677 | }
678 | .profile-sec-2 {
679 | padding: 30px;
680 | }
681 | .profile-sec-1 {
682 | display: flex;
683 | flex-direction: column;
684 | justify-content: center;
685 | align-items: center;
686 | padding-bottom: 80px;
687 | position: relative;
688 | z-index: 1;
689 | }
690 | .profile-sec-1::after {
691 | position: absolute;
692 | content: "";
693 | background-image: url("./assets/profile_back.svg");
694 | height: 100%;
695 | width: 100%;
696 | top: 0;
697 | z-index: -1;
698 | background-size: cover;
699 | background-position: top center;
700 | background-repeat: no-repeat;
701 | }
702 | .profile-avatar {
703 | width: 138px;
704 | height: 138px;
705 | background: #fff;
706 | border-radius: 100%;
707 | margin-bottom: 20px;
708 | }
709 | .profile-banner {
710 | width: 100%;
711 | height: auto;
712 | margin: 0 auto;
713 | padding: 80px 0;
714 | background-repeat: no-repeat;
715 | background-position: center;
716 | padding-left: 30px;
717 | padding-right: 30px;
718 | background-size: cover;
719 | background-image: url("https://d2vgampz89jm7o.cloudfront.net/Hero+Image-Half+Blur.png");
720 | background-color: rgba(0, 0, 0, 0.53);
721 | background-blend-mode: darken;
722 | background-attachment: fixed;
723 | box-shadow: 1px 0 10px -5px #000;
724 | }
725 | .profile-banner .btn {
726 | padding: 30px 10px;
727 | }
728 | .form-group {
729 | display: flex;
730 | flex-direction: column;
731 | margin-bottom: 26px;
732 | }
733 | .form-group label {
734 | font-size: 18px;
735 | color: #0455bf;
736 | font-weight: bold;
737 | }
738 |
739 | .form-control {
740 | border: 1px solid #252759;
741 | height: 40px;
742 | border-radius: 3px;
743 | padding: 10px 14px 10px 9px;
744 | font-size: 17px;
745 | }
746 | input.form-control[disabled] {
747 | border: none;
748 | padding-left: 0;
749 | background: transparent;
750 | }
751 | .form-control::-webkit-input-placeholder {
752 | /* Edge */
753 | color: #95989a;
754 | }
755 |
756 | .form-control:-ms-input-placeholder {
757 | /* Internet Explorer 10-11 */
758 | color: #95989a;
759 | }
760 |
761 | .form-control::placeholder {
762 | color: #95989a;
763 | }
764 | .fs-24 {
765 | font-size: 24px;
766 | }
767 | .fs-22 {
768 | font-size: 22px;
769 | }
770 | .fs-48 {
771 | font-size: 48px;
772 | }
773 | .fs-29 {
774 | font-size: 29px;
775 | }
776 | .fs-12 {
777 | font-size: 12px;
778 | }
779 | .fw-med {
780 | font-weight: 500;
781 | }
782 | .text-white {
783 | color: #fff;
784 | }
785 | .text-c-primary {
786 | color: #0455bf;
787 | }
788 | .text-c-secondary {
789 | color: #252759;
790 | }
791 | .text-default {
792 | color: #95989a !important;
793 | }
794 | .mr-80 {
795 | margin-right: 80px;
796 | }
797 | .mb-48 {
798 | margin-bottom: 48px;
799 | }
800 | .mb-20 {
801 | margin-bottom: 20px;
802 | }
803 | .mb-30 {
804 | margin-bottom: 30px;
805 | }
806 | .mr-30 {
807 | margin-right: 30px;
808 | }
809 | .p-30 {
810 | padding: 30px 40px;
811 | }
812 | .mt-25 {
813 | margin-top: 25px;
814 | }
815 | .m-0 {
816 | margin: 0 !important;
817 | }
818 | .mb-45 {
819 | margin-bottom: 45px;
820 | }
821 | .triangle {
822 | position: relative;
823 | background-color: orange;
824 | text-align: left;
825 | border-top-right-radius: 30%;
826 | width: 10em;
827 | height: 10em;
828 | }
829 | .triangle:before,
830 | .triangle:after {
831 | content: "";
832 | position: absolute;
833 | background-color: inherit;
834 | }
835 | .triangle:before,
836 | .triangle:after {
837 | width: 10em;
838 | height: 10em;
839 | border-top-right-radius: 30%;
840 | }
841 |
842 | .triangle {
843 | transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
844 | }
845 | .triangle:before {
846 | transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707)
847 | translate(0, -50%);
848 | }
849 | .triangle:after {
850 | transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
851 | }
852 | #tawkchat-minified-iframe-element,
853 | #tawkchat-minified-iframe-element html,
854 | #tawkchat-minified-iframe-element body {
855 | width: 320px !important;
856 | }
857 |
858 | .footer-tabs {
859 | width: 100%;
860 | background: #fff;
861 | position: fixed;
862 | bottom: 0;
863 | display: flex;
864 | justify-content: space-evenly;
865 | box-shadow: 0px 3px 6px #00000029;
866 | padding: 13px;
867 | }
868 | .footer-tabs .tab-link {
869 | padding: 8px 22px;
870 | font-size: 11px;
871 | color: #707070;
872 | display: flex;
873 | flex-direction: column;
874 | align-items: center;
875 | }
876 | .footer-tabs .tab-link i {
877 | font-size: 26px;
878 | padding-bottom: 5px;
879 | }
880 | .tab-link-active {
881 | background-color: #0455bf;
882 | color: #fff !important;
883 | border-radius: 11px;
884 | }
885 |
886 | @media only screen and (min-width: 768px) {
887 | .profile-sec-2 {
888 | padding: 75px;
889 | }
890 | }
891 |
892 | @media only screen and (max-width: 600px) {
893 | .headerin {
894 | padding: 10px !important;
895 | justify-content: center !important;
896 | }
897 |
898 | .profile-avatar {
899 | height: 66px;
900 | width: 66px;
901 | }
902 | .profile-sec-2 {
903 | padding: 38px;
904 | }
905 | .fs-22 {
906 | font-size: 16px;
907 | }
908 | }
909 |
--------------------------------------------------------------------------------
/src/Grid.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
3 | */
4 | /*!
5 | * Bootstrap v3.4.1 (https://getbootstrap.com/)
6 | * Copyright 2011-2019 Twitter, Inc.
7 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
8 | */
9 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
10 | html {
11 | font-family: sans-serif;
12 | -ms-text-size-adjust: 100%;
13 | -webkit-text-size-adjust: 100%;
14 | }
15 | body {
16 | margin: 0;
17 | }
18 | article,
19 | aside,
20 | details,
21 | figcaption,
22 | figure,
23 | footer,
24 | header,
25 | hgroup,
26 | main,
27 | menu,
28 | nav,
29 | section,
30 | summary {
31 | display: block;
32 | }
33 | audio,
34 | canvas,
35 | progress,
36 | video {
37 | display: inline-block;
38 | vertical-align: baseline;
39 | }
40 | audio:not([controls]) {
41 | display: none;
42 | height: 0;
43 | }
44 | [hidden],
45 | template {
46 | display: none;
47 | }
48 | a {
49 | background-color: transparent;
50 | }
51 | a:active,
52 | a:hover {
53 | outline: 0;
54 | }
55 | abbr[title] {
56 | border-bottom: none;
57 | text-decoration: underline;
58 | text-decoration: underline dotted;
59 | }
60 | b,
61 | strong {
62 | font-weight: bold;
63 | }
64 | dfn {
65 | font-style: italic;
66 | }
67 | h1 {
68 | font-size: 2em;
69 | margin: 0.67em 0;
70 | }
71 | mark {
72 | background: #ff0;
73 | color: #000;
74 | }
75 | small {
76 | font-size: 80%;
77 | }
78 | sub,
79 | sup {
80 | font-size: 75%;
81 | line-height: 0;
82 | position: relative;
83 | vertical-align: baseline;
84 | }
85 | sup {
86 | top: -0.5em;
87 | }
88 | sub {
89 | bottom: -0.25em;
90 | }
91 | img {
92 | border: 0;
93 | }
94 | svg:not(:root) {
95 | overflow: hidden;
96 | }
97 | figure {
98 | margin: 1em 40px;
99 | }
100 | hr {
101 | -webkit-box-sizing: content-box;
102 | -moz-box-sizing: content-box;
103 | box-sizing: content-box;
104 | height: 0;
105 | }
106 | pre {
107 | overflow: auto;
108 | }
109 | code,
110 | kbd,
111 | pre,
112 | samp {
113 | font-family: monospace, monospace;
114 | font-size: 1em;
115 | }
116 | button,
117 | input,
118 | optgroup,
119 | select,
120 | textarea {
121 | color: inherit;
122 | font: inherit;
123 | margin: 0;
124 | }
125 | button {
126 | overflow: visible;
127 | }
128 | button,
129 | select {
130 | text-transform: none;
131 | }
132 | button,
133 | html input[type="button"],
134 | input[type="reset"],
135 | input[type="submit"] {
136 | -webkit-appearance: button;
137 | cursor: pointer;
138 | }
139 | button[disabled],
140 | html input[disabled] {
141 | cursor: default;
142 | }
143 | button::-moz-focus-inner,
144 | input::-moz-focus-inner {
145 | border: 0;
146 | padding: 0;
147 | }
148 | input {
149 | line-height: normal;
150 | }
151 | input[type="checkbox"],
152 | input[type="radio"] {
153 | -webkit-box-sizing: border-box;
154 | -moz-box-sizing: border-box;
155 | box-sizing: border-box;
156 | padding: 0;
157 | }
158 | input[type="number"]::-webkit-inner-spin-button,
159 | input[type="number"]::-webkit-outer-spin-button {
160 | height: auto;
161 | }
162 | input[type="search"] {
163 | -webkit-appearance: textfield;
164 | -webkit-box-sizing: content-box;
165 | -moz-box-sizing: content-box;
166 | box-sizing: content-box;
167 | }
168 | input[type="search"]::-webkit-search-cancel-button,
169 | input[type="search"]::-webkit-search-decoration {
170 | -webkit-appearance: none;
171 | }
172 | fieldset {
173 | border: 1px solid #c0c0c0;
174 | margin: 0 2px;
175 | padding: 0.35em 0.625em 0.75em;
176 | }
177 | legend {
178 | border: 0;
179 | padding: 0;
180 | }
181 | textarea {
182 | overflow: auto;
183 | }
184 | optgroup {
185 | font-weight: bold;
186 | }
187 | table {
188 | border-collapse: collapse;
189 | border-spacing: 0;
190 | }
191 | td,
192 | th {
193 | padding: 0;
194 | }
195 | * {
196 | -webkit-box-sizing: border-box;
197 | -moz-box-sizing: border-box;
198 | box-sizing: border-box;
199 | }
200 | *:before,
201 | *:after {
202 | -webkit-box-sizing: border-box;
203 | -moz-box-sizing: border-box;
204 | box-sizing: border-box;
205 | }
206 | html {
207 | font-size: 10px;
208 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
209 | }
210 | body {
211 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
212 | font-size: 14px;
213 | line-height: 1.42857143;
214 | color: #333333;
215 | background-color: #ffffff;
216 | }
217 | input,
218 | button,
219 | select,
220 | textarea {
221 | font-family: inherit;
222 | font-size: inherit;
223 | line-height: inherit;
224 | }
225 | a {
226 | color: #337ab7;
227 | text-decoration: none;
228 | }
229 | a:hover,
230 | a:focus {
231 | color: #23527c;
232 | text-decoration: underline;
233 | }
234 | a:focus {
235 | outline: 5px auto -webkit-focus-ring-color;
236 | outline-offset: -2px;
237 | }
238 | figure {
239 | margin: 0;
240 | }
241 | img {
242 | vertical-align: middle;
243 | }
244 | .img-responsive {
245 | display: block;
246 | max-width: 100%;
247 | height: auto;
248 | }
249 | .img-rounded {
250 | border-radius: 6px;
251 | }
252 | .img-thumbnail {
253 | padding: 4px;
254 | line-height: 1.42857143;
255 | background-color: #ffffff;
256 | border: 1px solid #dddddd;
257 | border-radius: 4px;
258 | -webkit-transition: all 0.2s ease-in-out;
259 | -o-transition: all 0.2s ease-in-out;
260 | transition: all 0.2s ease-in-out;
261 | display: inline-block;
262 | max-width: 100%;
263 | height: auto;
264 | }
265 | .img-circle {
266 | border-radius: 50%;
267 | }
268 | hr {
269 | margin-top: 20px;
270 | margin-bottom: 20px;
271 | border: 0;
272 | border-top: 1px solid #eeeeee;
273 | }
274 | .sr-only {
275 | position: absolute;
276 | width: 1px;
277 | height: 1px;
278 | padding: 0;
279 | margin: -1px;
280 | overflow: hidden;
281 | clip: rect(0, 0, 0, 0);
282 | border: 0;
283 | }
284 | .sr-only-focusable:active,
285 | .sr-only-focusable:focus {
286 | position: static;
287 | width: auto;
288 | height: auto;
289 | margin: 0;
290 | overflow: visible;
291 | clip: auto;
292 | }
293 | [role="button"] {
294 | cursor: pointer;
295 | }
296 | .container {
297 | padding-right: 15px;
298 | padding-left: 15px;
299 | margin-right: auto;
300 | margin-left: auto;
301 | }
302 | @media (min-width: 768px) {
303 | .container {
304 | width: 750px;
305 | }
306 | }
307 | @media (min-width: 992px) {
308 | .container {
309 | width: 970px;
310 | }
311 | }
312 | @media (min-width: 1200px) {
313 | .container {
314 | width: 1170px;
315 | }
316 | }
317 | .container-fluid {
318 | padding-right: 15px;
319 | padding-left: 15px;
320 | margin-right: auto;
321 | margin-left: auto;
322 | }
323 | .row {
324 | margin-right: -15px;
325 | margin-left: -15px;
326 | }
327 | .row-no-gutters {
328 | margin-right: 0;
329 | margin-left: 0;
330 | }
331 | .row-no-gutters [class*="col-"] {
332 | padding-right: 0;
333 | padding-left: 0;
334 | }
335 | .col-xs-1,
336 | .col-sm-1,
337 | .col-md-1,
338 | .col-lg-1,
339 | .col-xs-2,
340 | .col-sm-2,
341 | .col-md-2,
342 | .col-lg-2,
343 | .col-xs-3,
344 | .col-sm-3,
345 | .col-md-3,
346 | .col-lg-3,
347 | .col-xs-4,
348 | .col-sm-4,
349 | .col-md-4,
350 | .col-lg-4,
351 | .col-xs-5,
352 | .col-sm-5,
353 | .col-md-5,
354 | .col-lg-5,
355 | .col-xs-6,
356 | .col-sm-6,
357 | .col-md-6,
358 | .col-lg-6,
359 | .col-xs-7,
360 | .col-sm-7,
361 | .col-md-7,
362 | .col-lg-7,
363 | .col-xs-8,
364 | .col-sm-8,
365 | .col-md-8,
366 | .col-lg-8,
367 | .col-xs-9,
368 | .col-sm-9,
369 | .col-md-9,
370 | .col-lg-9,
371 | .col-xs-10,
372 | .col-sm-10,
373 | .col-md-10,
374 | .col-lg-10,
375 | .col-xs-11,
376 | .col-sm-11,
377 | .col-md-11,
378 | .col-lg-11,
379 | .col-xs-12,
380 | .col-sm-12,
381 | .col-md-12,
382 | .col-lg-12 {
383 | position: relative;
384 | min-height: 1px;
385 | padding-right: 15px;
386 | padding-left: 15px;
387 | }
388 | .col-xs-1,
389 | .col-xs-2,
390 | .col-xs-3,
391 | .col-xs-4,
392 | .col-xs-5,
393 | .col-xs-6,
394 | .col-xs-7,
395 | .col-xs-8,
396 | .col-xs-9,
397 | .col-xs-10,
398 | .col-xs-11,
399 | .col-xs-12 {
400 | float: left;
401 | }
402 | .col-xs-12 {
403 | width: 100%;
404 | }
405 | .col-xs-11 {
406 | width: 91.66666667%;
407 | }
408 | .col-xs-10 {
409 | width: 83.33333333%;
410 | }
411 | .col-xs-9 {
412 | width: 75%;
413 | }
414 | .col-xs-8 {
415 | width: 66.66666667%;
416 | }
417 | .col-xs-7 {
418 | width: 58.33333333%;
419 | }
420 | .col-xs-6 {
421 | width: 50%;
422 | }
423 | .col-xs-5 {
424 | width: 41.66666667%;
425 | }
426 | .col-xs-4 {
427 | width: 33.33333333%;
428 | }
429 | .col-xs-3 {
430 | width: 25%;
431 | }
432 | .col-xs-2 {
433 | width: 16.66666667%;
434 | }
435 | .col-xs-1 {
436 | width: 8.33333333%;
437 | }
438 | .col-xs-pull-12 {
439 | right: 100%;
440 | }
441 | .col-xs-pull-11 {
442 | right: 91.66666667%;
443 | }
444 | .col-xs-pull-10 {
445 | right: 83.33333333%;
446 | }
447 | .col-xs-pull-9 {
448 | right: 75%;
449 | }
450 | .col-xs-pull-8 {
451 | right: 66.66666667%;
452 | }
453 | .col-xs-pull-7 {
454 | right: 58.33333333%;
455 | }
456 | .col-xs-pull-6 {
457 | right: 50%;
458 | }
459 | .col-xs-pull-5 {
460 | right: 41.66666667%;
461 | }
462 | .col-xs-pull-4 {
463 | right: 33.33333333%;
464 | }
465 | .col-xs-pull-3 {
466 | right: 25%;
467 | }
468 | .col-xs-pull-2 {
469 | right: 16.66666667%;
470 | }
471 | .col-xs-pull-1 {
472 | right: 8.33333333%;
473 | }
474 | .col-xs-pull-0 {
475 | right: auto;
476 | }
477 | .col-xs-push-12 {
478 | left: 100%;
479 | }
480 | .col-xs-push-11 {
481 | left: 91.66666667%;
482 | }
483 | .col-xs-push-10 {
484 | left: 83.33333333%;
485 | }
486 | .col-xs-push-9 {
487 | left: 75%;
488 | }
489 | .col-xs-push-8 {
490 | left: 66.66666667%;
491 | }
492 | .col-xs-push-7 {
493 | left: 58.33333333%;
494 | }
495 | .col-xs-push-6 {
496 | left: 50%;
497 | }
498 | .col-xs-push-5 {
499 | left: 41.66666667%;
500 | }
501 | .col-xs-push-4 {
502 | left: 33.33333333%;
503 | }
504 | .col-xs-push-3 {
505 | left: 25%;
506 | }
507 | .col-xs-push-2 {
508 | left: 16.66666667%;
509 | }
510 | .col-xs-push-1 {
511 | left: 8.33333333%;
512 | }
513 | .col-xs-push-0 {
514 | left: auto;
515 | }
516 | .col-xs-offset-12 {
517 | margin-left: 100%;
518 | }
519 | .col-xs-offset-11 {
520 | margin-left: 91.66666667%;
521 | }
522 | .col-xs-offset-10 {
523 | margin-left: 83.33333333%;
524 | }
525 | .col-xs-offset-9 {
526 | margin-left: 75%;
527 | }
528 | .col-xs-offset-8 {
529 | margin-left: 66.66666667%;
530 | }
531 | .col-xs-offset-7 {
532 | margin-left: 58.33333333%;
533 | }
534 | .col-xs-offset-6 {
535 | margin-left: 50%;
536 | }
537 | .col-xs-offset-5 {
538 | margin-left: 41.66666667%;
539 | }
540 | .col-xs-offset-4 {
541 | margin-left: 33.33333333%;
542 | }
543 | .col-xs-offset-3 {
544 | margin-left: 25%;
545 | }
546 | .col-xs-offset-2 {
547 | margin-left: 16.66666667%;
548 | }
549 | .col-xs-offset-1 {
550 | margin-left: 8.33333333%;
551 | }
552 | .col-xs-offset-0 {
553 | margin-left: 0%;
554 | }
555 | @media (min-width: 768px) {
556 | .col-sm-1,
557 | .col-sm-2,
558 | .col-sm-3,
559 | .col-sm-4,
560 | .col-sm-5,
561 | .col-sm-6,
562 | .col-sm-7,
563 | .col-sm-8,
564 | .col-sm-9,
565 | .col-sm-10,
566 | .col-sm-11,
567 | .col-sm-12 {
568 | float: left;
569 | }
570 | .col-sm-12 {
571 | width: 100%;
572 | }
573 | .col-sm-11 {
574 | width: 91.66666667%;
575 | }
576 | .col-sm-10 {
577 | width: 83.33333333%;
578 | }
579 | .col-sm-9 {
580 | width: 75%;
581 | }
582 | .col-sm-8 {
583 | width: 66.66666667%;
584 | }
585 | .col-sm-7 {
586 | width: 58.33333333%;
587 | }
588 | .col-sm-6 {
589 | width: 50%;
590 | }
591 | .col-sm-5 {
592 | width: 41.66666667%;
593 | }
594 | .col-sm-4 {
595 | width: 33.33333333%;
596 | }
597 | .col-sm-3 {
598 | width: 25%;
599 | }
600 | .col-sm-2 {
601 | width: 16.66666667%;
602 | }
603 | .col-sm-1 {
604 | width: 8.33333333%;
605 | }
606 | .col-sm-pull-12 {
607 | right: 100%;
608 | }
609 | .col-sm-pull-11 {
610 | right: 91.66666667%;
611 | }
612 | .col-sm-pull-10 {
613 | right: 83.33333333%;
614 | }
615 | .col-sm-pull-9 {
616 | right: 75%;
617 | }
618 | .col-sm-pull-8 {
619 | right: 66.66666667%;
620 | }
621 | .col-sm-pull-7 {
622 | right: 58.33333333%;
623 | }
624 | .col-sm-pull-6 {
625 | right: 50%;
626 | }
627 | .col-sm-pull-5 {
628 | right: 41.66666667%;
629 | }
630 | .col-sm-pull-4 {
631 | right: 33.33333333%;
632 | }
633 | .col-sm-pull-3 {
634 | right: 25%;
635 | }
636 | .col-sm-pull-2 {
637 | right: 16.66666667%;
638 | }
639 | .col-sm-pull-1 {
640 | right: 8.33333333%;
641 | }
642 | .col-sm-pull-0 {
643 | right: auto;
644 | }
645 | .col-sm-push-12 {
646 | left: 100%;
647 | }
648 | .col-sm-push-11 {
649 | left: 91.66666667%;
650 | }
651 | .col-sm-push-10 {
652 | left: 83.33333333%;
653 | }
654 | .col-sm-push-9 {
655 | left: 75%;
656 | }
657 | .col-sm-push-8 {
658 | left: 66.66666667%;
659 | }
660 | .col-sm-push-7 {
661 | left: 58.33333333%;
662 | }
663 | .col-sm-push-6 {
664 | left: 50%;
665 | }
666 | .col-sm-push-5 {
667 | left: 41.66666667%;
668 | }
669 | .col-sm-push-4 {
670 | left: 33.33333333%;
671 | }
672 | .col-sm-push-3 {
673 | left: 25%;
674 | }
675 | .col-sm-push-2 {
676 | left: 16.66666667%;
677 | }
678 | .col-sm-push-1 {
679 | left: 8.33333333%;
680 | }
681 | .col-sm-push-0 {
682 | left: auto;
683 | }
684 | .col-sm-offset-12 {
685 | margin-left: 100%;
686 | }
687 | .col-sm-offset-11 {
688 | margin-left: 91.66666667%;
689 | }
690 | .col-sm-offset-10 {
691 | margin-left: 83.33333333%;
692 | }
693 | .col-sm-offset-9 {
694 | margin-left: 75%;
695 | }
696 | .col-sm-offset-8 {
697 | margin-left: 66.66666667%;
698 | }
699 | .col-sm-offset-7 {
700 | margin-left: 58.33333333%;
701 | }
702 | .col-sm-offset-6 {
703 | margin-left: 50%;
704 | }
705 | .col-sm-offset-5 {
706 | margin-left: 41.66666667%;
707 | }
708 | .col-sm-offset-4 {
709 | margin-left: 33.33333333%;
710 | }
711 | .col-sm-offset-3 {
712 | margin-left: 25%;
713 | }
714 | .col-sm-offset-2 {
715 | margin-left: 16.66666667%;
716 | }
717 | .col-sm-offset-1 {
718 | margin-left: 8.33333333%;
719 | }
720 | .col-sm-offset-0 {
721 | margin-left: 0%;
722 | }
723 | }
724 | @media (min-width: 992px) {
725 | .col-md-1,
726 | .col-md-2,
727 | .col-md-3,
728 | .col-md-4,
729 | .col-md-5,
730 | .col-md-6,
731 | .col-md-7,
732 | .col-md-8,
733 | .col-md-9,
734 | .col-md-10,
735 | .col-md-11,
736 | .col-md-12 {
737 | float: left;
738 | }
739 | .col-md-12 {
740 | width: 100%;
741 | }
742 | .col-md-11 {
743 | width: 91.66666667%;
744 | }
745 | .col-md-10 {
746 | width: 83.33333333%;
747 | }
748 | .col-md-9 {
749 | width: 75%;
750 | }
751 | .col-md-8 {
752 | width: 66.66666667%;
753 | }
754 | .col-md-7 {
755 | width: 58.33333333%;
756 | }
757 | .col-md-6 {
758 | width: 50%;
759 | }
760 | .col-md-5 {
761 | width: 41.66666667%;
762 | }
763 | .col-md-4 {
764 | width: 33.33333333%;
765 | }
766 | .col-md-3 {
767 | width: 25%;
768 | }
769 | .col-md-2 {
770 | width: 16.66666667%;
771 | }
772 | .col-md-1 {
773 | width: 8.33333333%;
774 | }
775 | .col-md-pull-12 {
776 | right: 100%;
777 | }
778 | .col-md-pull-11 {
779 | right: 91.66666667%;
780 | }
781 | .col-md-pull-10 {
782 | right: 83.33333333%;
783 | }
784 | .col-md-pull-9 {
785 | right: 75%;
786 | }
787 | .col-md-pull-8 {
788 | right: 66.66666667%;
789 | }
790 | .col-md-pull-7 {
791 | right: 58.33333333%;
792 | }
793 | .col-md-pull-6 {
794 | right: 50%;
795 | }
796 | .col-md-pull-5 {
797 | right: 41.66666667%;
798 | }
799 | .col-md-pull-4 {
800 | right: 33.33333333%;
801 | }
802 | .col-md-pull-3 {
803 | right: 25%;
804 | }
805 | .col-md-pull-2 {
806 | right: 16.66666667%;
807 | }
808 | .col-md-pull-1 {
809 | right: 8.33333333%;
810 | }
811 | .col-md-pull-0 {
812 | right: auto;
813 | }
814 | .col-md-push-12 {
815 | left: 100%;
816 | }
817 | .col-md-push-11 {
818 | left: 91.66666667%;
819 | }
820 | .col-md-push-10 {
821 | left: 83.33333333%;
822 | }
823 | .col-md-push-9 {
824 | left: 75%;
825 | }
826 | .col-md-push-8 {
827 | left: 66.66666667%;
828 | }
829 | .col-md-push-7 {
830 | left: 58.33333333%;
831 | }
832 | .col-md-push-6 {
833 | left: 50%;
834 | }
835 | .col-md-push-5 {
836 | left: 41.66666667%;
837 | }
838 | .col-md-push-4 {
839 | left: 33.33333333%;
840 | }
841 | .col-md-push-3 {
842 | left: 25%;
843 | }
844 | .col-md-push-2 {
845 | left: 16.66666667%;
846 | }
847 | .col-md-push-1 {
848 | left: 8.33333333%;
849 | }
850 | .col-md-push-0 {
851 | left: auto;
852 | }
853 | .col-md-offset-12 {
854 | margin-left: 100%;
855 | }
856 | .col-md-offset-11 {
857 | margin-left: 91.66666667%;
858 | }
859 | .col-md-offset-10 {
860 | margin-left: 83.33333333%;
861 | }
862 | .col-md-offset-9 {
863 | margin-left: 75%;
864 | }
865 | .col-md-offset-8 {
866 | margin-left: 66.66666667%;
867 | }
868 | .col-md-offset-7 {
869 | margin-left: 58.33333333%;
870 | }
871 | .col-md-offset-6 {
872 | margin-left: 50%;
873 | }
874 | .col-md-offset-5 {
875 | margin-left: 41.66666667%;
876 | }
877 | .col-md-offset-4 {
878 | margin-left: 33.33333333%;
879 | }
880 | .col-md-offset-3 {
881 | margin-left: 25%;
882 | }
883 | .col-md-offset-2 {
884 | margin-left: 16.66666667%;
885 | }
886 | .col-md-offset-1 {
887 | margin-left: 8.33333333%;
888 | }
889 | .col-md-offset-0 {
890 | margin-left: 0%;
891 | }
892 | }
893 | @media (min-width: 1200px) {
894 | .col-lg-1,
895 | .col-lg-2,
896 | .col-lg-3,
897 | .col-lg-4,
898 | .col-lg-5,
899 | .col-lg-6,
900 | .col-lg-7,
901 | .col-lg-8,
902 | .col-lg-9,
903 | .col-lg-10,
904 | .col-lg-11,
905 | .col-lg-12 {
906 | float: left;
907 | }
908 | .col-lg-12 {
909 | width: 100%;
910 | }
911 | .col-lg-11 {
912 | width: 91.66666667%;
913 | }
914 | .col-lg-10 {
915 | width: 83.33333333%;
916 | }
917 | .col-lg-9 {
918 | width: 75%;
919 | }
920 | .col-lg-8 {
921 | width: 66.66666667%;
922 | }
923 | .col-lg-7 {
924 | width: 58.33333333%;
925 | }
926 | .col-lg-6 {
927 | width: 50%;
928 | }
929 | .col-lg-5 {
930 | width: 41.66666667%;
931 | }
932 | .col-lg-4 {
933 | width: 33.33333333%;
934 | }
935 | .col-lg-3 {
936 | width: 25%;
937 | }
938 | .col-lg-2 {
939 | width: 16.66666667%;
940 | }
941 | .col-lg-1 {
942 | width: 8.33333333%;
943 | }
944 | .col-lg-pull-12 {
945 | right: 100%;
946 | }
947 | .col-lg-pull-11 {
948 | right: 91.66666667%;
949 | }
950 | .col-lg-pull-10 {
951 | right: 83.33333333%;
952 | }
953 | .col-lg-pull-9 {
954 | right: 75%;
955 | }
956 | .col-lg-pull-8 {
957 | right: 66.66666667%;
958 | }
959 | .col-lg-pull-7 {
960 | right: 58.33333333%;
961 | }
962 | .col-lg-pull-6 {
963 | right: 50%;
964 | }
965 | .col-lg-pull-5 {
966 | right: 41.66666667%;
967 | }
968 | .col-lg-pull-4 {
969 | right: 33.33333333%;
970 | }
971 | .col-lg-pull-3 {
972 | right: 25%;
973 | }
974 | .col-lg-pull-2 {
975 | right: 16.66666667%;
976 | }
977 | .col-lg-pull-1 {
978 | right: 8.33333333%;
979 | }
980 | .col-lg-pull-0 {
981 | right: auto;
982 | }
983 | .col-lg-push-12 {
984 | left: 100%;
985 | }
986 | .col-lg-push-11 {
987 | left: 91.66666667%;
988 | }
989 | .col-lg-push-10 {
990 | left: 83.33333333%;
991 | }
992 | .col-lg-push-9 {
993 | left: 75%;
994 | }
995 | .col-lg-push-8 {
996 | left: 66.66666667%;
997 | }
998 | .col-lg-push-7 {
999 | left: 58.33333333%;
1000 | }
1001 | .col-lg-push-6 {
1002 | left: 50%;
1003 | }
1004 | .col-lg-push-5 {
1005 | left: 41.66666667%;
1006 | }
1007 | .col-lg-push-4 {
1008 | left: 33.33333333%;
1009 | }
1010 | .col-lg-push-3 {
1011 | left: 25%;
1012 | }
1013 | .col-lg-push-2 {
1014 | left: 16.66666667%;
1015 | }
1016 | .col-lg-push-1 {
1017 | left: 8.33333333%;
1018 | }
1019 | .col-lg-push-0 {
1020 | left: auto;
1021 | }
1022 | .col-lg-offset-12 {
1023 | margin-left: 100%;
1024 | }
1025 | .col-lg-offset-11 {
1026 | margin-left: 91.66666667%;
1027 | }
1028 | .col-lg-offset-10 {
1029 | margin-left: 83.33333333%;
1030 | }
1031 | .col-lg-offset-9 {
1032 | margin-left: 75%;
1033 | }
1034 | .col-lg-offset-8 {
1035 | margin-left: 66.66666667%;
1036 | }
1037 | .col-lg-offset-7 {
1038 | margin-left: 58.33333333%;
1039 | }
1040 | .col-lg-offset-6 {
1041 | margin-left: 50%;
1042 | }
1043 | .col-lg-offset-5 {
1044 | margin-left: 41.66666667%;
1045 | }
1046 | .col-lg-offset-4 {
1047 | margin-left: 33.33333333%;
1048 | }
1049 | .col-lg-offset-3 {
1050 | margin-left: 25%;
1051 | }
1052 | .col-lg-offset-2 {
1053 | margin-left: 16.66666667%;
1054 | }
1055 | .col-lg-offset-1 {
1056 | margin-left: 8.33333333%;
1057 | }
1058 | .col-lg-offset-0 {
1059 | margin-left: 0%;
1060 | }
1061 | }
1062 | .nav {
1063 | padding-left: 0;
1064 | margin-bottom: 0;
1065 | list-style: none;
1066 | }
1067 | .nav > li {
1068 | position: relative;
1069 | display: block;
1070 | }
1071 | .nav > li > a {
1072 | position: relative;
1073 | display: block;
1074 | padding: 10px 15px;
1075 | }
1076 | .nav > li > a:hover,
1077 | .nav > li > a:focus {
1078 | text-decoration: none;
1079 | background-color: #eeeeee;
1080 | }
1081 | .nav > li.disabled > a {
1082 | color: #777777;
1083 | }
1084 | .nav > li.disabled > a:hover,
1085 | .nav > li.disabled > a:focus {
1086 | color: #777777;
1087 | text-decoration: none;
1088 | cursor: not-allowed;
1089 | background-color: transparent;
1090 | }
1091 | .nav .open > a,
1092 | .nav .open > a:hover,
1093 | .nav .open > a:focus {
1094 | background-color: #eeeeee;
1095 | border-color: #337ab7;
1096 | }
1097 | .nav .nav-divider {
1098 | height: 1px;
1099 | margin: 9px 0;
1100 | overflow: hidden;
1101 | background-color: #e5e5e5;
1102 | }
1103 | .nav > li > a > img {
1104 | max-width: none;
1105 | }
1106 | .nav-tabs {
1107 | border-bottom: 1px solid #dddddd;
1108 | }
1109 | .nav-tabs > li {
1110 | float: left;
1111 | margin-bottom: -1px;
1112 | }
1113 | .nav-tabs > li > a {
1114 | margin-right: 2px;
1115 | line-height: 1.42857143;
1116 | border: 1px solid transparent;
1117 | border-radius: 4px 4px 0 0;
1118 | }
1119 | .nav-tabs > li > a:hover {
1120 | border-color: #eeeeee #eeeeee #dddddd;
1121 | }
1122 | .nav-tabs > li.active > a,
1123 | .nav-tabs > li.active > a:hover,
1124 | .nav-tabs > li.active > a:focus {
1125 | color: #555555;
1126 | cursor: default;
1127 | background-color: #ffffff;
1128 | border: 1px solid #dddddd;
1129 | border-bottom-color: transparent;
1130 | }
1131 | .nav-tabs.nav-justified {
1132 | width: 100%;
1133 | border-bottom: 0;
1134 | }
1135 | .nav-tabs.nav-justified > li {
1136 | float: none;
1137 | }
1138 | .nav-tabs.nav-justified > li > a {
1139 | margin-bottom: 5px;
1140 | text-align: center;
1141 | }
1142 | .nav-tabs.nav-justified > .dropdown .dropdown-menu {
1143 | top: auto;
1144 | left: auto;
1145 | }
1146 | @media (min-width: 768px) {
1147 | .nav-tabs.nav-justified > li {
1148 | display: table-cell;
1149 | width: 1%;
1150 | }
1151 | .nav-tabs.nav-justified > li > a {
1152 | margin-bottom: 0;
1153 | }
1154 | }
1155 | .nav-tabs.nav-justified > li > a {
1156 | margin-right: 0;
1157 | border-radius: 4px;
1158 | }
1159 | .nav-tabs.nav-justified > .active > a,
1160 | .nav-tabs.nav-justified > .active > a:hover,
1161 | .nav-tabs.nav-justified > .active > a:focus {
1162 | border: 1px solid #dddddd;
1163 | }
1164 | @media (min-width: 768px) {
1165 | .nav-tabs.nav-justified > li > a {
1166 | border-bottom: 1px solid #dddddd;
1167 | border-radius: 4px 4px 0 0;
1168 | }
1169 | .nav-tabs.nav-justified > .active > a,
1170 | .nav-tabs.nav-justified > .active > a:hover,
1171 | .nav-tabs.nav-justified > .active > a:focus {
1172 | border-bottom-color: #ffffff;
1173 | }
1174 | }
1175 | .nav-pills > li {
1176 | float: left;
1177 | }
1178 | .nav-pills > li > a {
1179 | border-radius: 4px;
1180 | }
1181 | .nav-pills > li + li {
1182 | margin-left: 2px;
1183 | }
1184 | .nav-pills > li.active > a,
1185 | .nav-pills > li.active > a:hover,
1186 | .nav-pills > li.active > a:focus {
1187 | color: #ffffff;
1188 | background-color: #337ab7;
1189 | }
1190 | .nav-stacked > li {
1191 | float: none;
1192 | }
1193 | .nav-stacked > li + li {
1194 | margin-top: 2px;
1195 | margin-left: 0;
1196 | }
1197 | .nav-justified {
1198 | width: 100%;
1199 | }
1200 | .nav-justified > li {
1201 | float: none;
1202 | }
1203 | .nav-justified > li > a {
1204 | margin-bottom: 5px;
1205 | text-align: center;
1206 | }
1207 | .nav-justified > .dropdown .dropdown-menu {
1208 | top: auto;
1209 | left: auto;
1210 | }
1211 | @media (min-width: 768px) {
1212 | .nav-justified > li {
1213 | display: table-cell;
1214 | width: 1%;
1215 | }
1216 | .nav-justified > li > a {
1217 | margin-bottom: 0;
1218 | }
1219 | }
1220 | .nav-tabs-justified {
1221 | border-bottom: 0;
1222 | }
1223 | .nav-tabs-justified > li > a {
1224 | margin-right: 0;
1225 | border-radius: 4px;
1226 | }
1227 | .nav-tabs-justified > .active > a,
1228 | .nav-tabs-justified > .active > a:hover,
1229 | .nav-tabs-justified > .active > a:focus {
1230 | border: 1px solid #dddddd;
1231 | }
1232 | @media (min-width: 768px) {
1233 | .nav-tabs-justified > li > a {
1234 | border-bottom: 1px solid #dddddd;
1235 | border-radius: 4px 4px 0 0;
1236 | }
1237 | .nav-tabs-justified > .active > a,
1238 | .nav-tabs-justified > .active > a:hover,
1239 | .nav-tabs-justified > .active > a:focus {
1240 | border-bottom-color: #ffffff;
1241 | }
1242 | }
1243 | .tab-content > .tab-pane {
1244 | display: none;
1245 | }
1246 | .tab-content > .active {
1247 | display: block;
1248 | }
1249 | .nav-tabs .dropdown-menu {
1250 | margin-top: -1px;
1251 | border-top-left-radius: 0;
1252 | border-top-right-radius: 0;
1253 | }
1254 | .clearfix:before,
1255 | .clearfix:after,
1256 | .container:before,
1257 | .container:after,
1258 | .container-fluid:before,
1259 | .container-fluid:after,
1260 | .row:before,
1261 | .row:after,
1262 | .nav:before,
1263 | .nav:after {
1264 | display: table;
1265 | content: " ";
1266 | }
1267 | .clearfix:after,
1268 | .container:after,
1269 | .container-fluid:after,
1270 | .row:after,
1271 | .nav:after {
1272 | clear: both;
1273 | }
1274 | .center-block {
1275 | display: block;
1276 | margin-right: auto;
1277 | margin-left: auto;
1278 | }
1279 | .pull-right {
1280 | float: right !important;
1281 | }
1282 | .pull-left {
1283 | float: left !important;
1284 | }
1285 | .hide {
1286 | display: none !important;
1287 | }
1288 | .show {
1289 | display: block !important;
1290 | }
1291 | .invisible {
1292 | visibility: hidden;
1293 | }
1294 | .text-hide {
1295 | font: 0/0 a;
1296 | color: transparent;
1297 | text-shadow: none;
1298 | background-color: transparent;
1299 | border: 0;
1300 | }
1301 | .hidden {
1302 | display: none !important;
1303 | }
1304 | .affix {
1305 | position: fixed;
1306 | }
1307 | @-ms-viewport {
1308 | width: device-width;
1309 | }
1310 | .visible-xs,
1311 | .visible-sm,
1312 | .visible-md,
1313 | .visible-lg {
1314 | display: none !important;
1315 | }
1316 | .visible-xs-block,
1317 | .visible-xs-inline,
1318 | .visible-xs-inline-block,
1319 | .visible-sm-block,
1320 | .visible-sm-inline,
1321 | .visible-sm-inline-block,
1322 | .visible-md-block,
1323 | .visible-md-inline,
1324 | .visible-md-inline-block,
1325 | .visible-lg-block,
1326 | .visible-lg-inline,
1327 | .visible-lg-inline-block {
1328 | display: none !important;
1329 | }
1330 | @media (max-width: 767px) {
1331 | .visible-xs {
1332 | display: block !important;
1333 | }
1334 | table.visible-xs {
1335 | display: table !important;
1336 | }
1337 | tr.visible-xs {
1338 | display: table-row !important;
1339 | }
1340 | th.visible-xs,
1341 | td.visible-xs {
1342 | display: table-cell !important;
1343 | }
1344 | }
1345 | @media (max-width: 767px) {
1346 | .visible-xs-block {
1347 | display: block !important;
1348 | }
1349 | }
1350 | @media (max-width: 767px) {
1351 | .visible-xs-inline {
1352 | display: inline !important;
1353 | }
1354 | }
1355 | @media (max-width: 767px) {
1356 | .visible-xs-inline-block {
1357 | display: inline-block !important;
1358 | }
1359 | }
1360 | @media (min-width: 768px) and (max-width: 991px) {
1361 | .visible-sm {
1362 | display: block !important;
1363 | }
1364 | table.visible-sm {
1365 | display: table !important;
1366 | }
1367 | tr.visible-sm {
1368 | display: table-row !important;
1369 | }
1370 | th.visible-sm,
1371 | td.visible-sm {
1372 | display: table-cell !important;
1373 | }
1374 | }
1375 | @media (min-width: 768px) and (max-width: 991px) {
1376 | .visible-sm-block {
1377 | display: block !important;
1378 | }
1379 | }
1380 | @media (min-width: 768px) and (max-width: 991px) {
1381 | .visible-sm-inline {
1382 | display: inline !important;
1383 | }
1384 | }
1385 | @media (min-width: 768px) and (max-width: 991px) {
1386 | .visible-sm-inline-block {
1387 | display: inline-block !important;
1388 | }
1389 | }
1390 | @media (min-width: 992px) and (max-width: 1199px) {
1391 | .visible-md {
1392 | display: block !important;
1393 | }
1394 | table.visible-md {
1395 | display: table !important;
1396 | }
1397 | tr.visible-md {
1398 | display: table-row !important;
1399 | }
1400 | th.visible-md,
1401 | td.visible-md {
1402 | display: table-cell !important;
1403 | }
1404 | }
1405 | @media (min-width: 992px) and (max-width: 1199px) {
1406 | .visible-md-block {
1407 | display: block !important;
1408 | }
1409 | }
1410 | @media (min-width: 992px) and (max-width: 1199px) {
1411 | .visible-md-inline {
1412 | display: inline !important;
1413 | }
1414 | }
1415 | @media (min-width: 992px) and (max-width: 1199px) {
1416 | .visible-md-inline-block {
1417 | display: inline-block !important;
1418 | }
1419 | }
1420 | @media (min-width: 1200px) {
1421 | .visible-lg {
1422 | display: block !important;
1423 | }
1424 | table.visible-lg {
1425 | display: table !important;
1426 | }
1427 | tr.visible-lg {
1428 | display: table-row !important;
1429 | }
1430 | th.visible-lg,
1431 | td.visible-lg {
1432 | display: table-cell !important;
1433 | }
1434 | }
1435 | @media (min-width: 1200px) {
1436 | .visible-lg-block {
1437 | display: block !important;
1438 | }
1439 | }
1440 | @media (min-width: 1200px) {
1441 | .visible-lg-inline {
1442 | display: inline !important;
1443 | }
1444 | }
1445 | @media (min-width: 1200px) {
1446 | .visible-lg-inline-block {
1447 | display: inline-block !important;
1448 | }
1449 | }
1450 | @media (max-width: 767px) {
1451 | .hidden-xs {
1452 | display: none !important;
1453 | }
1454 | }
1455 | @media (min-width: 768px) and (max-width: 991px) {
1456 | .hidden-sm {
1457 | display: none !important;
1458 | }
1459 | }
1460 | @media (min-width: 992px) and (max-width: 1199px) {
1461 | .hidden-md {
1462 | display: none !important;
1463 | }
1464 | }
1465 | @media (min-width: 1200px) {
1466 | .hidden-lg {
1467 | display: none !important;
1468 | }
1469 | }
1470 | .visible-print {
1471 | display: none !important;
1472 | }
1473 | @media print {
1474 | .visible-print {
1475 | display: block !important;
1476 | }
1477 | table.visible-print {
1478 | display: table !important;
1479 | }
1480 | tr.visible-print {
1481 | display: table-row !important;
1482 | }
1483 | th.visible-print,
1484 | td.visible-print {
1485 | display: table-cell !important;
1486 | }
1487 | }
1488 | .visible-print-block {
1489 | display: none !important;
1490 | }
1491 | @media print {
1492 | .visible-print-block {
1493 | display: block !important;
1494 | }
1495 | }
1496 | .visible-print-inline {
1497 | display: none !important;
1498 | }
1499 | @media print {
1500 | .visible-print-inline {
1501 | display: inline !important;
1502 | }
1503 | }
1504 | .visible-print-inline-block {
1505 | display: none !important;
1506 | }
1507 | @media print {
1508 | .visible-print-inline-block {
1509 | display: inline-block !important;
1510 | }
1511 | }
1512 | @media print {
1513 | .hidden-print {
1514 | display: none !important;
1515 | }
1516 | }
1517 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU AFFERO GENERAL PUBLIC LICENSE
2 | Version 3, 19 November 2007
3 |
4 | Copyright (C) 2007 Free Software Foundation, Inc.
402 |
403 |
422 | )}
423 | {results && results.length !== 0 && !isLoading && (
424 |
404 |
406 | {!isAuthenticated && ( 407 | 408 | Please register a request to enable service in your area{" "} 409 | 410 | )} 411 |
412 | {!isAuthenticated && (
413 | No results found for {city}
405 |406 | {!isAuthenticated && ( 407 | 408 | Please register a request to enable service in your area{" "} 409 | 410 | )} 411 |
414 |
417 |
420 | )}
421 |
425 |
447 | )}
448 |
426 |
431 |
427 |
429 | Search Results for {city}
428 |{result_list}
430 |
432 |
436 | }
437 | myPlaces={[
438 | { id: "1", pos: { lat, lng } },
439 | {
440 | id: "2",
441 | pos: { lat: selectedLat, lng: selectedLng },
442 | },
443 | ]}
444 | />
445 |
446 |