try again 2

.dockerignore

+.git/
+dist/
+examples/
+node_modules/

.editorconfig

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.env

+NODE_ENV=development
+SERVER_PORT=4040
+JWT_SECRET=0a6b944d-d2fb-46fc-a85e-0295c986cd9f
+MONGO_HOST=mongodb://localhost/odmp
+MEAN_FRONTEND=angular

.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/dist-server
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
+
+# Env file
+#*.env

CNAME

+www.mean.io

Dockerfile

+FROM node:lts-buster
+
+WORKDIR /usr/src/app
+ADD . /usr/src/app
+
+RUN yarn
+RUN yarn build
+
+EXPOSE 4040
+
+CMD ["yarn", "serve"]

README-original.md

+## Welcome to the mean stack
+
+The mean stack is intended to provide a simple and fun starting point for cloud native fullstack javascript applications.   
+MEAN is a set of Open Source components that together, provide an end-to-end framework for building dynamic web applications; starting from the top (code running in the browser) to the bottom (database). The stack is made up of:
+
+- **M**ongoDB : Document database – used by your back-end application to store its data as JSON (JavaScript Object Notation) documents
+- **E**xpress (sometimes referred to as Express.js): Back-end web application framework running on top of Node.js
+- **A**ngular (formerly Angular.js): Front-end web app framework; runs your JavaScript code in the user's browser, allowing your application UI to be dynamic
+- **N**ode.js : JavaScript runtime environment – lets you implement your application back-end in JavaScript
+
+### Pre-requisites
+* git - [Installation guide](https://www.linode.com/docs/development/version-control/how-to-install-git-on-linux-mac-and-windows/) .  
+* node.js - [Download page](https://nodejs.org/en/download/) .  
+* npm - comes with node or download yarn - [Download page](https://yarnpkg.com/lang/en/docs/install) .  
+* mongodb - [Download page](https://www.mongodb.com/download-center/community) .  
+
+### Installation 
+``` 
+git clone https://github.com/linnovate/mean
+cd mean
+cp .env.example .env
+yarn
+yarn start (for development)
+```
+### Docker based 
+``` 
+git clone https://github.com/linnovate/mean
+cd mean
+cp .env.example .env
+docker-compose up -d
+```
+### Credits 
+- The MEAN name was coined by Valeri Karpov.
+- Initial concept and development was done by Amos Haviv and sponsered by Linnovate.
+- Inspired by the great work of Madhusudhan Srinivasa.

README.md

-# Selected Topic in Computer Science I | Group 3
+# การเพิ่ม model ชื่อ Student ใน project
 
-ชื่อเว็บ (ภาษาไทย/English) : รีวิวภาพยนตร์จ้า ( Film Review )
+## 1. เพิ่มไฟล์ `server/models/student.model.js` 
 
-## Pre-requisites
-git - [Installation guide](https://git-scm.com/) .
-node.js - [Download page](https://nodejs.org/en/download/) .
-npm - comes with node or download yarn - [Download page](https://classic.yarnpkg.com/en/docs/install#windows-stable) .
+```js
+const mongoose = require('mongoose');
 
-## Installation
+/**
+ * อ่านเพิ่มเติม https://mongoosejs.com/docs/guide.html
+ */
+const StudentSchema = new mongoose.Schema(
+  {
+    sid:       { type: String, required: true },
+    first:     { type: String, required: true },
+    last:      { type: String, required: true },
+    createdAt: { type: Date, default: Date.now },
+  },
+  {
+    versionKey: false
+  }
+);
 
-```bash
-git clone http://projectcs.sci.ubu.ac.th/Nattsumi006/topic1group3.git
-cd mean
-cp .env.example .env
-yarn
-docker-compose up -d
+
+module.exports = mongoose.model('Student', StudentSchema);
+```
+
+## 2. เพิ่มไฟล์ `server/controllers/student.controller.js`
+
+```js
+const Joi = require('joi');
+const Student = require('../models/student.model');
+
+const studentSchema = Joi.object({
+  sid: Joi.number().integer().required(),
+  first: Joi.string().required(),
+  last: Joi.string().required()
+})
+
+
+module.exports = {
+  insert,
+  get,
+  getAll,
+  search,
+}
+
+async function insert(student) {
+  student = await Joi.validate(student, studentSchema, { abortEarly: false });
+  return await new Student(student).save();
+}
+
+/**
+ * อ่านเพิ่มเติม https://mongoosejs.com/docs/api.html
+ */
+async function get(sid) {
+  return await Student.find({sid: sid});
+}
+
+async function getAll() {
+  return await Student.find();
+}
+
+async function search(key, value) {
+  let query = {};
+  query[key] = value;
+  return await Student.find(query);
+}
+
+```
+
+## 3. เพิ่มไฟล์ `server/routes/student.route.js`
+
+```js
+const express = require('express');
+const asyncHandler = require('express-async-handler');
+const studentCtrl = require('../controllers/student.controller');
+
+const router = express.Router();
+module.exports = router;
+
+//router.use(passport.authenticate('jwt', { session: false }))
+
+router.route('/').post(asyncHandler(insert));
+router.route('/get/:sid(\d+)').get(asyncHandler(get));
+router.route('/all').get(asyncHandler(getAll));
+router.route('/search').get(asyncHandler(search));
+
+
+async function insert(req, res) {
+  let student = await studentCtrl.insert(req.body);
+  res.json(student);
+}
+
+async function get(req, res) {
+  let all_students = await studentCtrl.get(req.params['sid']);
+  res.json(all_students);
+}
+
+async function getAll(req, res) {
+  let all_students = await studentCtrl.getAll();
+  res.json(all_students);
+}
+
+async function search(req, res) {
+  let result = await studentCtrl.search(req.params['key'], req.params['value']);
+  res.json(result);
+}
+
+```
+
+## 4. เพิ่มเส้นทางการเรียกในไฟล์ `server/routes/index.route.js`
+
+```js
+const express = require('express');
+const userRoutes = require('./user.route');
+const studentRoutes = require('./student.route');
+const authRoutes = require('./auth.route');
+
+const router = express.Router(); // eslint-disable-line new-cap
+
+/** GET /health-check - Check service health */
+router.get('/health-check', (req, res) =>
+  res.send('OK')
+);
+
+router.use('/auth', authRoutes);
+router.use('/user', userRoutes);
+router.use('/student', studentRoutes);
+
+module.exports = router;
+```
+
+## 5. ตัวอย่างสคริปเพื่อกำหนดข้อมูลเบื้องต้น `scripts/init-students.js`
+
+```js
+const mongoose = require('mongoose');
+const util = require('util');
+const debug = require('debug')('express-mongoose-es6-rest-api:index');
+
+const config = require('../server/config/config');
+
+const Student = require('../server/models/student.model');
+
+// connect to mongo db
+const mongoUri = config.mongo.host;
+mongoose.connect(mongoUri, { keepAlive: 1 });
+mongoose.connection.on('error', () => {
+  throw new Error(`unable to connect to database: ${mongoUri}`);
+});
+
+
+const students = [
+  { sid: 60112233440, first: 'ชูใจ', last: 'เลิศล้ำ' },
+  { sid: 60112233441, first: 'มานี', last: 'รักเผ่าไทย' },
+  { sid: 60112233442, first: 'ปิติ', last: 'พิทักษ์ถิ่น' },
+  { sid: 60112233443, first: 'มานะ', last: 'รักเผ่าไทย' },
+  { sid: 60112233444, first: 'วีระ', last: 'ประสงค์สุข' }
+];
+
+Student.insertMany(students, (error, docs) => {
+  if (error) {
+    console.error(error);
+  } else {
+    console.log(docs);
+  }
+  mongoose.connection.close();
+});
+```
+
+## 6. เรียกใช้ `scripts/init-students.js` 
+
+```sh
+node scripts/init-students.js
 ```
 
-## Details
-เว็บไซต์ รีวิวภาพยนตร์ เป็นเว็บไซต์ที่มีการแนะนำเนื้อหาของสื่อภาพยนตร์ซึ่งมุ่งเป้าหมายที่ผู้บริโภค เขียนเชิงพรรณนา,ตัดสิน,วิเคราะห์ภาพยนตร์
-ที่ผู้บริโภคมีความสนใจและเพื่อแลกเปลี่ยนความคิดเห็นเกี่ยวกับภาพยนตร์
+## 7. เรียกดูข้อมูลได้จาก `http://localhost:4000/api/student/all`
\ No newline at end of file

_config.yml

+theme: jekyll-theme-minimal
+logo: https://www.linnovate.net/sites/all/themes/linnovate/images/mean-picture.png

_layouts/default.html

+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+{% seo %}
+    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
+    <!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+    <div class="wrapper">
+      <header>
+        {% if site.logo %}
+          <img class="logo"  src="{{site.logo | relative_url}}" alt="Logo" />
+        {% endif %}
+        <p>{{ site.description | default: site.github.project_tagline }}</p>
+
+        {% if site.github.is_project_page %}
+        <p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ site.github.repository_nwo }}</small></a></p>
+        {% endif %}
+
+        <!-- Place this tag where you want the button to render. -->
+        <a class="github-button" href="https://github.com/linnovate/mean" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a>
+
+        {% if site.github.is_user_page %}
+        <p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>
+        {% endif %}
+
+        {% if site.show_downloads %}
+        <ul class="downloads">
+          <li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
+          <li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
+          <li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
+        </ul>
+        {% endif %}
+        <img class="ninja" src="/assets/img/ninja.jpg"/>
+
+      </header>
+      <section>
+
+      {{ content }}
+      {% if site.github.is_project_page %}
+      <p>This project is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+      {% endif %}
+      </section>
+    </div>
+    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
+   <!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-36499287-4"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+ // gtag('config', 'UA-XXXXXX-XX'); // change this to your own UA config
+</script>
+
+    <!-- Place this tag in your head or just before your close body tag. -->
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+  </body>
+</html>

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "mean": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "./tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "mean:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "mean:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "mean:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "./tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "./tsconfig.app.json",
+              "./tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "deploy": {
+          "builder": "angular-cli-ghpages:deploy",
+          "options": {}
+        }
+      }
+    }
+  },
+  "defaultProject": "mean",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  },
+  "cli": {
+    "analytics": "c4b1fc92-ebd6-4fa9-a8a1-067afbef23d9"
+  }
+}
\ No newline at end of file

assets/css/style.scss

+---
+---
+
+@import "{{ site.theme }}";
+h1 {
+  a {
+    color:#00758f;
+    text-size:40px;
+  }
+}
+header {
+ img.logo {
+    margin-left:30px;
+    display:block;
+    height: auto; 
+    width: auto; 
+    max-width: 150px; 
+    max-height: 200px;
+    margin-bottom: 17%;
+ }
+ img.ninja {
+  margin-top: 20px;
+  height: auto; 
+  width: auto; 
+  max-width: 350px; 
+  max-height: 200px;
+  margin-bottom: 50px;
+ }
+
+} 

browserslist

+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11

docker-compose.yml

+version: '3'
+
+services:
+
+  app:
+    build: ./
+    image: mean
+    container_name: mean
+    ports:
+      - 80:4040
+    expose:
+      - 4040
+    environment:
+      NODE_ENV: production
+      SERVER_PORT: 4040
+      JWT_SECRET: 0a6b944d-d2fb-46fc-a85e-0295c986cd9f
+      MONGO_HOST: mongodb://mongo/odmp
+    restart: always
+    depends_on:
+      - mongo
+
+  meanexpress:
+    container_name: meanexpress
+    image: mongo-express
+    ports:
+      - 8081:8081
+    environment:
+      ME_CONFIG_MONGODB_AUTH_DATABASE: odmp
+      #ME_CONFIG_MONGODB_AUTH_USERNAME: admin
+      #ME_CONFIG_MONGODB_AUTH_PASSWORD: pass
+    restart: always
+    depends_on:
+      - mongo
+
+  mongo:
+    container_name: meanmongo
+    image: mongo:3.6
+    ports:
+      - 27017:27017
+    expose:
+      - 27017

karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

package.json

+{
+  "name": "mean",
+  "version": "2.0.2",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "serve": "node server",
+    "import student": "node scripts/init-students.js",
+    "start": "concurrently -c \"yellow.bold,green.bold\" -n \"SERVER,BUILD\" \"nodemon server\" \"ng build --watch\"",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^9.1.4",
+    "@angular/cdk": "^9.2.1",
+    "@angular/common": "^9.1.4",
+    "@angular/compiler": "^9.1.4",
+    "@angular/core": "^9.1.4",
+    "@angular/forms": "^9.1.4",
+    "@angular/material": "^9.2.1",
+    "@angular/platform-browser": "^9.1.4",
+    "@angular/platform-browser-dynamic": "^9.1.4",
+    "@angular/router": "^9.1.4",
+    "bcrypt": "^3.0.2",
+    "body-parser": "^1.18.2",
+    "compression": "^1.7.2",
+    "cookie-parser": "^1.4.3",
+    "cors": "^2.8.4",
+    "dotenv": "^6.0.0",
+    "events": "^3.0.0",
+    "express": "^4.16.3",
+    "express-async-handler": "^1.1.3",
+    "express-jwt": "^5.3.1",
+    "express-validation": "^1.0.2",
+    "formidable": "^1.2.1",
+    "helmet": "^3.21.1",
+    "http-errors": "^1.6.3",
+    "joi": "^13.3.0",
+    "jsonwebtoken": "^8.2.1",
+    "method-override": "^2.3.10",
+    "mongoose": "^5.7.5",
+    "morgan": "^1.9.1",
+    "nodemon": "^1.17.5",
+    "passport": "^0.4.0",
+    "passport-jwt": "^4.0.0",
+    "passport-local": "^1.0.0",
+    "rxjs": "^6.5.5",
+    "swagger-ui-express": "^3.0.9",
+    "zone.js": "~0.10.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.901.4",
+    "@angular/cli": "^9.1.4",
+    "@angular/compiler-cli": "^9.1.4",
+    "@angular/language-service": "^9.1.4",
+    "@types/jasmine": "~2.8.3",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~12.12.14",
+    "angular-cli-ghpages": "^0.6.2",
+    "codelyzer": "^5.2.0",
+    "concurrently": "^3.5.1",
+    "jasmine-core": "~3.1.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "^3.1.3",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "2.0.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "1.1.0",
+    "ts-node": "~6.1.0",
+    "tslint": "^5.20.1",
+    "typescript": "3.8.3"
+  }
+}

protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

scripts/init-students.js

+const mongoose = require('mongoose');
+const util = require('util');
+const debug = require('debug')('express-mongoose-es6-rest-api:index');
+
+const config = require('../server/config/config');
+
+const Student = require('../server/models/student.model');
+
+// connect to mongo db
+const mongoUri = config.mongo.host;
+mongoose.connect(mongoUri, { keepAlive: 1 });
+mongoose.connection.on('error', () => {
+  throw new Error(`unable to connect to database: ${mongoUri}`);
+});
+
+
+const students = [
+  { sid: 60112233440, first: 'ชูใจ', last: 'เลิศล้ำ' },
+  { sid: 60112233441, first: 'มานี', last: 'รักเผ่าไทย' },
+  { sid: 60112233442, first: 'ปิติ', last: 'พิทักษ์ถิ่น' },
+  { sid: 60112233443, first: 'มานะ', last: 'รักเผ่าไทย' },
+  { sid: 60112233444, first: 'วีระ', last: 'ประสงค์สุข' }
+];
+
+Student.insertMany(students, (error, docs) => {
+  if (error) {
+    console.error(error);
+  } else {
+    console.log(docs);
+  }
+  mongoose.connection.close();
+});

server/config/config.js

+const Joi = require('joi');
+
+// require and configure dotenv, will load vars in .env in PROCESS.ENV
+require('dotenv').config();
+
+// define validation for all the env vars
+const envVarsSchema = Joi.object({
+  NODE_ENV: Joi.string()
+    .allow(['development', 'production', 'test', 'provision'])
+    .default('development'),
+  SERVER_PORT: Joi.number()
+    .default(4040),
+  MONGOOSE_DEBUG: Joi.boolean()
+    .when('NODE_ENV', {
+      is: Joi.string().equal('development'),
+      then: Joi.boolean().default(true),
+      otherwise: Joi.boolean().default(false)
+    }),
+  JWT_SECRET: Joi.string().required()
+    .description('JWT Secret required to sign'),
+  MONGO_HOST: Joi.string().required()
+    .description('Mongo DB host url'),
+  MONGO_PORT: Joi.number()
+    .default(27017)
+}).unknown()
+  .required();
+
+const { error, value: envVars } = Joi.validate(process.env, envVarsSchema);
+if (error) {
+  throw new Error(`Config validation error: ${error.message}`);
+}
+
+const config = {
+  env: envVars.NODE_ENV,
+  port: envVars.SERVER_PORT,
+  mongooseDebug: envVars.MONGOOSE_DEBUG,
+  jwtSecret: envVars.JWT_SECRET,
+  frontend: envVars.MEAN_FRONTEND || 'angular',
+  mongo: {
+    host: envVars.MONGO_HOST,
+    port: envVars.MONGO_PORT
+  }
+};
+
+module.exports = config;

server/config/express.js

+const path = require('path');
+const express = require('express');
+const httpError = require('http-errors');
+const logger = require('morgan');
+const bodyParser = require('body-parser');
+const cookieParser = require('cookie-parser');
+const compress = require('compression');
+const methodOverride = require('method-override');
+const cors = require('cors');
+const helmet = require('helmet');
+const swaggerUi = require('swagger-ui-express');
+const swaggerDocument = require('./swagger.json');
+const routes = require('../routes/index.route');
+const config = require('./config');
+const passport = require('./passport')
+
+const app = express();
+
+if (config.env === 'development') {
+  app.use(logger('dev'));
+}
+
+// Choose what fronten framework to serve the dist from
+var distDir = '../../dist/';
+if (config.frontend == 'react'){
+  distDir ='../../node_modules/material-dashboard-react/dist'
+ }else{
+  distDir ='../../dist/' ;
+ }
+
+// 
+app.use(express.static(path.join(__dirname, distDir)))
+app.use(/^((?!(api)).)*/, (req, res) => {
+  res.sendFile(path.join(__dirname, distDir + '/index.html'));
+});
+
+console.log(distDir);
+ //React server
+app.use(express.static(path.join(__dirname, '../../node_modules/material-dashboard-react/dist')))
+app.use(/^((?!(api)).)*/, (req, res) => {
+res.sendFile(path.join(__dirname, '../../dist/index.html'));
+}); 
+
+
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: true }));
+
+app.use(cookieParser());
+app.use(compress());
+app.use(methodOverride());
+
+// secure apps by setting various HTTP headers
+app.use(helmet());
+
+// enable CORS - Cross Origin Resource Sharing
+app.use(cors());
+
+app.use(passport.initialize());
+
+app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
+
+// API router
+app.use('/api/', routes);
+
+// catch 404 and forward to error handler
+app.use((req, res, next) => {
+  const err = new httpError(404)
+  return next(err);
+});
+
+// error handler, send stacktrace only during development
+app.use((err, req, res, next) => {
+
+  // customize Joi validation errors
+  if (err.isJoi) {
+    err.message = err.details.map(e => e.message).join("; ");
+    err.status = 400;
+  }
+
+  res.status(err.status || 500).json({
+    message: err.message
+  });
+  next(err);
+});
+
+module.exports = app;

server/config/mongoose.js

+const mongoose = require('mongoose');
+const util = require('util');
+const debug = require('debug')('express-mongoose-es6-rest-api:index');
+
+const config = require('./config');
+
+// connect to mongo db
+const mongoUri = config.mongo.host;
+mongoose.connect(mongoUri, { keepAlive: 1 });
+mongoose.connection.on('error', () => {
+  throw new Error(`unable to connect to database: ${mongoUri}`);
+});
+
+// print mongoose logs in dev env
+if (config.MONGOOSE_DEBUG) {
+  mongoose.set('debug', (collectionName, method, query, doc) => {
+    debug(`${collectionName}.${method}`, util.inspect(query, false, 20), doc);
+  });
+}
+

server/config/passport.js

+const passport = require('passport');
+const LocalStrategy = require('passport-local');
+const JwtStrategy = require('passport-jwt').Strategy;
+const ExtractJwt = require('passport-jwt').ExtractJwt;
+const bcrypt = require('bcrypt');
+
+const User = require('../models/user.model');
+const config = require('./config');
+
+const localLogin = new LocalStrategy({
+  usernameField: 'email'
+}, async (email, password, done) => {
+  let user = await User.findOne({ email });
+  if (!user || !bcrypt.compareSync(password, user.hashedPassword)) {
+    return done(null, false, { error: 'Your login details could not be verified. Please try again.' });
+  }
+  user = user.toObject();
+  delete user.hashedPassword;
+  done(null, user);
+});
+
+const jwtLogin = new JwtStrategy({
+  jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+  secretOrKey: config.jwtSecret
+}, async (payload, done) => {
+  let user = await User.findById(payload._id);
+  if (!user) {
+    return done(null, false);
+  }
+  user = user.toObject();
+  delete user.hashedPassword;
+  done(null, user);
+});
+
+passport.use(jwtLogin);
+passport.use(localLogin);
+
+module.exports = passport;

server/config/swagger.json

+{
+    "swagger": "2.0",
+    "info": {
+      "version": "1.0.0",
+      "title": "Mean Application API",
+      "description": "Mean Application API",
+      "license": {
+        "name": "MIT",
+        "url": "https://opensource.org/licenses/MIT"
+      }
+    },
+    "host": "localhost:4040",
+    "basePath": "/api/",
+    "tags": [
+      {
+        "name": "Users",
+        "description": "API for users in the system"
+      },
+      {
+        "name": "Auth",
+        "description": "API for auth in the system"
+      }
+    ],
+    "schemes": [
+      "http"
+    ],
+    "consumes": [
+      "application/json"
+    ],
+    "produces": [
+      "application/json"
+    ],
+    "securityDefinitions": {
+      "AuthHeader": {
+        "type": "apiKey",
+        "in": "header",
+        "name": "Authorization"
+      }
+    },
+    "paths": {
+      "/auth/login": {
+        "post": {
+          "tags": ["Auth"],
+          "description": "Login to the system",
+        "parameters": [{
+          "name": "auth",
+          "in": "body",
+          "description": "User auth details",
+          "schema": {
+            "type": "object",
+            "required": ["email", "password"],
+            "properties": {
+              "email": {
+                "type": "string"
+              },
+              "password": {
+                "type": "string"
+              }
+            }
+          }
+        }],
+        "produces": [
+          "application/json"
+        ],
+        "responses": {
+          "200": {
+            "description": "User is loggedin",
+            "schema": {
+              "$ref": "#/definitions/User"
+            }
+          }
+        }
+      }
+      }
+    },
+    "definitions": {
+      "User": {
+        "required": [
+          "email",
+          "fullname"
+        ],
+        "properties": {
+          "_id": {
+            "type": "string",
+            "uniqueItems": true
+          },
+          "email": {
+            "type": "string",
+            "uniqueItems": true
+          },
+          "fullname": {
+            "type": "string"
+          },
+          "createdAt": {
+            "type": "string"
+          },
+          "roles": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "Users": {
+        "type": "array",
+        "$ref": "#/definitions/User"
+      },
+      "Auth": {
+        "type": "object",
+        "properties": [{
+          "token": {
+            "type": "string"
+          },
+          "user": {
+            "$ref": "#/definitions/User"
+          }
+        }]
+      }
+  }
+}
\ No newline at end of file

server/controllers/auth.controller.js

+const jwt = require('jsonwebtoken');
+const config = require('../config/config');
+
+
+module.exports = {
+  generateToken
+}
+
+
+function generateToken(user) {
+  const payload = JSON.stringify(user);
+  return jwt.sign(payload, config.jwtSecret);
+}

server/controllers/review.controller.js

+const Joi = require("joi");
+const Review = require("../models/review.model");
+
+const reviewSchema = Joi.object({
+  // sid: Joi.number().integer().required(),
+  user_id: Joi.string().required(),
+  user_name: Joi.string().required(),
+  catagory: Joi.string().required(),
+  namemovie: Joi.string().required(),
+  title: Joi.string().required(),
+  description: Joi.string().required(),
+});
+
+module.exports = {
+  insert,
+  get,
+  getAll,
+  search,
+  deleteData,
+  updateData,
+};
+
+async function insert(review) {
+  review = await Joi.validate(review, reviewSchema, { abortEarly: false });
+  return await new Review(review).save();
+}
+/**
+ * อ่านเพิ่มเติม https://mongoosejs.com/docs/api.html
+ */
+async function get(_id) {
+  return await Review.find({ _id: _id });
+}
+
+async function getAll() {
+  return await Review.find();
+}
+
+async function search(key, value) {
+  let query = {};
+  query[key] = value;
+  return await Review.find(query);
+}
+
+async function deleteData(_id) {
+  return await Review.findByIdAndDelete(_id);
+}
+
+async function updateData(_id,data) {
+  return Review.findByIdAndUpdate(_id, data);
+}

server/controllers/user.controller.js

+const bcrypt = require('bcrypt');
+const Joi = require('joi');
+const User = require('../models/user.model');
+
+const userSchema = Joi.object({
+  fullname: Joi.string().required(),
+  email: Joi.string().email(),
+  mobileNumber: Joi.string().regex(/^[1-9][0-9]{9}$/),
+  password: Joi.string().required(),
+  repeatPassword: Joi.string().required().valid(Joi.ref('password'))
+})
+
+
+module.exports = {
+  insert
+}
+
+async function insert(user) {
+  user = await Joi.validate(user, userSchema, { abortEarly: false });
+  user.hashedPassword = bcrypt.hashSync(user.password, 10);
+  delete user.password;
+  return await new User(user).save();
+}

server/index.js

+// config should be imported before importing any other file
+const config = require('./config/config');
+const app = require('./config/express');
+require('./config/mongoose');
+
+// module.parent check is required to support mocha watch
+// src: https://github.com/mochajs/mocha/issues/1912
+if (!module.parent) {
+  app.listen(config.port, () => {
+    console.info(`server started on port ${config.port} (${config.env})`);
+  });
+}
+
+module.exports = app;

server/middleware/require-admin.js

+const httpError = require('http-errors');
+
+const requireAdmin = function (req, res, next) {
+  if (req.user && req.user.roles.indexOf('admin') > -1) 
+    return next();
+  const err = new httpError(401);
+  return next(err);
+}
+
+module.exports = requireAdmin;

server/models/review.model.js

+const mongoose = require("mongoose");
+
+/**
+ * อ่านเพิ่มเติม https://mongoosejs.com/docs/guide.html
+ */
+const ReviewSchema = new mongoose.Schema(
+  {
+    user_id: { type: String, required: true },
+    user_name: { type: String, required: true },
+    catagory: { type: String, required: true },
+    namemovie: { type: String, required: true },
+    title: { type: String, required: true },
+    description: { type: String, required: true },
+    createdAt: { type: Date, default: Date.now },
+  },
+  {
+    versionKey: false,
+  }
+);
+
+module.exports = mongoose.model("Review", ReviewSchema);

server/models/user.model.js

+const mongoose = require('mongoose');
+
+const UserSchema = new mongoose.Schema({
+  fullname: {
+    type: String,
+    required: true
+  },
+  email: {
+    type: String,
+    required: true,
+    unique: true,
+    // Regexp to validate emails with more strict rules as added in tests/users.js which also conforms mostly with RFC2822 guide lines
+    match: [/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, 'Please enter a valid email'],
+  },
+  hashedPassword: {
+    type: String,
+    required: true
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now
+  },
+  roles: [{
+    type: String,
+  }]
+}, {
+  versionKey: false
+});
+
+
+module.exports = mongoose.model('User', UserSchema);

server/routes/auth.route.js

+const express = require('express');
+const asyncHandler = require('express-async-handler')
+const passport = require('passport');
+const userCtrl = require('../controllers/user.controller');
+const authCtrl = require('../controllers/auth.controller');
+const config = require('../config/config');
+
+const router = express.Router();
+module.exports = router;
+
+router.post('/register', asyncHandler(register), login);
+router.post('/login', passport.authenticate('local', { session: false }), login);
+router.get('/me', passport.authenticate('jwt', { session: false }), login);
+
+
+async function register(req, res, next) {
+  let user = await userCtrl.insert(req.body);
+  user = user.toObject();
+  delete user.hashedPassword;
+  req.user = user;
+  next()
+}
+
+function login(req, res) {
+  let user = req.user;
+  let token = authCtrl.generateToken(user);
+  res.json({ user, token });
+}

server/routes/index.route.js

+const express = require('express');
+const userRoutes = require('./user.route');
+const reviewRoutes = require('./review.route');
+const authRoutes = require('./auth.route');
+
+const router = express.Router(); // eslint-disable-line new-cap
+
+/** GET /health-check - Check service health */
+router.get('/health-check', (req, res) =>
+  res.send('OK')
+);
+
+router.use('/auth', authRoutes);
+router.use('/user', userRoutes);
+router.use('/review', reviewRoutes);
+
+module.exports = router;

server/routes/review.route.js

+const express = require('express');
+const asyncHandler = require('express-async-handler');
+const reviewCtrl = require('../controllers/review.controller');
+
+const router = express.Router();
+module.exports = router;
+
+//router.use(passport.authenticate('jwt', { session: false }))
+
+router.route('/').post(asyncHandler(insert));
+router.route('/get/:_id').get(asyncHandler(get));
+router.route('/all').get(asyncHandler(getAll));
+router.route('/search').get(asyncHandler(search));
+router.route('/delete/:_id').delete(asyncHandler(deleteData));
+router.route('/update/:_id').put(asyncHandler(updateData));
+
+
+async function insert(req, res) {
+  let review = await reviewCtrl.insert(req.body);
+  res.json(review);
+}
+
+async function get(req, res) {
+  let all_reviews = await reviewCtrl.get(req.params['_id']);
+  res.json(all_reviews);
+}
+
+async function getAll(req, res) {
+  let all_reviews = await reviewCtrl.getAll();
+  res.json(all_reviews);
+}
+
+async function search(req, res) {
+  let result = await reviewCtrl.search(req.params['key'], req.params['value']);
+  res.json(result);
+}
+
+async function deleteData(req, res) {
+  let all_reviews = await reviewCtrl.deleteData(req.params['_id']);
+  res.json(all_reviews);
+}
+
+async function updateData(req, res) {
+  let all_reviews = await reviewCtrl.updateData(req.params['_id'],req.body);
+  res.json(all_reviews);
+}
+

server/routes/user.route.js

+const express = require('express');
+const passport = require('passport');
+const asyncHandler = require('express-async-handler');
+const userCtrl = require('../controllers/user.controller');
+
+const router = express.Router();
+module.exports = router;
+
+router.use(passport.authenticate('jwt', { session: false }))
+
+router.route('/')
+  .post(asyncHandler(insert));
+
+
+async function insert(req, res) {
+  let user = await userCtrl.insert(req.body);
+  res.json(user);
+}

src/_settings.scss

+/*-----------------------------------------------
+                   Variables
+-----------------------------------------------*/
+$linesColor: #dbdbdb;
+$categoryTitleColor: #686868;
+$categoryEntityColor: #3F3F3F;
\ No newline at end of file

src/app/admin/admin-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AdminComponent } from './admin.component';
+import { OnlyAdminUsersGuard } from './admin-user-guard';
+
+const routes: Routes = [{
+  path: 'admin',
+  canActivate: [OnlyAdminUsersGuard],
+  children: [{
+    path: '',
+    component: AdminComponent,
+  }]
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+
+export class AdminRoutingModule {}

src/app/admin/admin-user-guard.ts

+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { AuthService } from '@app/shared/services';
+
+@Injectable()
+export class OnlyAdminUsersGuard implements CanActivate {
+  constructor(private authService: AuthService) {}
+
+  canActivate(): Observable<boolean> {
+    return this.authService.getUser().pipe(map(user => !!user?.isAdmin));
+  }
+}

src/app/admin/admin.component.html

+<h4>HELLO FROM ADMIN PAGE</h4>
\ No newline at end of file

src/app/admin/admin.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin.component.html',
+})
+export class AdminComponent implements OnInit {
+
+  constructor() {}
+
+  public ngOnInit() {
+  }
+}
+
+

src/app/admin/admin.module.ts

+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import { AdminRoutingModule } from './admin-routing.module';
+import {AdminComponent} from './admin.component';
+import {OnlyAdminUsersGuard} from './admin-user-guard';
+
+@NgModule({
+  declarations: [
+    AdminComponent
+  ],
+  imports: [
+    CommonModule,
+    AdminRoutingModule,
+  ],
+  providers: [
+    OnlyAdminUsersGuard
+  ]})
+export class AdminModule {}

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AuthGuard } from './shared/guards';
+import { HomeComponent } from './home/home.component';
+import { HeroComponent } from './hero/hero.component';
+import { CreateComponent } from './create/create.component';
+import { ViewdataComponent } from './viewdata/viewdata.component';
+import { EditComponent } from './edit/edit.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'create',
+    component: CreateComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'viewdata/:dataId',
+    component: ViewdataComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'edit/:dataId',
+    component: EditComponent,
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'hero',
+    component: HeroComponent,
+  },
+  {
+    path: 'auth',
+    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
+  },
+  {
+    path: 'admin',
+    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

src/app/app.component.html

+<app-header [user]="user$ | async"></app-header>
+<div class="wrapper-app">
+  <router-outlet></router-outlet>
+</div>
+<footer></footer>

src/app/app.component.scss

+.wrapper-app {
+}
\ No newline at end of file

src/app/app.component.ts

+import { Component } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { merge, Observable } from 'rxjs';
+
+import { User } from './shared/interfaces';
+import { AuthService } from './shared/services';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+  user$: Observable<User | null> = merge(
+    // Init on startup
+    this.authService.me(),
+    // Update after login/register/logout
+    this.authService.getUser()
+  );
+
+  constructor(
+    private domSanitizer: DomSanitizer,
+    private matIconRegistry: MatIconRegistry,
+    private authService: AuthService
+  ) {
+    this.registerSvgIcons();
+  }
+
+  registerSvgIcons() {
+    [
+      'close',
+      'add',
+      'add-blue',
+      'airplane-front-view',
+      'air-station',
+      'balloon',
+      'boat',
+      'cargo-ship',
+      'car',
+      'catamaran',
+      'clone',
+      'convertible',
+      'delete',
+      'drone',
+      'fighter-plane',
+      'fire-truck',
+      'horseback-riding',
+      'motorcycle',
+      'railcar',
+      'railroad-train',
+      'rocket-boot',
+      'sailing-boat',
+      'segway',
+      'shuttle',
+      'space-shuttle',
+      'steam-engine',
+      'suv',
+      'tour-bus',
+      'tow-truck',
+      'transportation',
+      'trolleybus',
+      'water-transportation',
+    ].forEach(icon => {
+      this.matIconRegistry.addSvgIcon(
+        icon,
+        this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/icons/${icon}.svg`)
+      );
+    });
+  }
+}

src/app/app.module.ts

+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { SharedModule } from './shared/shared.module';
+
+import { AppComponent } from './app.component';
+import { AuthHeaderInterceptor } from './interceptors/header.interceptor';
+import { CatchErrorInterceptor } from './interceptors/http-error.interceptor';
+
+import { AppRoutingModule } from './app-routing.module';
+import { HeaderComponent } from './header/header.component';
+import { HomeComponent } from './home/home.component';
+import { AuthService } from './shared/services';
+import { HeroComponent } from './hero/hero.component';
+import { CreateComponent } from './create/create.component';
+import { ViewdataComponent } from './viewdata/viewdata.component';
+import { EditComponent } from './edit/edit.component';
+import { MatTableModule } from '@angular/material/table';
+export function appInitializerFactory(authService: AuthService) {
+  return () => authService.checkTheUserOnTheFirstLoad();
+}
+
+@NgModule({
+  imports: [BrowserAnimationsModule, HttpClientModule, SharedModule, AppRoutingModule, MatGridListModule, MatTableModule],
+  declarations: [AppComponent, HeaderComponent, HomeComponent, HeroComponent, CreateComponent, ViewdataComponent, EditComponent],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: AuthHeaderInterceptor,
+      multi: true,
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: CatchErrorInterceptor,
+      multi: true,
+    },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appInitializerFactory,
+      multi: true,
+      deps: [AuthService],
+    },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }

src/app/auth/auth-routing.module.ts

+import { Routes, RouterModule } from '@angular/router';
+
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    children: [
+      {
+        path: '',
+        redirectTo: '/auth/login',
+        pathMatch: 'full',
+      },
+      {
+        path: 'login',
+        component: LoginComponent,
+      },
+      {
+        path: 'register',
+        component: RegisterComponent,
+      },
+    ],
+  },
+];
+
+export const AuthRoutingModule = RouterModule.forChild(routes);

src/app/auth/auth.component.scss

+.example-icon {
+  padding: 0 14px;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}
+
+.example-card {
+  width: 400px;
+  margin: 10% auto;
+}
+
+.mat-card-title {
+  font-size: 16px;
+}

src/app/auth/auth.module.ts

+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../shared/shared.module';
+
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+import { AuthRoutingModule } from './auth-routing.module';
+
+@NgModule({
+  imports: [SharedModule, AuthRoutingModule],
+  declarations: [LoginComponent, RegisterComponent],
+})
+export class AuthModule {}

src/app/auth/login/login.component.html

+<mat-card class="example-card">
+  <mat-card-header>
+    <mat-card-title>Login</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <form class="example-form">
+      <table cellspacing="0">
+        <tr>
+          <td>
+            <mat-form-field>
+              <input matInput placeholder="Email" [(ngModel)]="email" name="email" required>
+            </mat-form-field>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <mat-form-field>
+              <input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
+            </mat-form-field>
+          </td>
+        </tr>
+      </table>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button (click)="login()" color="primary">Login</button>
+    <span>Don't have an account ? <a [routerLink]="['/auth/register']" >register</a> here</span>
+  </mat-card-actions>
+</mat-card>

src/app/auth/login/login.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/login/login.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthService } from '@app/shared/services';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['../auth.component.scss'],
+})
+export class LoginComponent {
+  email: string | null = null;
+  password: string | null = null;
+
+  constructor(private router: Router, private authService: AuthService) {}
+
+  login(): void {
+    this.authService.login(this.email!, this.password!).subscribe(() => {
+      this.router.navigateByUrl('/');
+    });
+  }
+}

src/app/auth/register/register.component.html

+<mat-card class="example-card">
+  <mat-card-header>
+    <mat-card-title>Register</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <form class="example-form">
+      <table cellspacing="0" [formGroup]="userForm">
+        <tr>
+          <td>
+            <mat-form-field>
+              <input matInput placeholder="Fullname" formControlName="fullname" name="fullname" required>
+            </mat-form-field>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <mat-form-field>
+              <input matInput placeholder="Email" formControlName="email" name="email" required>
+              <mat-error *ngIf="email.invalid && email.hasError('email')">Invalid email address</mat-error>
+            </mat-form-field>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <mat-form-field>
+              <input matInput placeholder="Password" formControlName="password" type="password" name="password" required>
+            </mat-form-field>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <mat-form-field>
+              <input matInput placeholder="Repeat Password" formControlName="repeatPassword" type="password" name="repeatPassword" required>
+              <mat-error *ngIf="repeatPassword.invalid && repeatPassword.hasError('passwordMatch')">Password mismatch</mat-error>
+            </mat-form-field>
+          </td>
+        </tr>
+      </table>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button (click)="register()" color="primary">Register</button>
+    <span>Allrady have an account ? <a [routerLink]="['/auth/login']">login</a> here</span>
+  </mat-card-actions>
+</mat-card>

src/app/auth/register/register.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RegisterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/register/register.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  ValidationErrors,
+  AbstractControl,
+} from '@angular/forms';
+
+import { AuthService } from '@app/shared/services';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['../auth.component.scss'],
+})
+export class RegisterComponent {
+  constructor(private router: Router, private authService: AuthService) {}
+
+  passwordsMatchValidator(control: FormControl): ValidationErrors | null {
+    const password = control.root.get('password');
+    return password && control.value !== password.value
+      ? {
+          passwordMatch: true,
+        }
+      : null;
+  }
+
+  userForm = new FormGroup({
+    fullname: new FormControl('', [Validators.required]),
+    email: new FormControl('', [Validators.required, Validators.email]),
+    password: new FormControl('', [Validators.required]),
+    repeatPassword: new FormControl('', [Validators.required, this.passwordsMatchValidator]),
+  });
+
+  get fullname(): AbstractControl {
+    return this.userForm.get('fullname')!;
+  }
+
+  get email(): AbstractControl {
+    return this.userForm.get('email')!;
+  }
+
+  get password(): AbstractControl {
+    return this.userForm.get('password')!;
+  }
+
+  get repeatPassword(): AbstractControl {
+    return this.userForm.get('repeatPassword')!;
+  }
+
+  register(): void {
+    if (this.userForm.invalid) {
+      return;
+    }
+
+    const { fullname, email, password, repeatPassword } = this.userForm.getRawValue();
+
+    this.authService.register(fullname, email, password, repeatPassword).subscribe(data => {
+      this.router.navigate(['']);
+    });
+  }
+}

src/app/create/create.component.css

+.example-icon {
+  padding: 0 14px;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}
+
+.example-card {
+  width: 800px;
+  margin: auto;
+  margin-top: 4%;
+}
\ No newline at end of file

src/app/create/create.component.html

+<mat-card class="example-card">
+  <mat-card-header>
+    <h3>บันทึกข้อมูล</h3>
+  </mat-card-header>
+  <form>
+    <div class="example-container">
+      <p style="text-align: center">
+        <mat-form-field appearance="outline" style="width: 400px">
+          <mat-label>หมวดหมู่หนัง</mat-label>
+          <br />
+          <mat-select [(ngModel)]="reviewAdd.catagory" name="catagory">
+            <mat-option
+              value="option"
+              *ngFor="let catagory of catagorys"
+              [value]="catagory.type"
+              >{{ catagory.type }}</mat-option
+            >
+          </mat-select>
+        </mat-form-field>
+        <br />
+        <mat-form-field appearance="outline" style="width: 400px">
+          <mat-label>ชื่อหนัง</mat-label>
+          <input
+            matInput
+            placeholder="Placeholder"
+            name="namemovie"
+            [(ngModel)]="reviewAdd.namemovie"
+          />
+        </mat-form-field>
+        <br />
+        <mat-form-field appearance="outline" style="width: 400px">
+          <mat-label>หัวข้อ</mat-label>
+          <input
+            matInput
+            placeholder="Placeholder"
+            name="title"
+            [(ngModel)]="reviewAdd.title"
+          />
+        </mat-form-field>
+        <br />
+        <mat-form-field appearance="outline" style="width: 400px">
+          <mat-label>คำอธิบาย</mat-label>
+          <textarea
+            rows="10"
+            matInput
+            placeholder="Placeholder"
+            name="description"
+            [(ngModel)]="reviewAdd.description"
+          ></textarea>
+        </mat-form-field>
+      </p>
+    </div>
+    <p style="text-align: center">
+      <button
+        style="width: 200px; margin-right: 5%"
+        mat-raised-button
+        (click)="submitReviewAdd()"
+        color="primary"
+        *ngIf="
+          reviewAdd.catagory &&
+          reviewAdd.namemovie &&
+          reviewAdd.title &&
+          reviewAdd.description
+        "
+      >
+        บันทึก
+      </button>
+      <button
+        style="width: 100px; background-color: #d32f2f; color: white"
+        mat-raised-button
+        routerLink="/"
+      >
+        ยกเลิก
+      </button>
+    </p>
+  </form>
+</mat-card>
+<br />
+<br />
+<br />
+<br />

src/app/create/create.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateComponent } from './create.component';
+
+describe('CreateComponent', () => {
+  let component: CreateComponent;
+  let fixture: ComponentFixture<CreateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/create/create.component.ts

+import { Component, OnInit , Input} from '@angular/core';
+import { catagory } from '../../catagory';
+import { CreateService } from '../service/create.service';
+import { AuthService } from '@app/shared/services';
+
+@Component({
+  selector: 'app-create',
+  templateUrl: './create.component.html',
+  styleUrls: ['./create.component.css']
+})
+export class CreateComponent implements OnInit {
+  user_data: any;
+  reviewAdd = {
+    'user_id': '',
+    'user_name': '',
+    'catagory': '',
+    'namemovie': '',
+    'title': '',
+    'description': ''
+  };
+  catagorys = catagory;
+  constructor(private createService: CreateService, private authService: AuthService) { }
+
+  ngOnInit(): void {
+    this.authService.getUser().subscribe(data => this.user_data = data);
+    this.reviewAdd = {
+      'user_id': this.user_data._id,
+      'user_name': this.user_data.fullname,
+      'catagory': '',
+      'namemovie': '',
+      'title': '',
+      'description': ''
+    };
+  }
+  submitReviewAdd() {
+    this.createService.postReview(this.reviewAdd).subscribe((response: {}) =>
+      alert('บันทึกเรียบร้อย'),
+    );
+  }
+}

src/app/edit/edit.component.css

+.example-icon {
+  padding: 0 14px;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}
+
+.example-card {
+  width: 800px;
+  margin: auto;
+  margin-top: 4%;
+}

src/app/edit/edit.component.html

+<mat-card class="example-card">
+  <mat-card-header>
+    <h3>แก้ไขข้อมูล</h3>
+  </mat-card-header>
+  <form>
+    <div class="example-container">
+      <p style="text-align: center">
+        <mat-form-field appearance="outline" style="width: 400px">
+          <mat-label>หมวดหมู่หนัง</mat-label>
+          <mat-select [(ngModel)]="data.catagory" name="catagory">
+            <mat-option
+              value="option"
+              *ngFor="let catagory of catagorys"
+              [value]="catagory.type"
+              >{{ catagory.type }}</mat-option
+            >
+          </mat-select>
+        </mat-form-field>
+        <br />
+        <mat-form-field appearance="outline" style="width: 400px">
+          <mat-label>ชื่อหนัง</mat-label>
+          <input
+            matInput
+            placeholder="Placeholder"
+            name="namemovie"
+            [(ngModel)]="data.namemovie"
+          />
+        </mat-form-field>
+        <br />
+        <mat-form-field appearance="outline" style="width: 400px">
+          <mat-label>หัวข้อ</mat-label>
+          <input
+            matInput
+            placeholder="Placeholder"
+            name="title"
+            [(ngModel)]="data.title"
+          />
+        </mat-form-field>
+        <br />
+        <mat-form-field appearance="outline" style="width: 400px">
+          <mat-label>คำอธิบาย</mat-label>
+          <textarea
+            rows="10"
+            matInput
+            placeholder="Placeholder"
+            name="description"
+            [(ngModel)]="data.description"
+          ></textarea>
+        </mat-form-field>
+      </p>
+      <p style="text-align: center">
+        <button
+          style="width: 200px; margin-right: 5%"
+          mat-raised-button
+          (click)="submitUpdate()"
+          color="primary"
+          *ngIf="
+            data.catagory && data.namemovie && data.title && data.description
+          "
+        >
+          บันทึก
+        </button>
+        <button
+          style="width: 100px; background-color: #d32f2f; color: white"
+          mat-raised-button
+          [routerLink]="['/viewdata', data._id]"
+        >
+          ยกเลิก
+        </button>
+      </p>
+    </div>
+  </form>
+</mat-card>
+<br />
+<br />
+<br />
+<br />

src/app/edit/edit.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditComponent } from './edit.component';
+
+describe('EditComponent', () => {
+  let component: EditComponent;
+  let fixture: ComponentFixture<EditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/edit/edit.component.ts

+import { Component, OnInit } from '@angular/core';
+import { catagory } from '../../catagory';
+import { EditService } from '../service/edit.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-edit',
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.css']
+})
+export class EditComponent implements OnInit {
+  catagorys = catagory;
+  dataId: any;
+  data: any;
+  constructor(private route: ActivatedRoute, private editService: EditService) { }
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(params => {
+      this.dataId = params.get('dataId');
+    });
+    this.editService.getReviewsById(this.dataId).subscribe(response => {
+      this.data = response[0];
+      console.log(this.data);
+    });
+  }
+
+  submitUpdate() {
+    this.editService.putUpdate(this.data).subscribe(response => {
+      alert('แก้ไขเรียบร้อย');
+    });
+  }
+}

src/app/header/header.component.html

+<header>
+  <mat-toolbar color="primary">
+    <a routerLink="/" class="logo"></a>
+    <span class="example-spacer"></span>
+    <a class="links side" routerLink="/auth/login" *ngIf="!user">Login</a>
+    <div>
+      <a class="links side" *ngIf="user" [matMenuTriggerFor]="menu">
+        <mat-icon>account_circle</mat-icon>{{ user.fullname }}
+      </a>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item *ngIf="user?.isAdmin" routerLink="/admin">
+          admin
+        </button>
+        <button mat-menu-item (click)="logout()">logout</button>
+      </mat-menu>
+    </div>
+  </mat-toolbar>
+</header>

src/app/header/header.component.scss

+
+header {
+    width: 100%;
+    .logo {
+      background-image: url('../../assets/Logo2.png');
+      width: 100%;
+      height: 80%;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+    .example-spacer {
+      flex: 1 1 auto;
+    }
+    .links {
+      color: white;
+      font-family: 'Helvetica Neue', sans-serif;
+      font-size: 15px;
+      font-weight: initial;
+      letter-spacing: -1px;
+      line-height: 1;
+      text-align: center;
+      padding: 15px;
+      &.side {
+        padding: 0 14px;
+      }
+    }
+    .mat-toolbar {
+      background: black;
+    }
+    .mat-icon {
+      vertical-align: middle;
+      margin: 0 5px;
+    }
+    a {
+      cursor: pointer;
+    }
+  }
+ 
\ No newline at end of file

src/app/header/header.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/header/header.component.ts

+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { User } from '@app/shared/interfaces';
+
+import { AuthService } from '@app/shared/services';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent {
+  @Input() user: User | null = null;
+
+  constructor(private router: Router, private authService: AuthService) {}
+
+  logout(): void {
+    this.authService.signOut();
+    this.router.navigateByUrl('/auth/login');
+  }
+}

src/app/hero/hero.component.css

+@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;600&display=swap");
+
+* {
+  font-family: "Kanit", sans-serif;
+}
+.content-topic-page {
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top: 20px;
+  padding-bottom: 5px;
+}
+.title-topic {
+  padding-left: 15px;
+  padding-bottom: 15px;
+}
+.card-content {
+  padding-bottom: 35px;
+  padding-left: 30px;
+  padding-right: 30px;
+  background-color: white;
+  border-radius: 10px;
+  opacity: 0.8;
+  background-color: #3e3e3e;
+}
+.content-card {
+  background-color: #262626;
+  opacity: 1;
+}
+table {
+  width: 100%;
+}
+th {
+  text-align: center;
+}
+.content-flim {
+  background-color: #262626;
+  opacity: 1px;
+  width: 400px;
+  height: 100px;
+  font-size: 18px;
+  font-weight: lighter;
+  padding: 10px;
+  border-radius: 6px;
+  border: none;
+  outline: none;
+}
+.content-topic {
+  margin: auto;
+  background-color: #262626;
+  opacity: 1px;
+  font-size: 18px;
+  width: 95%;
+  font-weight: lighter;
+  padding: 10px;
+  border-radius: 6px;
+  border: none;
+  outline: none;
+}
+.content-catagory {
+  margin: auto;
+  background-color: #262626;
+  width: 55%;
+  opacity: 1px;
+  width: 400px;
+  height: 100px;
+  font-size: 18px;
+  font-weight: lighter;
+  padding: 10px;
+  border-radius: 6px;
+  border: none;
+  outline: none;
+}
+.leftcolumn {
+  float: left;
+  width: 73%;
+}
+
+.rightcolumn {
+  float: right;
+  width: 25%;
+  padding-left: 20px;
+}

src/app/hero/hero.component.html

+<div class="content-topic-page">
+  <div class="row">
+    <div class="card-content leftcolumn">
+      <div class="row">
+        <h2 class="title-topic" style="padding-bottom: 30px">บทความ</h2>
+      </div>
+      <div class="row">
+        <div class="content-topic">
+          <div style="padding: 10px" >
+            <a href=""
+              ><label>s</label></a
+            >
+            <p>{{ i.t</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-content rightcolumn">
+      <div class="row">
+        <h2 class="title-topic" style="padding-bottom: 30px">หมวดหมู</h2>
+      </div>
+      <div class="row">
+        <div class="content-topic">
+          <div style="padding: 10px" >
+            <a href=""
+              ><label>{{ </label></a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/hero/hero.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroComponent } from './hero.component';
+
+describe('HeroComponent', () => {
+  let component: HeroComponent;
+  let fixture: ComponentFixture<HeroComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/hero/hero.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-hero',
+  templateUrl: './hero.component.html',
+  styleUrls: ['./hero.component.css']
+})
+export class HeroComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/home/home.component.html

+<!-- <td>{{ review.catagory }}</td>
+            <td>{{ review.namemovie }}</td>
+            <td>{{ review.title }}</td>
+            <td>{{ review.description }}</td> -->
+<!-- <td>
+              <div>
+                <button
+                  mat-raised-button
+                  [routerLink]="['/viewdata', review._id]"
+                  style="background-color: #1cbe3f"
+                >
+                  ดูข้อมูล
+                </button>
+              </div>
+            </td> -->
+<!-- <td>
+              <button
+                *ngIf="user_data._id == review.user_id"
+                mat-raised-button
+                [routerLink]="['/edit', review._id]"
+                style="background-color: #ffa000"
+              >
+                แก้ไข
+              </button>
+            </td>
+            <td>
+              <a
+                role="button"
+                *ngIf="user_data._id == review.user_id"
+                mat-raised-button
+                (click)="deleteData(review._id)"
+                style="background-color: #d32f2f"
+                >ลบ</a
+              >
+            </td> -->
+<div
+  style="
+    padding-top: 5%;
+    padding-left: 10%;
+    padding-right: 10%;
+    padding-bottom: 10%;
+  "
+>
+  <div class="row">
+    <div class="card-content leftcolumn">
+      <div class="row">
+        <h2 class="title-topic">บทความ</h2>
+      </div>
+      <div class="row">
+        <div class="content-topic">
+          <div style="padding: 10px">
+            <div *ngFor="let review of reviews" style="padding: 1%">
+              <mat-card
+                style="outline: 0"
+                class="box"
+                [routerLink]="['/viewdata', review._id]"
+                ><mat-card-title
+                  ><h2>{{ review.title }}</h2></mat-card-title
+                >
+                <mat-card-content>
+                  {{ review.user_name }}&nbsp; |&nbsp; {{ review.catagory }}&nbsp; | &nbsp;{{ review.createdAt | date:'dd-MM-yyyy'}}
+                </mat-card-content>
+              </mat-card>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-content rightcolumn">
+      <br />
+      <br /><br />
+      <div class="row">
+        <div class="content-topic">
+          <div style="padding: 10px">
+            <section fxLayout="row" fxLayoutGap="5%" class="stycky">
+              <article class="progress-card" fxFlex="30">
+                <mat-card fxLayout="column" fxLayoutAlign="center center">
+                  <mat-card-title><h2>เครื่องมือเสริม</h2></mat-card-title>
+                  <mat-card-content>
+                    <mat-list>
+                      <mat-list-item
+                        ><button
+                          class="box"
+                          mat-raised-button
+                          routerLink="/create"
+                          style="background-color: #1cbe3f"
+                        >
+                          <mat-icon>post_add</mat-icon>ดูข้อมูล
+                        </button></mat-list-item
+                      >
+                    </mat-list>
+                  </mat-card-content>
+                </mat-card>
+              </article>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/home/home.component.scss

+.example-icon {
+    padding: 0 14px;
+  }
+  
+  .example-spacer {
+    flex: 1 1 auto;
+  }
+  
+  .example-card {
+    width: 400px;
+    margin: 10% auto;
+  }
+  
+  .mat-card-title {
+    font-size: 16px;
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+  
+  th,
+  td {
+    padding: 8px;
+    border-bottom: 1px solid #ddd;
+  }
+  section.stycky {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 0;
+  }
+  .leftcolumn {
+    float: left;
+    width: 73%;
+  }
+  
+  .rightcolumn {
+    float: right;
+    width: 25%;
+    padding-left: 20px;
+  }
+  .box:hover {
+    box-shadow: 0 0 11px rgba(33,33,33,.2); 
+  }
\ No newline at end of file

src/app/home/home.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { HomeService } from '../service/home.service';
+import { catagory } from '../../catagory';
+import { AuthService } from '@app/shared/services';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+  reviews: any;
+  user_data: any;
+  catagorys = catagory;
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','option'];
+  constructor(private homeService: HomeService, private authService: AuthService) { }
+
+  ngOnInit() {
+    this.fetchData();
+    this.authService.getUser().subscribe(data => this.user_data = data);
+  }
+  fetchData() {
+    this.homeService.getReviews().subscribe(response => {
+      this.reviews = response;
+    });
+  }
+  pageroute(data: any) {
+    console.log(data);
+  }
+
+  deleteData(data: any) {
+    console.log(data);
+    this.homeService.deleteReview(data).subscribe((response: {}) => alert('ลบเรียบร้อย'));
+    this.fetchData();
+  }
+}

src/app/interceptors/header.interceptor.ts

+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+
+import { AuthService } from '@app/shared/services';
+
+@Injectable()
+export class AuthHeaderInterceptor implements HttpInterceptor {
+  constructor(private authService: AuthService) {}
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    req = req.clone({
+      setHeaders: this.authService.getAuthorizationHeaders(),
+    });
+
+    return next.handle(req);
+  }
+}

src/app/interceptors/http-error.interceptor.ts

+import { Injectable } from '@angular/core';
+import {
+  HttpEvent,
+  HttpInterceptor,
+  HttpHandler,
+  HttpRequest,
+  HttpErrorResponse,
+} from '@angular/common/http';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+@Injectable()
+export class CatchErrorInterceptor implements HttpInterceptor {
+  constructor(private snackBar: MatSnackBar) {}
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(request).pipe(catchError(this.showSnackBar));
+  }
+
+  private showSnackBar = (response: HttpErrorResponse): Observable<never> => {
+    const text: string | undefined = response.error?.message ?? response.error.statusText;
+
+    if (text) {
+      this.snackBar.open(text, 'Close', {
+        duration: 2000,
+      });
+    }
+
+    return throwError(response);
+  };
+}

src/app/service/create.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { CreateService } from './create.service';
+
+describe('CreateService', () => {
+  let service: CreateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CreateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/create.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CreateService {
+  baseUrl = 'http://localhost:4040/api/review';
+
+  constructor(public http: HttpClient) { }
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    })
+  };
+  postReview(data: any): Observable<any> {
+    return this.http.post<any>(`${this.baseUrl}`, JSON.stringify(data), this.httpOptions);
+  }
+}

src/app/service/edit.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { EditService } from './edit.service';
+
+describe('EditService', () => {
+  let service: EditService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EditService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/edit.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EditService {
+  baseUrl = 'http://localhost:4040/api/review';
+
+  constructor(public http: HttpClient) { }
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    })
+  };
+
+  getReviewsById(_id: any): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/get/${_id}`);
+  }
+
+  putUpdate(data: any): Observable<any> {
+    return this.http.put(`${this.baseUrl}/update/${data._id}`, data);
+  }
+}

src/app/service/home.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { HomeService } from './home.service';
+
+describe('HomeService', () => {
+  let service: HomeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HomeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/home.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HomeService {
+  baseUrl = 'http://localhost:4040/api/review';
+
+  constructor(public http: HttpClient) { }
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    })
+  };
+  getReviews(): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/all`);
+  }
+  deleteReview(data: any): Observable<any> {
+    return this.http.delete<any>(`${this.baseUrl}/delete/${data}`, this.httpOptions);
+  }
+}

src/app/service/viewdata.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ViewdataService } from './viewdata.service';
+
+describe('ViewdataService', () => {
+  let service: ViewdataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ViewdataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/viewdata.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ViewdataService {
+  baseUrl = 'http://localhost:4040/api/review';
+
+  constructor(public http: HttpClient) { }
+
+  httpOptions = {
+    headers: new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Accept': 'application/json'
+    })
+  };
+
+  getReviewsById(_id: any): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/get/${_id}`);
+  }
+}

src/app/shared/guards/auth.guard.ts

+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { AuthService } from '../services';
+
+@Injectable({ providedIn: 'root' })
+export class AuthGuard implements CanActivate {
+  constructor(private router: Router, private authService: AuthService) {}
+
+  canActivate(): Observable<boolean> {
+    return this.authService.getUser().pipe(
+      map(user => {
+        if (user !== null) {
+          return true;
+        }
+
+        this.router.navigateByUrl('/auth/login');
+        return false;
+      })
+    );
+  }
+}

src/app/shared/guards/index.ts

+export * from './auth.guard';

src/app/shared/interfaces/index.ts

+export * from './user.interface';

src/app/shared/interfaces/user.interface.ts

+export interface User {
+  _id: string;
+  fullname: string;
+  createdAt: string;
+  roles: string[];
+  isAdmin: boolean;
+}

src/app/shared/services/auth/auth.service.spec.ts

+import { TestBed, inject } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthService]
+    });
+  });
+
+  it('should be created', inject([AuthService], (service: AuthService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/shared/services/auth/auth.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable, BehaviorSubject, EMPTY } from 'rxjs';
+import { tap, pluck } from 'rxjs/operators';
+
+import { User } from '@app/shared/interfaces';
+
+import { TokenStorage } from './token.storage';
+
+interface AuthResponse {
+  token: string;
+  user: User;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  private user$ = new BehaviorSubject<User | null>(null);
+
+  constructor(private http: HttpClient, private tokenStorage: TokenStorage) {}
+
+  login(email: string, password: string): Observable<User> {
+    return this.http
+      .post<AuthResponse>('/api/auth/login', { email, password })
+      .pipe(
+        tap(({ token, user }) => {
+          this.setUser(user);
+          this.tokenStorage.saveToken(token);
+        }),
+        pluck('user')
+      );
+  }
+
+  register(
+    fullname: string,
+    email: string,
+    password: string,
+    repeatPassword: string
+  ): Observable<User> {
+    return this.http
+      .post<AuthResponse>('/api/auth/register', {
+        fullname,
+        email,
+        password,
+        repeatPassword,
+      })
+      .pipe(
+        tap(({ token, user }) => {
+          this.setUser(user);
+          this.tokenStorage.saveToken(token);
+        }),
+        pluck('user')
+      );
+  }
+
+  setUser(user: User | null): void {
+    if (user) {
+      user.isAdmin = user.roles.includes('admin');
+    }
+
+    this.user$.next(user);
+    window.user = user;
+  }
+
+  getUser(): Observable<User | null> {
+    return this.user$.asObservable();
+  }
+
+  me(): Observable<User> {
+    const token: string | null = this.tokenStorage.getToken();
+
+    if (token === null) {
+      return EMPTY;
+    }
+
+    return this.http.get<AuthResponse>('/api/auth/me').pipe(
+      tap(({ user }) => this.setUser(user)),
+      pluck('user')
+    );
+  }
+
+  signOut(): void {
+    this.tokenStorage.signOut();
+    this.setUser(null);
+    delete window.user;
+  }
+
+  getAuthorizationHeaders() {
+    const token: string | null = this.tokenStorage.getToken() || '';
+    return { Authorization: `Bearer ${token}` };
+  }
+
+  /**
+   * Let's try to get user's information if he was logged in previously,
+   * thus we can ensure that the user is able to access the `/` (home) page.
+   */
+  checkTheUserOnTheFirstLoad(): Promise<User> {
+    return this.me().toPromise();
+  }
+}

src/app/shared/services/auth/token.storage.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class TokenStorage {
+  private tokenKey = 'authToken';
+
+  signOut(): void {
+    localStorage.removeItem(this.tokenKey);
+    localStorage.clear();
+  }
+
+  saveToken(token?: string): void {
+    if (!token) return;
+    localStorage.setItem(this.tokenKey, token);
+  }
+
+  getToken(): string | null {
+    return localStorage.getItem(this.tokenKey);
+  }
+}

src/app/shared/services/index.ts

+export * from './auth/auth.service';

src/app/shared/shared.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTreeModule } from '@angular/material/tree';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+@NgModule({
+  exports: [
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+    MatMenuModule,
+    MatTabsModule,
+    MatCardModule,
+    MatListModule,
+    MatIconModule,
+    MatTreeModule,
+    MatInputModule,
+    MatSelectModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatToolbarModule,
+    MatSidenavModule,
+    MatSnackBarModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatProgressBarModule,
+  ],
+})
+export class SharedModule {}

src/app/viewdata/viewdata.component.css

+.example-icon {
+    padding: 0 14px;
+  }
+  
+  .example-spacer {
+    flex: 1 1 auto;
+  }
+  
+  .example-card {
+    width: 400px;
+    margin: 10% auto;
+  }
+  
+  .mat-card-title {
+    font-size: 16px;
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+  
+  th,
+  td {
+    padding: 8px;
+    border-bottom: 1px solid #ddd;
+  }
+  section.stycky {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    top: 0;
+  }
+  .leftcolumn {
+    float: left;
+    width: 73%;
+  }
+  
+  .rightcolumn {
+    float: right;
+    width: 25%;
+  }
+  .box:hover {
+    box-shadow: 0 0 11px rgba(33,33,33,.2); 
+  }
\ No newline at end of file

src/app/viewdata/viewdata.component.html

+<!-- <td>{{ review.catagory }}</td>
+            <td>{{ review.namemovie }}</td>
+            <td>{{ review.title }}</td>
+            <td>{{ review.description }}</td> -->
+<!-- <td>
+              <div>
+                <button
+                  mat-raised-button
+                  [routerLink]="['/viewdata', review._id]"
+                  style="background-color: #1cbe3f"
+                >
+                  ดูข้อมูล
+                </button>
+              </div>
+            </td> -->
+<!-- <td>
+              <button
+                *ngIf="user_data._id == review.user_id"
+                mat-raised-button
+                [routerLink]="['/edit', review._id]"
+                style="background-color: #ffa000"
+              >
+                แก้ไข
+              </button>
+            </td>
+            <td>
+              <a
+                role="button"
+                *ngIf="user_data._id == review.user_id"
+                mat-raised-button
+                (click)="deleteData(review._id)"
+                style="background-color: #d32f2f"
+                >ลบ</a
+              >
+            </td> -->
+<div
+  style="
+    padding-top: 5%;
+    padding-left: 10%;
+    padding-right: 10%;
+    padding-bottom: 10%;
+  "
+>
+  <div class="row">
+    <div class="card-content leftcolumn">
+      <div class="row">
+        <span>
+          <a routerLink="/">
+            <mat-icon>keyboard_backspace</mat-icon>
+          </a>
+        </span>
+      </div>
+      <div class="row">
+        <div class="content-topic">
+          <div style="padding: 10px">
+            <div style="padding: 1%">
+              <mat-card
+                ><mat-card-title>{{ data.title }}</mat-card-title>
+                <mat-card-subtitle
+                  >{{ data.catagory }}&nbsp;|&nbsp;{{
+                    data.createdAt | date:'dd-MM-yyyy'
+                  }}</mat-card-subtitle
+                >
+                <mat-card-content>
+                  {{ data.description }}
+                </mat-card-content>
+                <mat-card-subtitle
+                  >By &nbsp;{{ data.user_name }}</mat-card-subtitle
+                >
+              </mat-card>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-content rightcolumn">
+      <br />
+      <br /><br />
+      <div class="row">
+        <div class="content-topic">
+          <div style="padding: 10px">
+            <section fxLayout="row" fxLayoutGap="5%" class="stycky">
+              <article class="progress-card" fxFlex="30">
+                <mat-card fxLayout="column" fxLayoutAlign="center center">
+                  <mat-card-title><h2>เครื่องมือเสริม</h2></mat-card-title>
+                  <mat-card-content>
+                    <mat-list>
+                      <mat-list-item>
+                        <button
+                          class="box"
+                          mat-raised-button
+                          [routerLink]="['/edit', data._id]"
+                          style="background-color: #ffa000"
+                        >
+                          <mat-icon>create_port</mat-icon>แก้ไข
+                        </button></mat-list-item
+                      >
+                      <mat-list-item
+                        ><button
+                          class="box"
+                          mat-raised-button
+                          (click)="deleteData(data._id)"
+                          style="background-color: #d32f2f"
+                        >
+                          <mat-icon>delete</mat-icon>ลบ
+                        </button></mat-list-item
+                      >
+                    </mat-list>
+                  </mat-card-content>
+                </mat-card>
+              </article>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/viewdata/viewdata.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewdataComponent } from './viewdata.component';
+
+describe('ViewdataComponent', () => {
+  let component: ViewdataComponent;
+  let fixture: ComponentFixture<ViewdataComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewdataComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewdataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/viewdata/viewdata.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ViewdataService } from '../service/viewdata.service';
+import { HomeService } from '../service/home.service';
+
+@Component({
+  selector: 'app-viewdata',
+  templateUrl: './viewdata.component.html',
+  styleUrls: ['./viewdata.component.css']
+})
+export class ViewdataComponent implements OnInit {
+  constructor(private route: ActivatedRoute, private reviewdataService: ViewdataService, private homeService: HomeService, ) { }
+  dataId: any;
+  data: any;
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(params => {
+      this.dataId = params.get('dataId');
+    });
+    this.reviewdataService.getReviewsById(this.dataId).subscribe(response => {
+      this.data = response[0];
+    });
+  }
+  deleteData(data: any) {
+    console.log(data);
+    this.homeService.deleteReview(data).subscribe((response: {}) => alert('ลบเรียบร้อย'));
+  }
+}

src/assets/icons/add-blue.svg

+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 5H9V9H5V11H9V15H11V11H15V9H11V5ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" transform="translate(0.97168 0.970551)" fill="#2D9CDB"/>
+</svg>

src/assets/icons/add.svg

+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.89626 5.39898H8.09694V8.09847H5.39796V9.89813H8.09694V12.5976H9.89626V9.89813H12.5952V8.09847H9.89626V5.39898ZM8.9966 0C4.04847 0 0 4.04923 0 8.9983C0 13.9474 4.04847 17.9966 8.9966 17.9966C13.9447 17.9966 17.9932 13.9474 17.9932 8.9983C17.9932 4.04923 13.9447 0 8.9966 0ZM8.9966 16.1969C5.0381 16.1969 1.79932 12.9575 1.79932 8.9983C1.79932 5.03905 5.0381 1.79966 8.9966 1.79966C12.9551 1.79966 16.1939 5.03905 16.1939 8.9983C16.1939 12.9575 12.9551 16.1969 8.9966 16.1969Z" transform="translate(-0.000488281 -0.000610352)" fill="black"/>
+</svg>

src/assets/icons/air-station.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#B6DCFE;" d="M 24.117188 35.5 L 15.882813 35.5 L 10.5 38.191406 L 10.5 36.234375 L 16.179688 31.5 L 23.820313 31.5 L 29.5 36.234375 L 29.5 38.191406 Z "></path>
+<path style=" fill:#4788C7;" d="M 23.636719 32 L 29 36.46875 L 29 37.382813 L 24.234375 35 L 15.765625 35 L 11 37.382813 L 11 36.46875 L 16.363281 32 L 23.636719 32 M 24 31 L 16 31 L 10 36 L 10 39 L 16 36 L 24 36 L 30 39 L 30 36 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 24.070313 23.5 L 15.929688 23.5 L 2.5 27.335938 L 2.5 24.289063 L 16.132813 16.5 L 23.867188 16.5 L 37.5 24.289063 L 37.5 27.335938 Z "></path>
+<path style=" fill:#4788C7;" d="M 23.734375 17 L 37 24.578125 L 37 26.675781 L 24.273438 23.039063 L 24.140625 23 L 15.859375 23 L 15.726563 23.039063 L 3 26.675781 L 3 24.578125 L 16.265625 17 L 23.734375 17 M 24 16 L 16 16 L 2 24 L 2 28 L 16 24 L 24 24 L 38 28 L 38 24 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 16.5 35.5 L 16.5 5 C 16.5 3.070313 18.070313 1.5 20 1.5 C 21.929688 1.5 23.5 3.070313 23.5 5 L 23.5 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 2 C 21.652344 2 23 3.347656 23 5 L 23 35 L 17 35 L 17 5 C 17 3.347656 18.347656 2 20 2 M 20 1 C 17.789063 1 16 2.789063 16 5 L 16 36 L 24 36 L 24 5 C 24 2.789063 22.210938 1 20 1 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/airplane-front-view.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 25.5 14 L 14.5 14 C 14.222656 14 14 13.777344 14 13.5 C 14 13.222656 14.222656 13 14.5 13 L 25.5 13 C 25.777344 13 26 13.222656 26 13.5 C 26 13.777344 25.777344 14 25.5 14 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 17.605469 18.5 L 18.96875 11.414063 C 19.046875 10.882813 19.488281 10.5 20 10.5 C 20.511719 10.5 20.953125 10.882813 21.027344 11.390625 L 22.394531 18.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 11 C 20.265625 11 20.492188 11.199219 20.539063 11.507813 L 21.789063 18 L 18.210938 18 L 19.46875 11.460938 C 19.507813 11.199219 19.734375 11 20 11 M 20 10 C 19.234375 10 18.585938 10.5625 18.476563 11.320313 L 17 19 L 23 19 L 21.523438 11.320313 C 21.414063 10.5625 20.765625 10 20 10 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 17.058594 25.5 L 0.5 21.605469 L 0.5 19.5 L 39.5 19.5 L 39.5 21.605469 L 22.941406 25.503906 Z "></path>
+<path style=" fill:#4788C7;" d="M 39 20 L 39 21.207031 L 22.882813 25.003906 L 17.117188 25 L 1 21.207031 L 1 20 L 39 20 M 40 19 L 0 19 L 0 22 L 17 26 L 23 26.003906 L 40 22 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 20 29.5 C 17.039063 29.5 14.5 26.109375 14.5 23.332031 C 14.5 20.667969 16.96875 18.5 20 18.5 C 23.03125 18.5 25.5 20.667969 25.5 23.332031 C 25.5 26.109375 22.960938 29.5 20 29.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 19 C 22.757813 19 25 20.945313 25 23.332031 C 25 25.832031 22.644531 29 20 29 C 17.355469 29 15 25.832031 15 23.332031 C 15 20.945313 17.242188 19 20 19 M 20 18 C 16.6875 18 14 20.386719 14 23.332031 C 14 26.277344 16.6875 30 20 30 C 23.3125 30 26 26.277344 26 23.332031 C 26 20.386719 23.3125 18 20 18 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 35.5 25.5 C 35.5 27.15625 34.15625 28.5 32.5 28.5 C 30.84375 28.5 29.5 27.15625 29.5 25.5 C 29.5 23.84375 30.84375 22.5 32.5 22.5 C 34.15625 22.5 35.5 23.84375 35.5 25.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 32.5 23 C 33.878906 23 35 24.121094 35 25.5 C 35 26.878906 33.878906 28 32.5 28 C 31.121094 28 30 26.878906 30 25.5 C 30 24.121094 31.121094 23 32.5 23 M 32.5 22 C 30.566406 22 29 23.566406 29 25.5 C 29 27.433594 30.566406 29 32.5 29 C 34.433594 29 36 27.433594 36 25.5 C 36 23.566406 34.433594 22 32.5 22 Z "></path>
+<path style=" fill:#4788C7;" d="M 21.25 26 C 21.25 26.691406 20.691406 27.25 20 27.25 C 19.308594 27.25 18.75 26.691406 18.75 26 C 18.75 25.308594 19.308594 24.75 20 24.75 C 20.691406 24.75 21.25 25.308594 21.25 26 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 10.5 25.5 C 10.5 27.15625 9.15625 28.5 7.5 28.5 C 5.84375 28.5 4.5 27.15625 4.5 25.5 C 4.5 23.84375 5.84375 22.5 7.5 22.5 C 9.15625 22.5 10.5 23.84375 10.5 25.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 7.5 23 C 8.878906 23 10 24.121094 10 25.5 C 10 26.878906 8.878906 28 7.5 28 C 6.121094 28 5 26.878906 5 25.5 C 5 24.121094 6.121094 23 7.5 23 M 7.5 22 C 5.566406 22 4 23.566406 4 25.5 C 4 27.433594 5.566406 29 7.5 29 C 9.433594 29 11 27.433594 11 25.5 C 11 23.566406 9.433594 22 7.5 22 Z "></path>
+<path style=" fill:#4788C7;" d="M 23 23 L 17 23 L 18 22 L 22 22 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/balloon.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 23 29.5 L 24 29.5 L 24 36.285156 L 23 36.285156 Z "></path>
+<path style=" fill:#4788C7;" d="M 16 29.5 L 17 29.5 L 17 36.285156 L 16 36.285156 Z "></path>
+<path style=" fill:#98CCFD;" d="M 16.25 30.5 C 15.375 29.351563 14.421875 28.175781 13.492188 27.035156 C 10.054688 22.808594 6.5 18.433594 6.5 14.570313 C 6.5 7.363281 12.554688 1.5 20 1.5 C 27.445313 1.5 33.5 7.363281 33.5 14.570313 C 33.5 18.433594 29.945313 22.808594 26.507813 27.035156 C 25.578125 28.175781 24.625 29.347656 23.75 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 2 C 27.167969 2 33 7.640625 33 14.570313 C 33 18.257813 29.503906 22.558594 26.117188 26.71875 C 25.242188 27.796875 24.339844 28.90625 23.503906 30 L 16.496094 30 C 15.660156 28.90625 14.757813 27.796875 13.882813 26.71875 C 10.496094 22.558594 7 18.257813 7 14.570313 C 7 7.640625 12.832031 2 20 2 M 20 1 C 12.269531 1 6 7.074219 6 14.570313 C 6 19.753906 11.867188 25.507813 16 31 L 24 31 C 28.132813 25.507813 34 19.753906 34 14.570313 C 34 7.074219 27.730469 1 20 1 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 22 30 C 36.5625 1.9375 20 2 20 2 C 20 2 30.59375 4.78125 21.023438 30 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 18 30 C 3.4375 1.9375 20 2 20 2 C 20 2 9.40625 4.78125 18.976563 30 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 18 38.5 C 17.171875 38.5 16.5 37.828125 16.5 37 L 16.5 33.5 L 23.5 33.5 L 23.5 37 C 23.5 37.828125 22.828125 38.5 22 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 23 34 L 23 37 C 23 37.550781 22.550781 38 22 38 L 18 38 C 17.449219 38 17 37.550781 17 37 L 17 34 L 23 34 M 24 33 L 16 33 L 16 37 C 16 38.105469 16.894531 39 18 39 L 22 39 C 23.105469 39 24 38.105469 24 37 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/boat.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 17.738281 8.585938 C 20.917969 8.996094 32.84375 11.085938 35.371094 19.585938 L 22.335938 21.445313 Z "></path>
+<path style=" fill:#4788C7;" d="M 18.488281 9.195313 C 22.335938 9.789063 32.125 11.992188 34.710938 19.175781 L 22.667969 20.894531 L 18.488281 9.195313 M 17 8 L 22 22 L 36 20 C 33.382813 9.257813 17 8 17 8 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 2 L 13 2 L 13 27 L 12 27 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 6 C 16.132813 3.425781 17.769531 5.980469 21.5 4.5 C 20.121094 4.480469 17.003906 2 13.355469 2 C 12.09375 2 12 2 12 2 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.859375 23.140625 C 16.355469 16.285156 14.050781 9.386719 12.9375 6.8125 C 16.449219 7.980469 27.5625 12.4375 29.414063 22.523438 Z "></path>
+<path style=" fill:#4788C7;" d="M 13.835938 7.65625 C 17.953125 9.191406 26.882813 13.457031 28.808594 22.042969 L 13.671875 22.609375 C 16.421875 16.558594 14.984375 10.699219 13.835938 7.65625 M 12 6 C 12 6 17.03125 14.957031 12 23.675781 L 30 23 C 28.109375 10.140625 12 6 12 6 Z "></path>
+<path style=" fill:#98CCFD;" d="M 6.25 34.5 C 5.570313 33.578125 2.695313 29.390625 2.511719 24.5 L 8.792969 24.5 L 10.792969 26.5 L 26.207031 26.5 L 28.207031 24.5 L 36.488281 24.5 C 36.191406 30.480469 30.703125 33.996094 29.863281 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35.949219 25 C 35.40625 30.191406 30.765625 33.351563 29.722656 34 L 6.503906 34 C 5.695313 32.855469 3.371094 29.246094 3.039063 25 L 8.585938 25 L 10.585938 27 L 26.414063 27 L 28.414063 25 L 35.949219 25 M 37 24 L 28 24 L 26 26 L 11 26 L 9 24 L 2 24 C 2 29.988281 6 35 6 35 L 30 35 C 30 35 37 31.144531 37 24 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 39 L 39 39 L 39 31.878906 C 37.691406 31.613281 36.148438 31 35 31 C 33.542969 31 31.4375 32 30 32 C 28.5625 32 26.457031 31 25 31 C 23.542969 31 21.4375 32 20 32 C 18.5625 32 16.457031 31 15 31 C 13.542969 31 11.4375 32 10 32 C 8.5625 32 6.457031 31 5 31 C 3.851563 31 2.308594 31.613281 1 31.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 32.277344 C 1.863281 32.191406 2.238281 32.085938 2.613281 31.980469 C 3.460938 31.746094 4.335938 31.5 5 31.5 C 5.664063 31.5 6.535156 31.746094 7.382813 31.984375 C 8.28125 32.238281 9.214844 32.5 10 32.5 C 10.785156 32.5 11.71875 32.238281 12.617188 31.984375 C 13.464844 31.746094 14.335938 31.5 15 31.5 C 15.664063 31.5 16.535156 31.746094 17.382813 31.984375 C 18.28125 32.238281 19.214844 32.5 20 32.5 C 20.785156 32.5 21.71875 32.238281 22.617188 31.984375 C 23.464844 31.746094 24.335938 31.5 25 31.5 C 25.664063 31.5 26.535156 31.746094 27.382813 31.984375 C 28.28125 32.238281 29.214844 32.5 30 32.5 C 30.785156 32.5 31.71875 32.238281 32.617188 31.984375 C 33.464844 31.746094 34.335938 31.5 35 31.5 C 35.664063 31.5 36.539063 31.746094 37.386719 31.980469 C 37.761719 32.085938 38.136719 32.191406 38.5 32.277344 "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/car.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 4 28.5 C 2.070313 28.5 0.5 26.929688 0.5 25 L 0.5 19.753906 C 0.5 18.757813 1.175781 17.890625 2.144531 17.652344 L 6.328125 16.421875 L 8.429688 12.875 C 9.296875 11.410156 10.890625 10.5 12.59375 10.5 L 21.992188 10.5 C 23.273438 10.5 24.523438 11.019531 25.425781 11.929688 L 29.730469 16.441406 L 37.914063 18.929688 C 38.851563 19.195313 39.5 20.050781 39.5 21.015625 L 39.5 26.332031 C 39.5 27.527344 38.527344 28.5 37.332031 28.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21.992188 11 C 23.140625 11 24.261719 11.46875 25.058594 12.269531 L 29.277344 16.691406 L 29.457031 16.878906 L 29.707031 16.957031 L 37.785156 19.410156 C 38.503906 19.613281 39 20.273438 39 21.015625 L 39 26.332031 C 39 27.253906 38.253906 28 37.332031 28 L 4 28 C 2.347656 28 1 26.652344 1 25 L 1 19.753906 C 1 18.988281 1.519531 18.320313 2.308594 18.125 L 6.28125 16.960938 L 6.660156 16.847656 L 6.859375 16.511719 L 8.863281 13.128906 C 9.636719 11.816406 11.066406 11 12.59375 11 L 21.992188 11 M 21.992188 10 L 12.59375 10 C 10.707031 10 8.960938 10.996094 8 12.621094 L 6 16 L 2.027344 17.164063 C 0.835938 17.460938 0 18.527344 0 19.753906 L 0 25 C 0 27.210938 1.789063 29 4 29 L 37.332031 29 C 38.804688 29 40 27.804688 40 26.332031 L 40 21.015625 C 40 19.824219 39.210938 18.773438 38.0625 18.449219 L 30 16 L 25.78125 11.578125 C 24.777344 10.570313 23.414063 10 21.992188 10 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 27.5 C 35.5 29.710938 33.710938 31.5 31.5 31.5 C 29.289063 31.5 27.5 29.710938 27.5 27.5 C 27.5 25.289063 29.289063 23.5 31.5 23.5 C 33.710938 23.5 35.5 25.289063 35.5 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 24 C 33.429688 24 35 25.570313 35 27.5 C 35 29.429688 33.429688 31 31.5 31 C 29.570313 31 28 29.429688 28 27.5 C 28 25.570313 29.570313 24 31.5 24 M 31.5 23 C 29.015625 23 27 25.015625 27 27.5 C 27 29.984375 29.015625 32 31.5 32 C 33.984375 32 36 29.984375 36 27.5 C 36 25.015625 33.984375 23 31.5 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 27.5 C 33 28.328125 32.328125 29 31.5 29 C 30.671875 29 30 28.328125 30 27.5 C 30 26.671875 30.671875 26 31.5 26 C 32.328125 26 33 26.671875 33 27.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.5 27.5 C 12.5 29.710938 10.710938 31.5 8.5 31.5 C 6.289063 31.5 4.5 29.710938 4.5 27.5 C 4.5 25.289063 6.289063 23.5 8.5 23.5 C 10.710938 23.5 12.5 25.289063 12.5 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.5 24 C 10.429688 24 12 25.570313 12 27.5 C 12 29.429688 10.429688 31 8.5 31 C 6.570313 31 5 29.429688 5 27.5 C 5 25.570313 6.570313 24 8.5 24 M 8.5 23 C 6.015625 23 4 25.015625 4 27.5 C 4 29.984375 6.015625 32 8.5 32 C 10.984375 32 13 29.984375 13 27.5 C 13 25.015625 10.984375 23 8.5 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 27.5 C 10 28.328125 9.328125 29 8.5 29 C 7.671875 29 7 28.328125 7 27.5 C 7 26.671875 7.671875 26 8.5 26 C 9.328125 26 10 26.671875 10 27.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 5.890625 16.5 L 8.410156 12.90625 C 9.296875 11.410156 10.890625 10.5 12.59375 10.5 L 21.992188 10.5 C 23.273438 10.5 24.523438 11.019531 25.425781 11.929688 L 30.0625 16.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21.992188 11 C 23.140625 11 24.261719 11.46875 25.078125 12.292969 L 28.84375 16 L 6.851563 16 L 8.816406 13.195313 L 8.839844 13.164063 L 8.859375 13.128906 C 9.636719 11.816406 11.066406 11 12.59375 11 L 21.992188 11 M 21.992188 10 L 12.59375 10 C 10.707031 10 8.960938 10.996094 8 12.621094 L 5.394531 16.332031 L 3 17 L 33 17 L 30.605469 16.332031 L 25.78125 11.578125 C 24.777344 10.570313 23.414063 10 21.992188 10 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 16.5 17 L 16.5 10.332031 "></path>
+<path style=" fill:#FFFFFF;" d="M 2.5 23 L 1 23 L 1 20 L 2.5 20 C 3.328125 20 4 20.671875 4 21.5 C 4 22.328125 3.328125 23 2.5 23 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 38.5 21 C 37.671875 21 37 21.671875 37 22.5 C 37 23.328125 37.671875 24 38.5 24 L 39 24 L 39 21.5 C 39 21.324219 38.964844 21.160156 38.921875 21 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/cargo-ship.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 5.5 8 C 5.226563 8 5 7.773438 5 7.5 L 5 1.5 C 5 1.226563 5.226563 1 5.5 1 C 5.773438 1 6 1.226563 6 1.5 L 6 7.5 C 6 7.773438 5.773438 8 5.5 8 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 16.5 7.5 L 22.5 7.5 L 22.5 13.5 L 16.5 13.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 8 L 22 13 L 17 13 L 17 8 L 22 8 M 23 7 L 16 7 L 16 14 L 23 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 22.5 7.5 L 28.5 7.5 L 28.5 13.5 L 22.5 13.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28 8 L 28 13 L 23 13 L 23 8 L 28 8 M 29 7 L 22 7 L 22 14 L 29 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 28.5 7.5 L 34.5 7.5 L 34.5 13.5 L 28.5 13.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34 8 L 34 13 L 29 13 L 29 8 L 34 8 M 35 7 L 28 7 L 28 14 L 35 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 16.5 13.5 L 22.5 13.5 L 22.5 19.5 L 16.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 14 L 22 19 L 17 19 L 17 14 L 22 14 M 23 13 L 16 13 L 16 20 L 23 20 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 22.5 13.5 L 28.5 13.5 L 28.5 19.5 L 22.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28 14 L 28 19 L 23 19 L 23 14 L 28 14 M 29 13 L 22 13 L 22 20 L 29 20 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 28.5 13.5 L 34.5 13.5 L 34.5 19.5 L 28.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34 14 L 34 19 L 29 19 L 29 14 L 34 14 M 35 13 L 28 13 L 28 20 L 35 20 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.5 19.5 L 1.5 6.5 L 12.390625 6.5 L 11.511719 10.902344 L 11.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.78125 7 L 11.019531 10.804688 L 11 10.902344 L 11 19 L 2 19 L 2 7 L 11.78125 7 M 13 6 L 1 6 L 1 20 L 12 20 L 12 11 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.207031 34.558594 C 4.148438 32.5 3.695313 31.261719 3.175781 29.839844 C 2.449219 27.859375 1.550781 25.410156 1.503906 19.5 C 1.503906 19.5 24.003906 19.5 24.007813 19.5 C 24.671875 19.5 27.613281 19.34375 30.222656 16.5 L 38.496094 16.5 C 38.417969 24.304688 36.503906 27.332031 34.957031 29.777344 C 34.015625 31.269531 33.1875 32.574219 33.082031 34.558594 L 19.207031 36.394531 Z "></path>
+<path style=" fill:#4788C7;" d="M 37.988281 17 C 37.835938 24.289063 36.015625 27.171875 34.535156 29.511719 C 33.65625 30.902344 32.820313 32.226563 32.617188 34.117188 L 19.203125 35.890625 L 4.6875 34.113281 C 4.578125 32.21875 4.121094 30.972656 3.644531 29.667969 C 2.914063 27.683594 2.097656 25.453125 2.007813 20 L 23.949219 20 C 23.949219 20 23.992188 20 24.074219 20 C 24.675781 20 27.714844 19.851563 30.4375 17 L 37.988281 17 M 39 16 C 39 16 32.554688 16 30 16 C 27.46875 18.871094 24.574219 19 24.074219 19 C 24.027344 19 24 19 24 19 L 1 19 C 1 29.855469 3.714844 29.59375 3.714844 35 L 19.207031 36.898438 L 33.570313 35 C 33.570313 29.59375 39 29.570313 39 16 Z "></path>
+<path style=" fill:#98CCFD;" d="M 5 9 L 7 9 L 7 12 L 5 12 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.691406 23.5 C 1.5625 22.339844 1.507813 21.199219 1.5 19.5 L 24.300781 19.5 L 24.445313 19.230469 C 24.503906 19.121094 25.921875 16.5 29.5 16.5 L 38.496094 16.5 C 38.472656 19.253906 38.230469 21.503906 37.746094 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 37.988281 17 C 37.945313 19.316406 37.738281 21.257813 37.347656 23 L 2.140625 23 C 2.058594 22.121094 2.019531 21.207031 2.003906 20 L 24 20 L 24.601563 19.992188 L 24.886719 19.464844 C 24.9375 19.363281 26.242188 17 29.5 17 L 37.988281 17 M 39 16 C 39 16 32.054688 16 29.5 16 C 25.554688 16 24 19 24 19 L 1 19 C 1 21.222656 1.0625 22.546875 1.246094 24 L 38.132813 24 C 38.660156 22 39 19.515625 39 16 Z "></path>
+<path style=" fill:#98CCFD;" d="M 30 23 C 30 21.894531 30.894531 21 32 21 L 33 21 C 34.105469 21 35 21.894531 35 23 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 39 L 39 39 L 39 32.878906 C 37.691406 32.613281 36.148438 32 35 32 C 33.542969 32 31.4375 33 30 33 C 28.5625 33 26.457031 32 25 32 C 23.542969 32 21.4375 33 20 33 C 18.5625 33 16.457031 32 15 32 C 13.542969 32 11.4375 33 10 33 C 8.5625 33 6.457031 32 5 32 C 3.851563 32 2.308594 32.613281 1 32.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 33.277344 C 1.863281 33.191406 2.238281 33.085938 2.613281 32.980469 C 3.460938 32.746094 4.335938 32.5 5 32.5 C 5.664063 32.5 6.535156 32.746094 7.382813 32.984375 C 8.28125 33.238281 9.214844 33.5 10 33.5 C 10.785156 33.5 11.71875 33.238281 12.617188 32.984375 C 13.464844 32.746094 14.335938 32.5 15 32.5 C 15.664063 32.5 16.535156 32.746094 17.382813 32.984375 C 18.28125 33.238281 19.214844 33.5 20 33.5 C 20.785156 33.5 21.71875 33.238281 22.617188 32.984375 C 23.464844 32.746094 24.335938 32.5 25 32.5 C 25.664063 32.5 26.535156 32.746094 27.382813 32.984375 C 28.28125 33.238281 29.214844 33.5 30 33.5 C 30.785156 33.5 31.71875 33.238281 32.617188 32.984375 C 33.464844 32.746094 34.335938 32.5 35 32.5 C 35.664063 32.5 36.539063 32.746094 37.386719 32.980469 C 37.761719 33.085938 38.136719 33.191406 38.5 33.277344 "></path>
+<path style=" fill:#98CCFD;" d="M 9 12 L 11 12 L 11 10.902344 L 11.019531 10.804688 L 11.378906 9 L 9 9 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/catamaran.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 19.539063 1.375 L 25.605469 15.417969 L 20.429688 27.460938 "></path>
+<path style=" fill:#DFF0FE;" d="M 2.664063 22.636719 C 7.933594 8.601563 16.949219 3.109375 19.5 1.792969 L 19.5 26.378906 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 2.636719 L 19 25.753906 L 3.339844 22.273438 C 8.136719 9.921875 15.871094 4.433594 19 2.636719 M 20 1 C 20 1 8.25 5.78125 1.996094 23 L 20 27 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 38.5 13 C 38.5 14.378906 37.378906 15.5 36 15.5 C 34.621094 15.5 33.5 14.378906 33.5 13 C 33.5 11.621094 34.621094 10.5 36 10.5 C 37.378906 10.5 38.5 11.621094 38.5 13 Z "></path>
+<path style=" fill:#4788C7;" d="M 36 11 C 37.101563 11 38 11.898438 38 13 C 38 14.101563 37.101563 15 36 15 C 34.898438 15 34 14.101563 34 13 C 34 11.898438 34.898438 11 36 11 M 36 10 C 34.34375 10 33 11.34375 33 13 C 33 14.65625 34.34375 16 36 16 C 37.65625 16 39 14.65625 39 13 C 39 11.34375 37.65625 10 36 10 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 23.855469 30.5 C 23.554688 30.5 23.257813 30.394531 23.019531 30.203125 C 22.722656 29.964844 22.546875 29.621094 22.523438 29.242188 C 22.503906 28.859375 22.636719 28.503906 22.90625 28.230469 L 26.769531 24.8125 C 26.933594 24.652344 27.039063 24.578125 27.148438 24.539063 L 27.285156 24.5 L 30.324219 24.5 L 32.113281 20.5 L 29.203125 20.5 C 28.984375 20.5 28.777344 20.429688 28.601563 20.300781 L 25.140625 18.125 C 24.867188 17.910156 24.664063 17.5625 24.613281 17.171875 C 24.566406 16.777344 24.671875 16.390625 24.914063 16.078125 C 25.195313 15.71875 25.617188 15.511719 26.074219 15.511719 C 26.394531 15.511719 26.699219 15.613281 26.957031 15.808594 L 29.863281 17.5 L 35.820313 17.5 C 36.3125 17.5 36.753906 17.734375 37.027344 18.144531 C 37.304688 18.550781 37.355469 19.042969 37.171875 19.496094 C 36.007813 22.382813 34.3125 26.558594 34.3125 26.558594 C 34.191406 26.835938 34.003906 27.078125 33.753906 27.261719 C 33.558594 27.40625 33.304688 27.449219 32.980469 27.496094 L 32.871094 27.519531 C 32.851563 27.515625 31.933594 27.515625 31.65625 27.515625 C 30.457031 27.515625 28.804688 27.507813 28.226563 27.503906 L 27.941406 27.5 L 24.835938 30.078125 C 24.546875 30.359375 24.214844 30.5 23.855469 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 26.074219 16.011719 C 26.285156 16.011719 26.488281 16.078125 26.65625 16.207031 L 26.703125 16.242188 L 26.753906 16.269531 L 29.496094 17.863281 L 29.730469 18 L 35.820313 18 C 36.144531 18 36.433594 18.152344 36.613281 18.421875 C 36.792969 18.6875 36.828125 19.011719 36.707031 19.308594 C 35.546875 22.1875 33.855469 26.351563 33.855469 26.351563 C 33.765625 26.554688 33.632813 26.726563 33.453125 26.859375 C 33.355469 26.929688 33.144531 26.964844 32.898438 27.003906 L 32.882813 27.003906 C 32.800781 27.007813 32.53125 27.011719 31.648438 27.011719 C 30.371094 27.011719 28.582031 27.003906 28.125 27 L 27.761719 26.996094 L 27.480469 27.230469 L 24.515625 29.695313 L 24.480469 29.722656 L 24.445313 29.757813 C 24.289063 29.914063 24.078125 30 23.855469 30 C 23.722656 30 23.523438 29.96875 23.335938 29.816406 C 23.148438 29.664063 23.039063 29.453125 23.023438 29.214844 C 23.011719 28.984375 23.089844 28.769531 23.242188 28.601563 L 27.101563 25.1875 L 27.125 25.167969 L 27.148438 25.144531 C 27.257813 25.035156 27.300781 25.015625 27.308594 25.011719 L 27.351563 25 L 30.648438 25 L 30.914063 24.40625 L 32.253906 21.40625 L 32.882813 20 L 29.203125 20 C 29.128906 20 29.015625 19.984375 28.902344 19.898438 L 28.871094 19.875 L 28.835938 19.851563 L 25.453125 17.730469 C 25.265625 17.574219 25.144531 17.351563 25.113281 17.105469 C 25.078125 16.847656 25.148438 16.589844 25.3125 16.386719 C 25.496094 16.148438 25.773438 16.011719 26.074219 16.011719 M 26.074219 15.011719 C 25.488281 15.011719 24.910156 15.273438 24.519531 15.769531 C 23.847656 16.636719 24.007813 17.882813 24.875 18.546875 L 28.304688 20.699219 C 28.574219 20.902344 28.890625 21 29.203125 21 C 29.253906 21 29.433594 21 29.472656 21 L 31.339844 21 L 30 24 L 27.285156 24 C 27.210938 24 27.085938 24.011719 26.988281 24.066406 C 26.777344 24.140625 26.609375 24.269531 26.441406 24.441406 L 22.550781 27.878906 C 21.789063 28.652344 21.863281 29.914063 22.707031 30.59375 C 23.042969 30.867188 23.449219 31 23.855469 31 C 24.328125 31 24.796875 30.820313 25.152344 30.464844 L 28.121094 28 C 28.578125 28.003906 30.371094 28.011719 31.652344 28.011719 C 32.390625 28.011719 32.960938 28.011719 33 28 C 33.382813 27.9375 33.742188 27.890625 34.050781 27.660156 C 34.359375 27.433594 34.613281 27.125 34.773438 26.746094 C 34.773438 26.746094 36.472656 22.570313 37.636719 19.683594 C 38.15625 18.398438 37.207031 17 35.820313 17 L 30 17 L 27.257813 15.40625 C 26.902344 15.140625 26.488281 15.011719 26.074219 15.011719 Z "></path>
+<path style=" fill:#4788C7;" d="M 11 27 L 29 27 L 29 28 L 11 28 Z "></path>
+<path style=" fill:#98CCFD;" d="M 31 34.5 C 29.539063 34.5 27.671875 31.171875 27.511719 27.5 L 34.488281 27.5 C 34.328125 31.171875 32.460938 34.5 31 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 33.957031 28 C 33.667969 31.292969 32.027344 34 31 34 C 29.972656 34 28.332031 31.292969 28.042969 28 L 33.957031 28 M 35 27 L 27 27 C 27 30.839844 28.953125 35 31 35 C 33.046875 35 35 30.839844 35 27 Z "></path>
+<path style=" fill:#98CCFD;" d="M 9 34.5 C 7.539063 34.5 5.671875 31.171875 5.511719 27.5 L 12.488281 27.5 C 12.328125 31.171875 10.460938 34.5 9 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.957031 28 C 11.667969 31.292969 10.027344 34 9 34 C 7.972656 34 6.332031 31.292969 6.042969 28 L 11.957031 28 M 13 27 L 5 27 C 5 30.839844 6.953125 35 9 35 C 11.046875 35 13 30.839844 13 27 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 38 L 39 38 L 39 32.878906 C 37.691406 32.613281 36.148438 32 35 32 C 33.542969 32 31.4375 33 30 33 C 28.5625 33 26.457031 32 25 32 C 23.542969 32 21.4375 33 20 33 C 18.5625 33 16.457031 32 15 32 C 13.542969 32 11.4375 33 10 33 C 8.5625 33 6.457031 32 5 32 C 3.851563 32 2.308594 32.613281 1 32.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 33.277344 C 1.863281 33.191406 2.238281 33.085938 2.613281 32.980469 C 3.460938 32.746094 4.335938 32.5 5 32.5 C 5.664063 32.5 6.535156 32.746094 7.382813 32.984375 C 8.28125 33.238281 9.214844 33.5 10 33.5 C 10.785156 33.5 11.71875 33.238281 12.617188 32.984375 C 13.464844 32.746094 14.335938 32.5 15 32.5 C 15.664063 32.5 16.535156 32.746094 17.382813 32.984375 C 18.28125 33.238281 19.214844 33.5 20 33.5 C 20.785156 33.5 21.71875 33.238281 22.617188 32.984375 C 23.464844 32.746094 24.335938 32.5 25 32.5 C 25.664063 32.5 26.535156 32.746094 27.382813 32.984375 C 28.28125 33.238281 29.214844 33.5 30 33.5 C 30.785156 33.5 31.71875 33.238281 32.617188 32.984375 C 33.464844 32.746094 34.335938 32.5 35 32.5 C 35.664063 32.5 36.539063 32.746094 37.386719 32.980469 C 37.761719 33.085938 38.136719 33.191406 38.5 33.277344 "></path>
+<path style=" fill:#4788C7;" d="M 34 26 L 35 26 L 35 27 L 34 27 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/clone.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2 2.4V16.8H2.4V2.4H13.2ZM13.2 0H2.4C1.08 0 0 1.08 0 2.4V16.8C0 18.12 1.08 19.2 2.4 19.2H13.2C14.52 19.2 15.6 18.12 15.6 16.8V2.4C15.6 1.08 14.52 0 13.2 0Z" transform="translate(10.7998 8.80005)" fill="black"/>
+<path d="M2.4 18V2.4H14.4V0H2.4C1.08 0 0 1.08 0 2.4V18H2.4Z" transform="translate(6 4)" fill="black"/>
+</svg>

src/assets/icons/close.svg

+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 5H9V9H5V11H9V15H11V11H15V9H11V5ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" transform="translate(10.9707 -3.17157) rotate(45)" fill="#BDBDBD"/>
+</svg>

src/assets/icons/convertible.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 9.441406 19.5 L 8.511719 12.101563 C 8.484375 11.933594 8.523438 11.789063 8.617188 11.675781 C 8.714844 11.5625 8.851563 11.5 9 11.5 L 11.097656 11.5 C 11.316406 11.5 11.503906 11.636719 11.574219 11.84375 L 14.292969 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.097656 12 L 11.105469 12.019531 L 13.585938 19 L 9.882813 19 L 9 12 L 11.097656 12 M 11.097656 11 L 9 11 C 8.382813 11 7.910156 11.554688 8.015625 12.164063 L 9 20 L 15 20 L 12.046875 11.683594 C 11.910156 11.273438 11.527344 11 11.097656 11 Z "></path>
+<path style=" fill:#98CCFD;" d="M 3 27.5 C 1.621094 27.5 0.5 26.378906 0.5 25 L 0.5 19.167969 C 0.5 18.085938 1.1875 17.132813 2.214844 16.792969 L 7.976563 14.546875 L 11.882813 16.5 L 24.117188 16.5 L 28.03125 14.542969 L 37.773438 18.121094 C 38.8125 18.464844 39.5 19.417969 39.5 20.496094 L 39.5 25 C 39.5 26.378906 38.378906 27.5 37 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28.0625 15.089844 L 37.628906 18.601563 C 38.449219 18.871094 39 19.636719 39 20.5 L 39 25 C 39 26.101563 38.101563 27 37 27 L 3 27 C 1.898438 27 1 26.101563 1 25 L 1 19.167969 C 1 18.304688 1.550781 17.539063 2.371094 17.269531 L 2.398438 17.261719 L 2.421875 17.25 L 7.949219 15.09375 L 11.554688 16.894531 L 11.765625 17 L 24.234375 17 L 24.445313 16.894531 L 28.0625 15.089844 M 28 14 L 24 16 L 12 16 L 8 14 L 2.058594 16.320313 C 0.828125 16.726563 0 17.875 0 19.167969 L 0 25 C 0 26.65625 1.34375 28 3 28 L 37 28 C 38.65625 28 40 26.65625 40 25 L 40 20.5 C 40 19.207031 39.171875 18.058594 37.945313 17.652344 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 26.5 C 35.5 28.710938 33.710938 30.5 31.5 30.5 C 29.289063 30.5 27.5 28.710938 27.5 26.5 C 27.5 24.289063 29.289063 22.5 31.5 22.5 C 33.710938 22.5 35.5 24.289063 35.5 26.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 23 C 33.429688 23 35 24.570313 35 26.5 C 35 28.429688 33.429688 30 31.5 30 C 29.570313 30 28 28.429688 28 26.5 C 28 24.570313 29.570313 23 31.5 23 M 31.5 22 C 29.015625 22 27 24.015625 27 26.5 C 27 28.984375 29.015625 31 31.5 31 C 33.984375 31 36 28.984375 36 26.5 C 36 24.015625 33.984375 22 31.5 22 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 26.5 C 33 27.328125 32.328125 28 31.5 28 C 30.671875 28 30 27.328125 30 26.5 C 30 25.671875 30.671875 25 31.5 25 C 32.328125 25 33 25.671875 33 26.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.5 26.5 C 12.5 28.710938 10.710938 30.5 8.5 30.5 C 6.289063 30.5 4.5 28.710938 4.5 26.5 C 4.5 24.289063 6.289063 22.5 8.5 22.5 C 10.710938 22.5 12.5 24.289063 12.5 26.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.5 23 C 10.429688 23 12 24.570313 12 26.5 C 12 28.429688 10.429688 30 8.5 30 C 6.570313 30 5 28.429688 5 26.5 C 5 24.570313 6.570313 23 8.5 23 M 8.5 22 C 6.015625 22 4 24.015625 4 26.5 C 4 28.984375 6.015625 31 8.5 31 C 10.984375 31 13 28.984375 13 26.5 C 13 24.015625 10.984375 22 8.5 22 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 23.5 9.5 L 28 14.480469 "></path>
+<path style=" fill:#4788C7;" d="M 10 26.5 C 10 27.328125 9.328125 28 8.5 28 C 7.671875 28 7 27.328125 7 26.5 C 7 25.671875 7.671875 25 8.5 25 C 9.328125 25 10 25.671875 10 26.5 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 2.5 22 L 1 22 L 1 19 L 2.5 19 C 3.328125 19 4 19.671875 4 20.5 C 4 21.328125 3.328125 22 2.5 22 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 38.5 20 C 37.671875 20 37 20.671875 37 21.5 C 37 22.328125 37.671875 23 38.5 23 L 39 23 L 39 20.5 C 39 20.324219 38.964844 20.160156 38.921875 20 Z "></path>
+<path style=" fill:#4788C7;" d="M 20.5 20 L 18.5 20 C 18.222656 20 18 19.777344 18 19.5 C 18 19.222656 18.222656 19 18.5 19 L 20.5 19 C 20.777344 19 21 19.222656 21 19.5 C 21 19.777344 20.777344 20 20.5 20 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/delete.svg

+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.2727 20.7273H2.18182C0.981818 20.7273 0 19.7455 0 18.5455V0H17.4545V18.5455C17.4545 19.7455 16.4727 20.7273 15.2727 20.7273Z" transform="translate(7.18164 7.27271)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M21.8182 0H0" transform="translate(5 7.27271)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M0 3.27273V1.09091C0 0.436364 0.436364 0 1.09091 0H5.45455C6.10909 0 6.54545 0.436364 6.54545 1.09091V3.27273" transform="translate(12.6367 4)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M0 12V0" transform="translate(15.9092 11.6364)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M0 12V0" transform="translate(20.2725 11.6364)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M0 12V0" transform="translate(11.5459 11.6364)" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
+</svg>

src/assets/icons/drone.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 8.5 3 C 8.222656 3 8 3.222656 8 3.5 L 8 9.5 C 8 9.777344 8.222656 10 8.5 10 C 8.777344 10 9 9.777344 9 9.5 L 9 3.5 C 9 3.222656 8.777344 3 8.5 3 Z "></path>
+<path style=" fill:#4788C7;" d="M 1.5 5 L 15.5 5 C 15.777344 5 16 4.777344 16 4.5 C 16 4.222656 15.777344 4 15.5 4 L 1.5 4 C 1.222656 4 1 4.222656 1 4.5 C 1 4.777344 1.222656 5 1.5 5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 3 C 31.222656 3 31 3.222656 31 3.5 L 31 9.5 C 31 9.777344 31.222656 10 31.5 10 C 31.777344 10 32 9.777344 32 9.5 L 32 3.5 C 32 3.222656 31.777344 3 31.5 3 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 4.5 36.5 L 4.5 29 C 4.5 21.585938 10.585938 16 18 16 L 22 16 C 29.414063 16 35.5 21.585938 35.5 29 L 35.5 36.5 "></path>
+<path style=" fill:#B6DCFE;" d="M 15.371094 19.5 C 14.285156 19.5 13.367188 18.722656 13.1875 17.648438 L 12.628906 13.023438 L 7.046875 12.503906 C 5.210938 12.351563 4.5 11.558594 4.5 9.683594 L 4.5 9.355469 C 4.5 8.882813 4.882813 8.5 5.355469 8.5 L 34.644531 8.5 C 35.117188 8.5 35.5 8.882813 35.5 9.355469 L 35.5 9.683594 C 35.5 11.558594 34.789063 12.347656 32.957031 12.503906 L 27.316406 13.027344 L 26.527344 17.648438 C 26.347656 18.722656 25.429688 19.5 24.34375 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34.644531 9 C 34.839844 9 35 9.160156 35 9.355469 L 35 9.683594 C 35 11.308594 34.492188 11.871094 32.90625 12.003906 L 27.652344 12.496094 L 26.886719 12.566406 L 26.757813 13.320313 L 26.035156 17.566406 C 25.894531 18.398438 25.183594 19 24.34375 19 L 15.371094 19 C 14.53125 19 13.816406 18.398438 13.6875 17.613281 L 13.171875 13.363281 L 13.074219 12.5625 L 12.273438 12.488281 L 7.082031 12.003906 C 5.507813 11.871094 5 11.308594 5 9.683594 L 5 9.355469 C 5 9.160156 5.160156 9 5.355469 9 L 34.644531 9 M 34.644531 8 L 5.355469 8 C 4.605469 8 4 8.609375 4 9.355469 L 4 9.683594 C 4 11.800781 4.890625 12.824219 7 13 L 12.179688 13.484375 L 12.695313 17.730469 C 12.910156 19.039063 14.042969 20 15.371094 20 L 24.34375 20 C 25.671875 20 26.804688 19.039063 27.019531 17.730469 L 27.746094 13.492188 L 33 13 C 35.109375 12.824219 36 11.800781 36 9.683594 L 36 9.355469 C 36 8.609375 35.390625 8 34.644531 8 Z "></path>
+<path style=" fill:#4788C7;" d="M 24.5 5 L 38.5 5 C 38.777344 5 39 4.777344 39 4.5 C 39 4.222656 38.777344 4 38.5 4 L 24.5 4 C 24.222656 4 24 4.222656 24 4.5 C 24 4.777344 24.222656 5 24.5 5 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 27 9 L 30 9 L 30 11 L 27 11 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 10 9 L 13 9 L 13 11 L 10 11 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/fighter-plane.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 13.5 9.5 L 13.5 6.5 L 21 6.5 C 21.726563 6.5 23.132813 7.304688 24.140625 7.996094 C 23.117188 8.691406 21.699219 9.5 21 9.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21 7 C 21.4375 7 22.335938 7.4375 23.226563 7.996094 C 22.320313 8.554688 21.40625 9 21 9 L 14 9 L 14 7 L 21 7 M 21 6 C 19.632813 6 13 6 13 6 L 13 10 C 13 10 19.675781 10 21 10 C 22.324219 10 25 8 25 8 C 25 8 22.367188 6 21 6 Z "></path>
+<path style=" fill:#98CCFD;" d="M 13.5 33.5 L 13.5 30.5 L 21 30.5 C 21.726563 30.5 23.132813 31.304688 24.140625 31.996094 C 23.117188 32.691406 21.699219 33.5 21 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21 31 C 21.4375 31 22.335938 31.4375 23.226563 31.996094 C 22.320313 32.554688 21.40625 33 21 33 L 14 33 L 14 31 L 21 31 M 21 30 C 19.632813 30 13 30 13 30 L 13 34 C 13 34 19.675781 34 21 34 C 22.324219 34 25 32 25 32 C 25 32 22.367188 30 21 30 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.691406 27.5 L 3.5 22.082031 L 3.5 17.917969 L 1.691406 12.5 L 3.792969 12.5 L 7.5 16.207031 L 7.5 23.792969 L 3.792969 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 3.585938 13 L 7 16.414063 L 7 23.585938 L 3.585938 27 L 2.386719 27 L 3.949219 22.316406 L 4 22.160156 L 4 17.839844 L 3.949219 17.683594 L 2.386719 13 L 3.585938 13 M 4 12 L 1 12 L 3 18 L 3 22 L 1 28 L 4 28 L 8 24 L 8 16 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 9.5 38.5 L 9.5 1.5 L 11.761719 1.5 L 23.5 16.175781 L 23.5 23.824219 L 11.761719 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.519531 2 L 23 16.351563 L 23 23.648438 L 11.519531 38 L 10 38 L 10 2 L 11.519531 2 M 12 1 L 9 1 L 9 39 L 12 39 L 24 24 L 24 16 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 6 23.5 C 4.621094 23.5 3.5 22.378906 3.5 21 L 3.5 19 C 3.5 17.621094 4.621094 16.5 6 16.5 L 27 16.5 C 34.503906 16.5 37.546875 19.121094 38.351563 19.996094 C 37.539063 20.867188 34.464844 23.5 27 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 27 17 C 33.453125 17 36.507813 19 37.632813 20 C 36.503906 21.003906 33.449219 23 27 23 L 6 23 C 4.898438 23 4 22.101563 4 21 L 4 19 C 4 17.898438 4.898438 17 6 17 L 27 17 M 27 16 L 6 16 C 4.34375 16 3 17.34375 3 19 L 3 21 C 3 22.65625 4.34375 24 6 24 L 27 24 C 36.332031 24 39 20 39 20 C 39 20 36.332031 16 27 16 Z "></path>
+<path style=" fill:#4788C7;" d="M 7 21 L 1 21 C 0.449219 21 0 20.550781 0 20 C 0 19.449219 0.449219 19 1 19 L 7 19 C 7.550781 19 8 19.449219 8 20 C 8 20.550781 7.550781 21 7 21 Z "></path>
+<path style=" fill:#4788C7;" d="M 14 2 L 10.667969 2 L 10.667969 1 L 13.332031 1 Z "></path>
+<path style=" fill:#4788C7;" d="M 14 38 L 10 38 L 10 39 L 13.332031 39 Z "></path>
+<path style=" fill:#4788C7;" d="M 29 21 L 27 21 C 26.449219 21 26 20.550781 26 20 C 26 19.449219 26.449219 19 27 19 L 29 19 C 29.550781 19 30 19.449219 30 20 C 30 20.550781 29.550781 21 29 21 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.5 1 L 15.5 1 C 15.773438 1 16 1.226563 16 1.5 C 16 1.773438 15.773438 2 15.5 2 L 11.5 2 C 11.226563 2 11 1.773438 11 1.5 C 11 1.226563 11.226563 1 11.5 1 Z "></path>
+<path style=" fill:#4788C7;" d="M 13.5 38 L 15.5 38 C 15.773438 38 16 38.226563 16 38.5 C 16 38.773438 15.773438 39 15.5 39 L 13.5 39 C 13.226563 39 13 38.773438 13 38.5 C 13 38.226563 13.226563 38 13.5 38 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/fire-truck.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 23.53125 4.148438 L 27.21875 8.457031 L 1 15.746094 L 1 11.148438 L 23.53125 4.148438 M 23.863281 3 L 0 10.410156 L 0 17.0625 L 29 9 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 23.605469 3.847656 L 21.546875 10.03125 L 15.585938 6.386719 L 13.460938 12.421875 L 8.066406 8.707031 L 5.640625 14.746094 L 0.667969 10.902344 "></path>
+<path style=" fill:#98CCFD;" d="M 3 34.5 C 1.621094 34.5 0.5 33.378906 0.5 32 L 0.5 16.5 L 3.859375 16.5 L 8.5 19.28125 L 8.5 22.5 L 16.5 22.5 L 16.5 14 C 16.5 12.621094 17.621094 11.5 19 11.5 L 33.972656 11.5 C 34.96875 11.5 35.867188 12.089844 36.265625 13.003906 L 39.105469 19.191406 C 39.367188 19.792969 39.5 20.441406 39.5 21.109375 L 39.5 32 C 39.5 33.378906 38.378906 34.5 37 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 33.972656 12 C 34.769531 12 35.488281 12.472656 35.816406 13.21875 L 38.640625 19.382813 C 38.878906 19.929688 39 20.511719 39 21.109375 L 39 32 C 39 33.101563 38.101563 34 37 34 L 3 34 C 1.898438 34 1 33.101563 1 32 L 1 17 L 3.722656 17 L 8 19.566406 L 8 23 L 17 23 L 17 14 C 17 12.898438 17.898438 12 19 12 L 33.972656 12 M 33.972656 11 L 19 11 C 17.34375 11 16 12.34375 16 14 L 16 22 L 9 22 L 9 19 L 4 16 L 0 16 L 0 32 C 0 33.65625 1.34375 35 3 35 L 37 35 C 38.65625 35 40 33.65625 40 32 L 40 21.109375 C 40 20.378906 39.847656 19.652344 39.558594 18.980469 L 36.722656 12.804688 C 36.246094 11.707031 35.167969 11 33.972656 11 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 32 22.5 C 31.171875 22.5 30.5 21.828125 30.5 21 L 30.5 16 C 30.5 15.171875 31.171875 14.5 32 14.5 L 36.929688 14.5 L 39.105469 19.191406 C 39.367188 19.792969 39.5 20.441406 39.5 21.109375 L 39.5 22.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.609375 15 L 38.640625 19.382813 C 38.878906 19.929688 39 20.511719 39 21.109375 L 39 22 L 32 22 C 31.449219 22 31 21.550781 31 21 L 31 16 C 31 15.449219 31.449219 15 32 15 L 36.609375 15 M 37.25 14 L 32 14 C 30.894531 14 30 14.894531 30 16 L 30 21 C 30 22.105469 30.894531 23 32 23 L 40 23 L 40 21.109375 C 40 20.378906 39.847656 19.652344 39.558594 18.980469 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 33.5 C 35.5 35.710938 33.710938 37.5 31.5 37.5 C 29.289063 37.5 27.5 35.710938 27.5 33.5 C 27.5 31.289063 29.289063 29.5 31.5 29.5 C 33.710938 29.5 35.5 31.289063 35.5 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 30 C 33.429688 30 35 31.570313 35 33.5 C 35 35.429688 33.429688 37 31.5 37 C 29.570313 37 28 35.429688 28 33.5 C 28 31.570313 29.570313 30 31.5 30 M 31.5 29 C 29.015625 29 27 31.015625 27 33.5 C 27 35.984375 29.015625 38 31.5 38 C 33.984375 38 36 35.984375 36 33.5 C 36 31.015625 33.984375 29 31.5 29 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 33.5 C 33 34.328125 32.328125 35 31.5 35 C 30.671875 35 30 34.328125 30 33.5 C 30 32.671875 30.671875 32 31.5 32 C 32.328125 32 33 32.671875 33 33.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 11.5 33.5 C 11.5 35.710938 9.710938 37.5 7.5 37.5 C 5.289063 37.5 3.5 35.710938 3.5 33.5 C 3.5 31.289063 5.289063 29.5 7.5 29.5 C 9.710938 29.5 11.5 31.289063 11.5 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 7.5 30 C 9.429688 30 11 31.570313 11 33.5 C 11 35.429688 9.429688 37 7.5 37 C 5.570313 37 4 35.429688 4 33.5 C 4 31.570313 5.570313 30 7.5 30 M 7.5 29 C 5.015625 29 3 31.015625 3 33.5 C 3 35.984375 5.015625 38 7.5 38 C 9.984375 38 12 35.984375 12 33.5 C 12 31.015625 9.984375 29 7.5 29 Z "></path>
+<path style=" fill:#4788C7;" d="M 9 33.5 C 9 34.328125 8.328125 35 7.5 35 C 6.671875 35 6 34.328125 6 33.5 C 6 32.671875 6.671875 32 7.5 32 C 8.328125 32 9 32.671875 9 33.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 22 22.5 C 21.171875 22.5 20.5 21.828125 20.5 21 L 20.5 16 C 20.5 15.171875 21.171875 14.5 22 14.5 L 26 14.5 C 26.828125 14.5 27.5 15.171875 27.5 16 L 27.5 21 C 27.5 21.828125 26.828125 22.5 26 22.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 26 15 C 26.550781 15 27 15.449219 27 16 L 27 21 C 27 21.550781 26.550781 22 26 22 L 22 22 C 21.449219 22 21 21.550781 21 21 L 21 16 C 21 15.449219 21.449219 15 22 15 L 26 15 M 26 14 L 22 14 C 20.894531 14 20 14.894531 20 16 L 20 21 C 20 22.105469 20.894531 23 22 23 L 26 23 C 27.105469 23 28 22.105469 28 21 L 28 16 C 28 14.894531 27.105469 14 26 14 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 1 25 L 39 25 L 39 27 L 1 27 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/horseback-riding.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#B6DCFE;" d="M 29.304688 37.5 L 27.367188 30.503906 L 26.570313 21.519531 L 28.792969 20.3125 L 29.5 30.035156 L 31.359375 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28.351563 21.121094 L 29.003906 30.074219 L 29.007813 30.160156 L 29.027344 30.242188 L 30.71875 37 L 29.683594 37 L 27.871094 30.460938 L 27.097656 21.800781 L 28.351563 21.121094 M 29.234375 19.503906 L 26.042969 21.234375 L 26.882813 30.640625 L 28.921875 38 L 32 38 L 30 30 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.523438 38 L 31.09375 38 C 31.054688 37.484375 30.699219 36.4375 30.625 36 L 29.015625 36 C 29.109375 36.4375 29.476563 37.484375 29.523438 38 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 3.386719 29.378906 C 2.234375 27.75 0.5 24.828125 0.5 22.042969 C 0.5 17.703125 2.378906 15.503906 6.085938 15.503906 C 7.683594 15.503906 9.226563 15.917969 10.089844 16.203125 L 9.789063 16.503906 C 8.246094 16.554688 6.953125 17.152344 5.9375 18.289063 C 3.40625 21.121094 3.269531 26.605469 3.386719 29.378906 Z "></path>
+<path style=" fill:#4788C7;" d="M 6.085938 16.003906 C 6.84375 16.003906 7.59375 16.101563 8.257813 16.234375 C 7.222656 16.53125 6.324219 17.105469 5.566406 17.953125 C 3.390625 20.390625 2.902344 24.644531 2.863281 27.65625 C 1.929688 26.082031 1 24.015625 1 22.042969 C 1 17.976563 2.664063 16.003906 6.085938 16.003906 M 6.085938 15.003906 C 3.15625 15.003906 0 16.328125 0 22.042969 C 0 26.425781 4 31 4 31 C 4 31 2.417969 17 10 17 L 11 16 C 11 16 8.628906 15.003906 6.085938 15.003906 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 12.441406 37.5 L 11.257813 28.144531 C 11.496094 27.535156 12.492188 24.835938 12.855469 21.832031 L 16.148438 22.539063 C 15.964844 25.523438 13.804688 27.617188 13.78125 27.640625 L 13.605469 27.808594 L 14.574219 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 13.277344 22.433594 L 15.605469 22.933594 C 15.273438 25.484375 13.457031 27.257813 13.4375 27.273438 L 13.082031 27.613281 L 13.132813 28.101563 L 14.019531 37 L 12.882813 37 L 11.769531 28.207031 C 12.054688 27.449219 12.886719 25.109375 13.277344 22.433594 M 12.414063 21.222656 C 12.09375 24.757813 10.746094 28.078125 10.746094 28.078125 L 12 38 L 15.125 38 L 14.125 28 C 14.125 28 16.660156 25.601563 16.660156 22.136719 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 23.269531 38.5 L 22.335938 31.011719 L 23 27.28125 L 22.355469 27.332031 C 22.011719 27.359375 21.671875 27.371094 21.335938 27.371094 C 16.449219 27.371094 12.445313 24.617188 12.40625 24.589844 L 11.890625 24.230469 L 11.65625 24.816406 C 10.394531 27.96875 8.78125 29.632813 8.765625 29.652344 L 8.640625 29.773438 L 7.671875 38.5 L 5.542969 38.5 L 6.320313 29.367188 L 7.546875 24.890625 L 7.394531 24.691406 C 7.375 24.667969 5.5 22.230469 5.5 20 C 5.5 15.203125 8.464844 13.5 11 13.5 C 12.238281 13.5 13.609375 14.003906 14.9375 14.488281 C 16.289063 14.984375 17.691406 15.5 19 15.5 C 20.921875 15.5 22.070313 15.113281 22.503906 14.316406 C 22.789063 13.796875 22.671875 13.238281 22.511719 12.894531 C 22.628906 11.746094 23.59375 4.5 29.546875 4.5 C 31.308594 4.5 32.78125 6.316406 32.796875 6.335938 L 37.367188 12.128906 C 37.542969 12.347656 37.554688 12.804688 37.324219 13.035156 L 36.332031 13.941406 C 35.839844 13.714844 34.859375 13.335938 33.804688 13.335938 L 32.90625 13.34375 C 31.910156 13.34375 31.257813 13.222656 30.636719 12.566406 L 30.074219 11.980469 L 29.800781 12.742188 C 28.753906 15.671875 29.066406 17.554688 29.347656 19.21875 C 29.480469 20.023438 29.609375 20.78125 29.554688 21.578125 C 29.410156 23.800781 28.183594 26.195313 26.113281 26.476563 L 25.78125 26.523438 L 24.636719 30.898438 L 25.445313 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.546875 5 C 30.804688 5 32.039063 6.191406 32.402344 6.644531 L 36.976563 12.441406 C 37.011719 12.492188 37.007813 12.640625 37.003906 12.648438 L 36.234375 13.355469 C 35.65625 13.117188 34.769531 12.835938 33.804688 12.835938 C 33.644531 12.835938 33.484375 12.839844 33.328125 12.84375 C 33.183594 12.84375 33.042969 12.847656 32.90625 12.847656 C 32.011719 12.847656 31.5 12.753906 30.996094 12.222656 L 29.878906 11.046875 L 29.332031 12.574219 C 28.238281 15.625 28.578125 17.660156 28.851563 19.300781 C 28.988281 20.109375 29.105469 20.804688 29.058594 21.546875 C 28.929688 23.515625 27.832031 25.738281 26.046875 25.984375 L 25.382813 26.074219 L 25.214844 26.722656 L 24.179688 30.6875 L 24.132813 30.863281 L 24.152344 31.046875 L 24.886719 38 L 23.710938 38 L 22.839844 31.027344 L 23.378906 28.003906 L 23.605469 26.730469 L 22.3125 26.832031 C 21.992188 26.859375 21.660156 26.871094 21.335938 26.871094 C 16.617188 26.871094 12.730469 24.207031 12.691406 24.179688 L 11.660156 23.457031 L 11.191406 24.628906 C 9.972656 27.675781 8.421875 29.285156 8.410156 29.296875 L 8.164063 29.542969 L 8.125 29.890625 L 7.226563 38 L 6.089844 38 L 6.8125 29.5 L 7.964844 25.261719 L 8.097656 24.777344 L 7.789063 24.386719 C 7.289063 23.746094 6 21.714844 6 20 C 6 15.570313 8.691406 14 11 14 C 12.148438 14 13.476563 14.488281 14.765625 14.960938 C 16.160156 15.472656 17.601563 16 19 16 C 21.121094 16 22.410156 15.527344 22.941406 14.558594 C 23.273438 13.953125 23.214844 13.304688 23.023438 12.816406 C 23.183594 11.414063 24.214844 5 29.546875 5 M 29.546875 4 C 22.667969 4 22 13 22 13 C 22 13 23.277344 15 19 15 C 16.523438 15 13.613281 13 11 13 C 8.210938 13 5 14.941406 5 20 C 5 22.433594 7 25 7 25 L 5.824219 29.324219 L 5 39 L 8.121094 39 L 9.121094 30 C 9.121094 30 10.800781 28.300781 12.121094 25 C 12.121094 25 16.222656 27.871094 21.335938 27.871094 C 21.683594 27.871094 22.035156 27.859375 22.394531 27.828125 L 21.828125 31 L 22.828125 39 L 26 39 L 25.144531 30.9375 L 26.179688 26.972656 C 28.574219 26.644531 29.902344 23.945313 30.054688 21.609375 C 30.21875 19.085938 28.75 17.152344 30.269531 12.910156 C 31.066406 13.746094 31.933594 13.84375 32.902344 13.84375 C 33.195313 13.84375 33.496094 13.835938 33.804688 13.835938 C 35.164063 13.835938 36.414063 14.542969 36.414063 14.542969 L 37.679688 13.386719 C 38.089844 12.976563 38.089844 12.234375 37.761719 11.820313 L 33.1875 6.023438 C 33.1875 6.023438 31.578125 4 29.546875 4 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 21.175781 14.898438 C 22.035156 14.097656 22.429688 12.585938 22.867188 10.902344 C 23.765625 7.464844 24.785156 3.566406 29.867188 3.5 L 30.917969 4.105469 L 31.144531 4.015625 C 31.535156 3.855469 31.882813 3.777344 32.183594 3.777344 C 32.75 3.777344 33.09375 4.0625 33.453125 4.363281 C 33.703125 4.566406 33.976563 4.796875 34.320313 4.898438 C 33.972656 5.5625 33.226563 6.027344 32.410156 6.027344 C 32.285156 6.027344 32.15625 6.015625 32.027344 5.996094 C 31.753906 5.976563 31.546875 5.972656 31.351563 5.972656 C 27.5625 5.972656 26.828125 7.949219 26.117188 9.863281 C 25.632813 11.167969 25.128906 12.515625 23.695313 13.601563 C 22.8125 14.273438 21.855469 14.761719 21.175781 14.898438 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.738281 4.003906 L 30.457031 4.417969 L 30.878906 4.660156 L 31.328125 4.476563 C 31.660156 4.34375 31.945313 4.277344 32.183594 4.277344 C 32.550781 4.277344 32.761719 4.4375 33.132813 4.746094 C 33.257813 4.847656 33.398438 4.964844 33.558594 5.074219 C 33.273438 5.339844 32.875 5.527344 32.410156 5.527344 C 32.3125 5.527344 32.210938 5.519531 32.113281 5.503906 L 32.050781 5.492188 L 31.988281 5.488281 C 31.769531 5.476563 31.558594 5.472656 31.355469 5.472656 C 27.21875 5.472656 26.382813 7.710938 25.648438 9.6875 C 25.167969 10.980469 24.710938 12.203125 23.394531 13.203125 C 23.082031 13.441406 22.769531 13.644531 22.476563 13.816406 C 22.835938 12.996094 23.089844 12.027344 23.351563 11.027344 C 24.238281 7.636719 25.152344 4.132813 29.738281 4.003906 M 30 3 C 20.988281 3 23.578125 14.25 20 14.964844 C 20.109375 15.296875 20.402344 15.441406 20.808594 15.441406 C 21.613281 15.441406 22.859375 14.867188 24 14 C 27.804688 11.109375 25.550781 6.472656 31.355469 6.472656 C 31.542969 6.472656 31.738281 6.476563 31.941406 6.488281 C 32.101563 6.515625 32.257813 6.527344 32.410156 6.527344 C 33.746094 6.527344 34.835938 5.535156 35 4.390625 C 34.886719 4.433594 34.78125 4.449219 34.6875 4.449219 C 33.898438 4.449219 33.507813 3.277344 32.183594 3.277344 C 31.84375 3.277344 31.441406 3.355469 30.957031 3.550781 Z "></path>
+<path style="fill:#DFF0FE;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 31.414063 6.496094 L 30.21875 3.128906 C 30.21875 3.128906 27.878906 4.214844 28.585938 7.367188 "></path>
+<path style=" fill:#4788C7;" d="M 23.683594 39 L 24.984375 39 C 24.949219 38.484375 24.910156 37.4375 24.847656 37 L 23.515625 37 C 23.59375 37.4375 23.644531 38.484375 23.683594 39 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.878906 39 L 8.007813 39 C 8.09375 38.484375 8.269531 37.4375 8.304688 37 L 6.144531 37 C 6.121094 37.4375 5.957031 38.484375 5.878906 39 Z "></path>
+<path style=" fill:#4788C7;" d="M 12.84375 38 L 14.101563 38 C 14.054688 37.484375 14.050781 36.4375 13.972656 36 L 12.683594 36 C 12.773438 36.4375 12.792969 37.484375 12.84375 38 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 21.5 3 C 21.5 4.378906 20.378906 5.5 19 5.5 C 17.621094 5.5 16.5 4.378906 16.5 3 C 16.5 1.621094 17.621094 0.5 19 0.5 C 20.378906 0.5 21.5 1.621094 21.5 3 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 1 C 20.101563 1 21 1.898438 21 3 C 21 4.101563 20.101563 5 19 5 C 17.898438 5 17 4.101563 17 3 C 17 1.898438 17.898438 1 19 1 M 19 0 C 17.34375 0 16 1.34375 16 3 C 16 4.65625 17.34375 6 19 6 C 20.65625 6 22 4.65625 22 3 C 22 1.34375 20.65625 0 19 0 Z "></path>
+<path style="fill:#98CCFD;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 15.058594 8.34375 L 13.558594 14.808594 C 13.386719 15.535156 13.726563 16.285156 14.386719 16.632813 L 18.054688 18.59375 L 17.582031 22.820313 C 17.488281 23.625 18.054688 24.355469 18.855469 24.460938 C 19.652344 24.566406 20.386719 24.015625 20.511719 23.222656 L 21.265625 17.886719 C 21.363281 17.246094 21.050781 16.613281 20.484375 16.304688 L 17.992188 14.9375 L 18.871094 10.886719 L 23.414063 12.101563 C 24.203125 12.292969 25.007813 11.835938 25.246094 11.058594 C 25.5 10.234375 25.03125 9.367188 24.207031 9.128906 L 17.261719 7.066406 C 16.296875 6.785156 15.292969 7.367188 15.058594 8.34375 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/motorcycle.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 28.460938 14.5 C 27.648438 14.5 26.984375 13.839844 26.984375 13.023438 C 26.984375 12.160156 27.648438 11.5 28.460938 11.5 L 30.5 11.5 L 30.5 14.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 30 12 L 30 14 L 28.460938 14 C 27.921875 14 27.484375 13.5625 27.484375 13.027344 L 27.484375 12.976563 C 27.484375 12.4375 27.921875 12 28.460938 12 L 30 12 M 31 11 L 28.460938 11 C 27.371094 11 26.484375 11.882813 26.484375 12.972656 L 26.484375 13.023438 C 26.484375 14.113281 27.371094 15 28.460938 15 L 31 15 Z "></path>
+<path style=" fill:#98CCFD;" d="M 32.5 21 C 34.980469 21 37 23.019531 37 25.5 C 37 27.980469 34.980469 30 32.5 30 C 30.019531 30 28 27.980469 28 25.5 C 28 23.019531 30.019531 21 32.5 21 M 32.5 18 C 28.359375 18 25 21.359375 25 25.5 C 25 29.640625 28.359375 33 32.5 33 C 36.640625 33 40 29.640625 40 25.5 C 40 21.359375 36.640625 18 32.5 18 Z "></path>
+<path style=" fill:#4788C7;" d="M 32.5 19 C 36.085938 19 39 21.914063 39 25.5 C 39 29.085938 36.085938 32 32.5 32 C 28.914063 32 26 29.085938 26 25.5 C 26 21.914063 28.914063 19 32.5 19 M 32.5 18 C 28.359375 18 25 21.359375 25 25.5 C 25 29.640625 28.359375 33 32.5 33 C 36.640625 33 40 29.640625 40 25.5 C 40 21.359375 36.640625 18 32.5 18 Z "></path>
+<path style=" fill:#98CCFD;" d="M 7.5 21 C 9.980469 21 12 23.019531 12 25.5 C 12 27.980469 9.980469 30 7.5 30 C 5.019531 30 3 27.980469 3 25.5 C 3 23.019531 5.019531 21 7.5 21 M 7.5 18 C 3.359375 18 0 21.359375 0 25.5 C 0 29.640625 3.359375 33 7.5 33 C 11.640625 33 15 29.640625 15 25.5 C 15 21.359375 11.640625 18 7.5 18 Z "></path>
+<path style=" fill:#4788C7;" d="M 7.5 19 C 11.085938 19 14 21.914063 14 25.5 C 14 29.085938 11.085938 32 7.5 32 C 3.914063 32 1 29.085938 1 25.5 C 1 21.914063 3.914063 19 7.5 19 M 7.5 18 C 3.359375 18 0 21.359375 0 25.5 C 0 29.640625 3.359375 33 7.5 33 C 11.640625 33 15 29.640625 15 25.5 C 15 21.359375 11.640625 18 7.5 18 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 9.359375 18.832031 L 6.019531 14.5 L 11.351563 14.5 C 12.179688 14.5 12.921875 14.960938 13.289063 15.695313 L 14.859375 18.832031 Z "></path>
+<path style=" fill:#4788C7;" d="M 11.351563 15 C 11.988281 15 12.558594 15.351563 12.84375 15.921875 L 14.050781 18.332031 L 9.605469 18.332031 L 7.035156 15 L 11.351563 15 M 11.351563 14 L 5 14 L 9.113281 19.332031 L 15.664063 19.332031 L 13.734375 15.472656 C 13.285156 14.570313 12.363281 14 11.351563 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 34.5 25.5 C 34.5 26.605469 33.605469 27.5 32.5 27.5 C 31.394531 27.5 30.5 26.605469 30.5 25.5 C 30.5 24.394531 31.394531 23.5 32.5 23.5 C 33.605469 23.5 34.5 24.394531 34.5 25.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 9.5 25.5 C 9.5 26.605469 8.605469 27.5 7.5 27.5 C 6.394531 27.5 5.5 26.605469 5.5 25.5 C 5.5 24.394531 6.394531 23.5 7.5 23.5 C 8.605469 23.5 9.5 24.394531 9.5 25.5 Z "></path>
+<path style=" fill:#98CCFD;" d="M 9.5 24.5 L 9.5 22 C 9.5 21.941406 9.5 20.484375 8.261719 19.230469 C 7.164063 18.125 5.480469 17.542969 3.25 17.503906 L 1 14.5 L 5 14.5 C 7.664063 14.5 8.707031 15.503906 9.914063 16.671875 C 10.160156 16.902344 10.40625 17.140625 10.667969 17.375 L 10.8125 17.5 L 17.34375 17.5 L 18.082031 15.789063 C 18.683594 14.398438 20.054688 13.5 21.566406 13.5 L 27.085938 13.5 C 27.222656 14.101563 27.515625 15.269531 27.878906 16.265625 C 27.304688 18.15625 25.140625 23.5 19 23.5 L 18.882813 23.5 L 16.882813 24.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 26.6875 14 C 26.839844 14.613281 27.070313 15.484375 27.347656 16.277344 C 26.738281 18.195313 24.644531 23 19 23 L 18.765625 23 L 16.765625 24 L 10 24 L 10 22.011719 C 10.003906 21.835938 9.980469 20.253906 8.617188 18.878906 C 7.46875 17.71875 5.75 17.089844 3.507813 17.007813 L 2 15 L 5 15 C 7.460938 15 8.390625 15.894531 9.566406 17.027344 C 9.816406 17.269531 10.066406 17.511719 10.335938 17.746094 L 10.621094 18 L 17.671875 18 L 17.933594 17.398438 L 18.539063 15.988281 C 19.0625 14.78125 20.25 14 21.566406 14 L 26.6875 14 M 27.484375 13 L 21.566406 13 C 19.851563 13 18.304688 14.019531 17.621094 15.59375 L 17.015625 17 L 11 17 C 9.40625 15.589844 8.417969 14 5 14 C 3.050781 14 0 14 0 14 L 3 18 C 9.042969 18 9 22 9 22 L 9 25 L 17 25 L 19 24 C 26.125 24 28.148438 17.136719 28.402344 16.246094 C 27.878906 14.867188 27.484375 13 27.484375 13 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 32.5 25.5 C 27.566406 18.980469 26.507813 10.921875 26.15625 8.378906 C 26.089844 7.882813 25.5 7.5 25 7.5 L 20.105469 7.5 "></path>
+<path style=" fill:#4788C7;" d="M 23 7 L 20 7 C 19.449219 7 19 7.449219 19 8 C 19 8.550781 19.449219 9 20 9 L 22 9 C 22.550781 9 23 8.550781 23 8 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 17.5 17 L 17.5 25 "></path>
+<path style=" fill:#DFF0FE;" d="M 5.5 27.5 L 5.5 24.5 L 15 24.5 C 15.828125 24.5 16.5 23.828125 16.5 23 L 16.5 22 C 16.5 21.171875 17.171875 20.5 18 20.5 C 18.828125 20.5 19.5 21.171875 19.5 22 L 19.5 23 C 19.5 25.480469 17.480469 27.5 15 27.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 18 21 C 18.550781 21 19 21.449219 19 22 L 19 23 C 19 25.207031 17.207031 27 15 27 L 6 27 L 6 25 L 15 25 C 16.101563 25 17 24.101563 17 23 L 17 22 C 17 21.449219 17.449219 21 18 21 M 18 20 C 16.894531 20 16 20.894531 16 22 L 16 23 C 16 23.550781 15.550781 24 15 24 L 5 24 L 5 28 L 15 28 C 17.761719 28 20 25.761719 20 23 L 20 22 C 20 20.894531 19.105469 20 18 20 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/railcar.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 11 10 L 6 10 L 6 7 C 6 6.449219 6.449219 6 7 6 L 10 6 C 10.550781 6 11 6.449219 11 7 Z "></path>
+<path style=" fill:#4788C7;" d="M 34 10 L 29 10 L 29 7 C 29 6.449219 29.449219 6 30 6 L 33 6 C 33.550781 6 34 6.449219 34 7 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.332031 27 L 34.664063 27 L 34.664063 31 L 5.332031 31 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 37.5 30.5 C 37.5 32.15625 36.15625 33.5 34.5 33.5 C 32.84375 33.5 31.5 32.15625 31.5 30.5 C 31.5 28.84375 32.84375 27.5 34.5 27.5 C 36.15625 27.5 37.5 28.84375 37.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34.5 28 C 35.878906 28 37 29.121094 37 30.5 C 37 31.878906 35.878906 33 34.5 33 C 33.121094 33 32 31.878906 32 30.5 C 32 29.121094 33.121094 28 34.5 28 M 34.5 27 C 32.566406 27 31 28.566406 31 30.5 C 31 32.433594 32.566406 34 34.5 34 C 36.433594 34 38 32.433594 38 30.5 C 38 28.566406 36.433594 27 34.5 27 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 30.5 30.5 C 30.5 32.15625 29.15625 33.5 27.5 33.5 C 25.84375 33.5 24.5 32.15625 24.5 30.5 C 24.5 28.84375 25.84375 27.5 27.5 27.5 C 29.15625 27.5 30.5 28.84375 30.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 27.5 28 C 28.878906 28 30 29.121094 30 30.5 C 30 31.878906 28.878906 33 27.5 33 C 26.121094 33 25 31.878906 25 30.5 C 25 29.121094 26.121094 28 27.5 28 M 27.5 27 C 25.566406 27 24 28.566406 24 30.5 C 24 32.433594 25.566406 34 27.5 34 C 29.433594 34 31 32.433594 31 30.5 C 31 28.566406 29.433594 27 27.5 27 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 15.5 30.5 C 15.5 32.15625 14.15625 33.5 12.5 33.5 C 10.84375 33.5 9.5 32.15625 9.5 30.5 C 9.5 28.84375 10.84375 27.5 12.5 27.5 C 14.15625 27.5 15.5 28.84375 15.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 12.5 28 C 13.878906 28 15 29.121094 15 30.5 C 15 31.878906 13.878906 33 12.5 33 C 11.121094 33 10 31.878906 10 30.5 C 10 29.121094 11.121094 28 12.5 28 M 12.5 27 C 10.566406 27 9 28.566406 9 30.5 C 9 32.433594 10.566406 34 12.5 34 C 14.433594 34 16 32.433594 16 30.5 C 16 28.566406 14.433594 27 12.5 27 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 8.5 30.5 C 8.5 32.15625 7.15625 33.5 5.5 33.5 C 3.84375 33.5 2.5 32.15625 2.5 30.5 C 2.5 28.84375 3.84375 27.5 5.5 27.5 C 7.15625 27.5 8.5 28.84375 8.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.5 28 C 6.878906 28 8 29.121094 8 30.5 C 8 31.878906 6.878906 33 5.5 33 C 4.121094 33 3 31.878906 3 30.5 C 3 29.121094 4.121094 28 5.5 28 M 5.5 27 C 3.566406 27 2 28.566406 2 30.5 C 2 32.433594 3.566406 34 5.5 34 C 7.433594 34 9 32.433594 9 30.5 C 9 28.566406 7.433594 27 5.5 27 Z "></path>
+<path style=" fill:#98CCFD;" d="M 1 28.5 C 0.722656 28.5 0.5 28.273438 0.5 28 L 0.5 11 C 0.5 9.070313 2.070313 7.5 4 7.5 L 36 7.5 C 37.929688 7.5 39.5 9.070313 39.5 11 L 39.5 28 C 39.5 28.273438 39.277344 28.5 39 28.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36 8 C 37.652344 8 39 9.347656 39 11 L 39 28 L 1 28 L 1 11 C 1 9.347656 2.347656 8 4 8 L 36 8 M 36 7 L 4 7 C 1.789063 7 0 8.789063 0 11 L 0 28 C 0 28.550781 0.449219 29 1 29 L 39 29 C 39.550781 29 40 28.550781 40 28 L 40 11 C 40 8.789063 38.210938 7 36 7 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 30 20.5 C 29.171875 20.5 28.5 19.828125 28.5 19 L 28.5 13 C 28.5 12.171875 29.171875 11.5 30 11.5 L 34 11.5 C 34.828125 11.5 35.5 12.171875 35.5 13 L 35.5 19 C 35.5 19.828125 34.828125 20.5 34 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34 12 C 34.550781 12 35 12.449219 35 13 L 35 19 C 35 19.550781 34.550781 20 34 20 L 30 20 C 29.449219 20 29 19.550781 29 19 L 29 13 C 29 12.449219 29.449219 12 30 12 L 34 12 M 34 11 L 30 11 C 28.894531 11 28 11.894531 28 13 L 28 19 C 28 20.105469 28.894531 21 30 21 L 34 21 C 35.105469 21 36 20.105469 36 19 L 36 13 C 36 11.894531 35.105469 11 34 11 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 23 20.5 C 22.171875 20.5 21.5 19.828125 21.5 19 L 21.5 13 C 21.5 12.171875 22.171875 11.5 23 11.5 L 27 11.5 C 27.828125 11.5 28.5 12.171875 28.5 13 L 28.5 19 C 28.5 19.828125 27.828125 20.5 27 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 27 12 C 27.550781 12 28 12.449219 28 13 L 28 19 C 28 19.550781 27.550781 20 27 20 L 23 20 C 22.449219 20 22 19.550781 22 19 L 22 13 C 22 12.449219 22.449219 12 23 12 L 27 12 M 27 11 L 23 11 C 21.894531 11 21 11.894531 21 13 L 21 19 C 21 20.105469 21.894531 21 23 21 L 27 21 C 28.105469 21 29 20.105469 29 19 L 29 13 C 29 11.894531 28.105469 11 27 11 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 6 20.5 C 5.171875 20.5 4.5 19.828125 4.5 19 L 4.5 13 C 4.5 12.171875 5.171875 11.5 6 11.5 L 10 11.5 C 10.828125 11.5 11.5 12.171875 11.5 13 L 11.5 19 C 11.5 19.828125 10.828125 20.5 10 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 12 C 10.550781 12 11 12.449219 11 13 L 11 19 C 11 19.550781 10.550781 20 10 20 L 6 20 C 5.449219 20 5 19.550781 5 19 L 5 13 C 5 12.449219 5.449219 12 6 12 L 10 12 M 10 11 L 6 11 C 4.894531 11 4 11.894531 4 13 L 4 19 C 4 20.105469 4.894531 21 6 21 L 10 21 C 11.105469 21 12 20.105469 12 19 L 12 13 C 12 11.894531 11.105469 11 10 11 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 13 20.5 C 12.171875 20.5 11.5 19.828125 11.5 19 L 11.5 13 C 11.5 12.171875 12.171875 11.5 13 11.5 L 17 11.5 C 17.828125 11.5 18.5 12.171875 18.5 13 L 18.5 19 C 18.5 19.828125 17.828125 20.5 17 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 17 12 C 17.550781 12 18 12.449219 18 13 L 18 19 C 18 19.550781 17.550781 20 17 20 L 13 20 C 12.449219 20 12 19.550781 12 19 L 12 13 C 12 12.449219 12.449219 12 13 12 L 17 12 M 17 11 L 13 11 C 11.894531 11 11 11.894531 11 13 L 11 19 C 11 20.105469 11.894531 21 13 21 L 17 21 C 18.105469 21 19 20.105469 19 19 L 19 13 C 19 11.894531 18.105469 11 17 11 Z "></path>
+<path style=" fill:#4788C7;" d="M 35.5 25 L 4.5 25 C 4.226563 25 4 24.773438 4 24.5 C 4 24.226563 4.226563 24 4.5 24 L 35.5 24 C 35.773438 24 36 24.226563 36 24.5 C 36 24.773438 35.773438 25 35.5 25 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/railroad-train.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 7.90625 40 C 8.199219 40 8.476563 39.859375 8.644531 39.621094 L 13.375 33 L 11.144531 33 L 7.171875 38.566406 C 6.742188 39.164063 7.171875 40 7.90625 40 Z "></path>
+<path style=" fill:#4788C7;" d="M 28.855469 33 L 26.625 33 L 31.355469 39.621094 C 31.523438 39.859375 31.800781 40 32.09375 40 C 32.828125 40 33.257813 39.164063 32.828125 38.566406 Z "></path>
+<path style=" fill:#98CCFD;" d="M 10 36.5 C 7.519531 36.5 5.5 34.480469 5.5 32 L 5.5 9 C 5.5 6.519531 7.519531 4.5 10 4.5 L 15.75 4.5 L 15.878906 4.199219 C 16.597656 2.558594 18.214844 1.5 20 1.5 C 21.785156 1.5 23.402344 2.558594 24.121094 4.199219 L 24.25 4.5 L 30 4.5 C 32.480469 4.5 34.5 6.519531 34.5 9 L 34.5 32 C 34.5 34.480469 32.480469 36.5 30 36.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 2 C 21.585938 2 23.023438 2.941406 23.660156 4.402344 L 23.925781 5 L 30 5 C 32.207031 5 34 6.792969 34 9 L 34 32 C 34 34.207031 32.207031 36 30 36 L 10 36 C 7.792969 36 6 34.207031 6 32 L 6 9 C 6 6.792969 7.792969 5 10 5 L 16.074219 5 L 16.339844 4.402344 C 16.976563 2.941406 18.414063 2 20 2 M 20 1 C 17.949219 1 16.195313 2.234375 15.421875 4 L 10 4 C 7.238281 4 5 6.238281 5 9 L 5 32 C 5 34.761719 7.238281 37 10 37 L 30 37 C 32.761719 37 35 34.761719 35 32 L 35 9 C 35 6.238281 32.761719 4 30 4 L 24.578125 4 C 23.804688 2.234375 22.050781 1 20 1 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 11 23.5 C 9.621094 23.5 8.5 22.378906 8.5 21 L 8.5 13 C 8.5 11.621094 9.621094 10.5 11 10.5 L 18.5 10.5 L 18.5 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 18 11 L 18 23 L 11 23 C 9.898438 23 9 22.101563 9 21 L 9 13 C 9 11.898438 9.898438 11 11 11 L 18 11 M 19 10 L 11 10 C 9.34375 10 8 11.34375 8 13 L 8 21 C 8 22.65625 9.34375 24 11 24 L 19 24 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 21.5 23.5 L 21.5 10.5 L 29 10.5 C 30.378906 10.5 31.5 11.621094 31.5 13 L 31.5 21 C 31.5 22.378906 30.378906 23.5 29 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29 11 C 30.101563 11 31 11.898438 31 13 L 31 21 C 31 22.101563 30.101563 23 29 23 L 22 23 L 22 11 L 29 11 M 29 10 L 21 10 L 21 24 L 29 24 C 30.65625 24 32 22.65625 32 21 L 32 13 C 32 11.34375 30.65625 10 29 10 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 22 6 C 22 7.105469 21.105469 8 20 8 C 18.894531 8 18 7.105469 18 6 C 18 4.894531 18.894531 4 20 4 C 21.105469 4 22 4.894531 22 6 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 31 29.5 C 31 30.878906 29.878906 32 28.5 32 C 27.121094 32 26 30.878906 26 29.5 C 26 28.121094 27.121094 27 28.5 27 C 29.878906 27 31 28.121094 31 29.5 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 14 29.5 C 14 30.878906 12.878906 32 11.5 32 C 10.121094 32 9 30.878906 9 29.5 C 9 28.121094 10.121094 27 11.5 27 C 12.878906 27 14 28.121094 14 29.5 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/rocket-boot.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 4.5 31.5 L 4.5 5.347656 L 12.089844 2.5 L 20.5625 2.5 L 22.542969 17.34375 L 35.128906 22.949219 C 37.179688 23.808594 38.5 25.785156 38.5 28 L 38.5 31.523438 Z "></path>
+<path style=" fill:#4788C7;" d="M 20.125 3 L 22.007813 17.132813 L 22.082031 17.6875 L 22.59375 17.914063 L 34.945313 23.417969 C 36.800781 24.191406 38 25.988281 38 28 L 38 31.023438 L 5 31 L 5 5.691406 L 12.179688 3 L 20.125 3 M 21 2 L 12 2 L 4 5 L 4 32 L 39 32.023438 L 39 28 C 39 25.59375 37.550781 23.421875 35.328125 22.492188 L 23 17 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4 18 L 13.585938 18 C 15.925781 18 18.113281 19.171875 19.414063 21.121094 L 26 31 L 26 32 L 4 32 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 17 25 C 17 27.210938 15.210938 29 13 29 C 10.789063 29 9 27.210938 9 25 C 9 22.789063 10.789063 21 13 21 C 15.210938 21 17 22.789063 17 25 Z "></path>
+<path style=" fill:#4788C7;" d="M 14 25 C 14 25.550781 13.550781 26 13 26 C 12.449219 26 12 25.550781 12 25 C 12 24.449219 12.449219 24 13 24 C 13.550781 24 14 24.449219 14 25 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.5 31.5 L 39.5 31.5 L 39.5 34.5 L 4.5 34.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 39 32 L 39 34 L 5 34 L 5 32 L 39 32 M 40 31 L 4 31 L 4 35 L 40 35 Z "></path>
+<path style=" fill:#4788C7;" d="M 21 9 L 12.5 9 C 12.222656 9 12 8.777344 12 8.5 C 12 8.222656 12.222656 8 12.5 8 L 21 8 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 12 L 12.5 12 C 12.222656 12 12 11.777344 12 11.5 C 12 11.222656 12.222656 11 12.5 11 L 22 11 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 15 L 12.5 15 C 12.222656 15 12 14.777344 12 14.5 C 12 14.222656 12.222656 14 12.5 14 L 22 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 3.5 21.832031 L 4.5 21.832031 L 4.5 25.832031 L 3.5 25.832031 Z "></path>
+<path style=" fill:#4788C7;" d="M 4 22.332031 L 4 25.332031 L 4 22.332031 M 5 21.332031 L 3 21.332031 L 3 26.332031 L 5 26.332031 Z "></path>
+<path style=" fill:#98CCFD;" d="M 0.5 5.5 L 7.5 5.5 L 7.5 23.5 L 0.5 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 7 6 L 7 23 L 1 23 L 1 6 L 7 6 M 8 5 L 0 5 L 0 24 L 8 24 Z "></path>
+<path style=" fill:#4788C7;" d="M 0 8 L 8 8 L 8 9 L 0 9 Z "></path>
+<path style=" fill:#4788C7;" d="M 0 11 L 8 11 L 8 12 L 0 12 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 4.007813 37.300781 C 3.257813 36.523438 1.5 34.5 1.5 32.667969 C 1.5 31.472656 2.621094 30.5 4 30.5 C 5.378906 30.5 6.5 31.472656 6.5 32.667969 C 6.5 34.585938 4.757813 36.546875 4.007813 37.300781 Z "></path>
+<path style=" fill:#4788C7;" d="M 4 31 C 5.101563 31 6 31.746094 6 32.667969 C 6 34.066406 4.871094 35.628906 4.011719 36.578125 C 3.144531 35.601563 2 34.011719 2 32.667969 C 2 31.746094 2.898438 31 4 31 M 4 30 C 2.34375 30 1 31.195313 1 32.667969 C 1 35.238281 4 38 4 38 C 4 38 7 35.355469 7 32.667969 C 7 31.195313 5.65625 30 4 30 Z "></path>
+<path style=" fill:#98CCFD;" d="M 0.5 31.5 L 0.5 29 C 0.5 27.070313 2.070313 25.5 4 25.5 C 5.929688 25.5 7.5 27.070313 7.5 29 L 7.5 31.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 4 26 C 5.652344 26 7 27.347656 7 29 L 7 31 L 1 31 L 1 29 C 1 27.347656 2.347656 26 4 26 M 4 25 C 1.789063 25 0 26.789063 0 29 L 0 32 L 8 32 L 8 29 C 8 26.789063 6.210938 25 4 25 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/sailing-boat.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 6 2 L 7 2 L 7 21 L 6 21 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.703125 16.5 C 2.011719 15.53125 2.5 13.644531 2.5 11.5 C 2.5 9.355469 2.007813 7.46875 1.703125 6.5 L 15.664063 6.5 C 15.980469 7.289063 16.785156 9.554688 16.785156 11.855469 C 16.785156 14.117188 16.015625 15.878906 15.703125 16.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 15.324219 7 C 15.671875 7.941406 16.285156 9.882813 16.285156 11.855469 C 16.285156 13.730469 15.722656 15.257813 15.386719 16 L 2.371094 16 C 2.664063 14.917969 3 13.296875 3 11.5 C 3 9.703125 2.664063 8.082031 2.371094 7 L 15.324219 7 M 16 6 L 1 6 C 1 6 2 8.507813 2 11.5 C 2 14.492188 1 17 1 17 L 16 17 C 16 17 17.285156 14.847656 17.285156 11.855469 C 17.285156 8.863281 16 6 16 6 Z "></path>
+<path style=" fill:#4788C7;" d="M 30 5 L 31 5 L 31 25.355469 L 30 25.355469 Z "></path>
+<path style=" fill:#4788C7;" d="M 17 1 L 18 1 L 18 25.429688 L 17 25.429688 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.519531 33.5 C 4.574219 31.734375 4.582031 25.976563 2.765625 21.5 L 8.910156 21.5 L 9.941406 23.296875 C 10.339844 24.046875 11.140625 24.5 12.078125 24.5 L 26.207031 24.5 L 28.183594 22.523438 L 36.15625 23.410156 C 33.132813 28.367188 32.609375 32.167969 32.519531 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.621094 22 L 9.492188 23.519531 C 9.984375 24.445313 10.949219 25 12.078125 25 L 26.414063 25 L 28.367188 23.046875 L 35.328125 23.820313 C 32.886719 28.050781 32.234375 31.398438 32.0625 33 L 5.03125 33 C 5.058594 30.898438 4.941406 26.066406 3.488281 22 L 8.621094 22 M 9.199219 21 L 2 21 C 4.449219 26.234375 4 34 4 34 L 33 34 C 33 34 32.90625 29.375 37 23 L 28 22 L 26 24 L 12.078125 24 C 11.363281 24 10.710938 23.679688 10.375 23.050781 Z "></path>
+<path style=" fill:#98CCFD;" d="M 3 23.5 C 2.230469 23.5 1.5 22.769531 1.5 22 L 1.5 19.5 L 7.71875 19.5 L 10.117188 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 7.433594 20 L 9.234375 23 L 3 23 C 2.515625 23 2 22.484375 2 22 L 2 20 L 7.433594 20 M 8 19 L 1 19 L 1 22 C 1 23.039063 1.960938 24 3 24 L 11 24 Z "></path>
+<path style=" fill:#98CCFD;" d="M 27 23.5 L 29.25 20.5 L 38.230469 20.5 L 37.332031 22.507813 C 37.125 23.121094 36.597656 23.5 36 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 37.457031 21 L 36.875 22.304688 L 36.855469 22.347656 L 36.839844 22.394531 C 36.71875 22.757813 36.382813 23 36 23 L 28 23 L 29.5 21 L 37.457031 21 M 39 20 L 29 20 L 26 24 L 36 24 C 36.8125 24 37.53125 23.480469 37.785156 22.710938 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 11.652344 20.5 C 11.941406 19.308594 12.5 16.570313 12.5 13 C 12.5 9.429688 11.941406 6.691406 11.652344 5.5 L 26.617188 5.5 C 26.863281 6.460938 27.5 9.296875 27.5 13 C 27.5 16.703125 26.863281 19.539063 26.617188 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 26.226563 6 C 26.503906 7.183594 27 9.75 27 13 C 27 16.25 26.503906 18.816406 26.226563 20 L 12.277344 20 C 12.585938 18.582031 13 16.09375 13 13 C 13 9.90625 12.585938 7.417969 12.277344 6 L 26.226563 6 M 27 5 L 11 5 C 11 5 12 8.285156 12 13 C 12 17.714844 11 21 11 21 L 27 21 C 27 21 28 17.714844 28 13 C 28 8.285156 27 5 27 5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 23.714844 18.5 C 24.023438 17.578125 24.5 15.855469 24.5 14 C 24.5 12.144531 24.023438 10.421875 23.714844 9.5 L 36.757813 9.5 C 37.191406 10.082031 38.5 11.988281 38.5 14 C 38.5 16.015625 37.195313 17.921875 36.757813 18.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.503906 10 C 36.996094 10.699219 38 12.324219 38 14 C 38 15.675781 36.996094 17.300781 36.503906 18 L 24.394531 18 C 24.683594 16.992188 25 15.539063 25 14 C 25 12.460938 24.683594 11.007813 24.394531 10 L 36.503906 10 M 37 9 L 23 9 C 23 9 24 11.382813 24 14 C 24 16.617188 23 19 23 19 L 37 19 C 37 19 39 16.617188 39 14 C 39 11.382813 37 9 37 9 Z "></path>
+<path style=" fill:#4788C7;" d="M 6 6.070313 C 8.625 3.625 8.324219 6.558594 12 5 C 10.621094 4.980469 9.4375 2 7.355469 2 C 6.09375 2 6 2 6 2 Z "></path>
+<path style=" fill:#4788C7;" d="M 30 9.070313 C 32.625 6.625 32.324219 9.558594 36 8 C 34.621094 7.980469 33.4375 5 31.355469 5 C 30.09375 5 30 5 30 5 Z "></path>
+<path style=" fill:#4788C7;" d="M 17 5 C 21.132813 2.425781 22.769531 4.980469 26.5 3.5 C 25.121094 3.480469 22.003906 1 18.355469 1 C 17.09375 1 17 1 17 1 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 39 L 39 39 L 39 31.878906 C 37.691406 31.613281 36.148438 31 35 31 C 33.542969 31 31.4375 32 30 32 C 28.5625 32 26.457031 31 25 31 C 23.542969 31 21.4375 32 20 32 C 18.5625 32 16.457031 31 15 31 C 13.542969 31 11.4375 32 10 32 C 8.5625 32 6.457031 31 5 31 C 3.851563 31 2.308594 31.613281 1 31.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 32.277344 C 1.863281 32.191406 2.238281 32.085938 2.613281 31.980469 C 3.460938 31.746094 4.335938 31.5 5 31.5 C 5.664063 31.5 6.535156 31.746094 7.382813 31.984375 C 8.28125 32.238281 9.214844 32.5 10 32.5 C 10.785156 32.5 11.71875 32.238281 12.617188 31.984375 C 13.464844 31.746094 14.335938 31.5 15 31.5 C 15.664063 31.5 16.535156 31.746094 17.382813 31.984375 C 18.28125 32.238281 19.214844 32.5 20 32.5 C 20.785156 32.5 21.71875 32.238281 22.617188 31.984375 C 23.464844 31.746094 24.335938 31.5 25 31.5 C 25.664063 31.5 26.535156 31.746094 27.382813 31.984375 C 28.28125 32.238281 29.214844 32.5 30 32.5 C 30.785156 32.5 31.71875 32.238281 32.617188 31.984375 C 33.464844 31.746094 34.335938 31.5 35 31.5 C 35.664063 31.5 36.539063 31.746094 37.386719 31.980469 C 37.761719 32.085938 38.136719 32.191406 38.5 32.277344 "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/segway.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 19 3.203125 L 21 3.203125 L 21 23.847656 L 19 23.847656 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 10.5 38.5 C 9.398438 38.5 8.5 37.601563 8.5 36.5 L 8.5 24.972656 C 8.5 23.867188 9.398438 22.972656 10.5 22.972656 C 11.601563 22.972656 12.5 23.867188 12.5 24.972656 L 12.5 36.5 C 12.5 37.601563 11.601563 38.5 10.5 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 10.5 23.472656 C 11.328125 23.472656 12 24.144531 12 24.972656 L 12 36.5 C 12 37.328125 11.328125 38 10.5 38 C 9.671875 38 9 37.328125 9 36.5 L 9 24.972656 C 9 24.144531 9.671875 23.472656 10.5 23.472656 M 10.5 22.472656 C 9.117188 22.472656 8 23.589844 8 24.972656 L 8 36.5 C 8 37.882813 9.117188 39 10.5 39 C 11.882813 39 13 37.882813 13 36.5 L 13 24.972656 C 13 23.589844 11.882813 22.472656 10.5 22.472656 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 29.5 38.5 C 28.398438 38.5 27.5 37.601563 27.5 36.5 L 27.5 24.972656 C 27.5 23.867188 28.398438 22.972656 29.5 22.972656 C 30.601563 22.972656 31.5 23.867188 31.5 24.972656 L 31.5 36.5 C 31.5 37.601563 30.601563 38.5 29.5 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.5 23.472656 C 30.328125 23.472656 31 24.144531 31 24.972656 L 31 36.5 C 31 37.328125 30.328125 38 29.5 38 C 28.671875 38 28 37.328125 28 36.5 L 28 24.972656 C 28 24.144531 28.671875 23.472656 29.5 23.472656 M 29.5 22.472656 C 28.117188 22.472656 27 23.589844 27 24.972656 L 27 36.5 C 27 37.882813 28.117188 39 29.5 39 C 30.882813 39 32 37.882813 32 36.5 L 32 24.972656 C 32 23.589844 30.882813 22.472656 29.5 22.472656 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 12.367188 33.5 L 8.675781 21.5 L 9.96875 21.5 C 11.683594 21.5 13.140625 22.667969 13.511719 24.34375 L 14.363281 28.5 L 17.5 28.5 L 17.5 18.5 L 22.5 18.5 L 22.5 28.5 L 25.636719 28.5 L 26.488281 24.335938 C 26.859375 22.667969 28.316406 21.5 30.035156 21.5 L 31.324219 21.5 L 27.632813 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 22 19 L 22 29 L 26.046875 29 L 26.210938 28.199219 L 26.976563 24.453125 C 27.296875 23.007813 28.554688 22 30.035156 22 L 30.644531 22 L 27.261719 33 L 12.738281 33 L 9.355469 22 L 9.964844 22 C 11.445313 22 12.703125 23.007813 13.019531 24.4375 L 13.789063 28.199219 L 13.953125 29 L 18 29 L 18 19 L 22 19 M 23 18 L 17 18 L 17 28 L 14.769531 28 L 14 24.234375 C 13.578125 22.34375 11.902344 21 9.964844 21 L 8 21 L 12 34 L 28 34 L 32 21 L 30.035156 21 C 28.097656 21 26.421875 22.34375 26 24.234375 L 25.230469 28 L 23 28 Z "></path>
+<path style="fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 9.75 4.25 L 14.5 2.75 L 20 4.25 L 25.5 2.75 L 30.25 4.25 "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/shuttle.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 2.667969 30.5 C 1.472656 30.5 0.5 29.527344 0.5 28.332031 L 0.5 9.667969 C 0.5 8.472656 1.472656 7.5 2.667969 7.5 L 32.441406 7.5 C 34.367188 7.5 36.109375 8.640625 36.875 10.40625 L 39.097656 15.515625 C 39.363281 16.128906 39.5 16.777344 39.5 17.441406 L 39.5 28.332031 C 39.5 29.527344 38.527344 30.5 37.332031 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 32.445313 8 C 34.167969 8 35.730469 9.023438 36.417969 10.605469 L 38.640625 15.714844 C 38.878906 16.265625 39 16.84375 39 17.445313 L 39 28.335938 C 39 29.253906 38.253906 30 37.332031 30 L 2.667969 30 C 2.222656 30 1.804688 29.828125 1.488281 29.511719 C 1.171875 29.195313 1 28.777344 1 28.332031 L 1 9.667969 C 1 8.746094 1.746094 8 2.667969 8 L 32.445313 8 M 32.445313 7 L 2.667969 7 C 1.195313 7 0 8.195313 0 9.667969 L 0 28.335938 C 0 29.804688 1.195313 31 2.667969 31 L 37.335938 31 C 38.804688 31 40 29.804688 40 28.332031 L 40 17.441406 C 40 16.710938 39.847656 15.988281 39.558594 15.316406 L 37.335938 10.203125 C 36.488281 8.257813 34.566406 7 32.445313 7 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 30.332031 20.5 C 29.875 20.5 29.5 20.125 29.5 19.667969 L 29.5 11.332031 C 29.5 10.875 29.875 10.5 30.332031 10.5 L 36.769531 10.5 L 39.097656 15.847656 C 39.363281 16.460938 39.5 17.109375 39.5 17.777344 L 39.5 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.445313 11 L 38.640625 16.046875 C 38.878906 16.597656 39 17.179688 39 17.777344 L 39 20 L 30.332031 20 C 30.214844 20 30.132813 19.9375 30.097656 19.902344 C 30.0625 19.867188 30 19.785156 30 19.667969 L 30 11.335938 C 30 11.148438 30.148438 11 30.335938 11 L 36.445313 11 M 37.101563 10 L 30.335938 10 C 29.597656 10 29 10.597656 29 11.332031 L 29 19.664063 C 29 20.402344 29.597656 21 30.332031 21 L 40 21 L 40 17.777344 C 40 17.042969 39.847656 16.320313 39.558594 15.648438 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 30.5 C 35.5 32.710938 33.710938 34.5 31.5 34.5 C 29.289063 34.5 27.5 32.710938 27.5 30.5 C 27.5 28.289063 29.289063 26.5 31.5 26.5 C 33.710938 26.5 35.5 28.289063 35.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 27 C 33.429688 27 35 28.570313 35 30.5 C 35 32.429688 33.429688 34 31.5 34 C 29.570313 34 28 32.429688 28 30.5 C 28 28.570313 29.570313 27 31.5 27 M 31.5 26 C 29.015625 26 27 28.015625 27 30.5 C 27 32.984375 29.015625 35 31.5 35 C 33.984375 35 36 32.984375 36 30.5 C 36 28.015625 33.984375 26 31.5 26 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 30.5 C 33 31.328125 32.328125 32 31.5 32 C 30.671875 32 30 31.328125 30 30.5 C 30 29.671875 30.671875 29 31.5 29 C 32.328125 29 33 29.671875 33 30.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.5 30.5 C 12.5 32.710938 10.710938 34.5 8.5 34.5 C 6.289063 34.5 4.5 32.710938 4.5 30.5 C 4.5 28.289063 6.289063 26.5 8.5 26.5 C 10.710938 26.5 12.5 28.289063 12.5 30.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.5 27 C 10.429688 27 12 28.570313 12 30.5 C 12 32.429688 10.429688 34 8.5 34 C 6.570313 34 5 32.429688 5 30.5 C 5 28.570313 6.570313 27 8.5 27 M 8.5 26 C 6.015625 26 4 28.015625 4 30.5 C 4 32.984375 6.015625 35 8.5 35 C 10.984375 35 13 32.984375 13 30.5 C 13 28.015625 10.984375 26 8.5 26 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 30.5 C 10 31.328125 9.328125 32 8.5 32 C 7.671875 32 7 31.328125 7 30.5 C 7 29.671875 7.671875 29 8.5 29 C 9.328125 29 10 29.671875 10 30.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 17.5 20.5 C 16.949219 20.5 16.5 20.050781 16.5 19.5 L 16.5 11.5 C 16.5 10.949219 16.949219 10.5 17.5 10.5 L 25.5 10.5 C 26.050781 10.5 26.5 10.949219 26.5 11.5 L 26.5 19.5 C 26.5 20.050781 26.050781 20.5 25.5 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 25.5 11 C 25.777344 11 26 11.222656 26 11.5 L 26 19.5 C 26 19.777344 25.777344 20 25.5 20 L 17.5 20 C 17.222656 20 17 19.777344 17 19.5 L 17 11.5 C 17 11.222656 17.222656 11 17.5 11 L 25.5 11 M 25.5 10 L 17.5 10 C 16.671875 10 16 10.671875 16 11.5 L 16 19.5 C 16 20.328125 16.671875 21 17.5 21 L 25.5 21 C 26.328125 21 27 20.328125 27 19.5 L 27 11.5 C 27 10.671875 26.328125 10 25.5 10 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 4.5 20.5 C 3.949219 20.5 3.5 20.050781 3.5 19.5 L 3.5 11.5 C 3.5 10.949219 3.949219 10.5 4.5 10.5 L 12.5 10.5 C 13.050781 10.5 13.5 10.949219 13.5 11.5 L 13.5 19.5 C 13.5 20.050781 13.050781 20.5 12.5 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 12.5 11 C 12.777344 11 13 11.222656 13 11.5 L 13 19.5 C 13 19.777344 12.777344 20 12.5 20 L 4.5 20 C 4.222656 20 4 19.777344 4 19.5 L 4 11.5 C 4 11.222656 4.222656 11 4.5 11 L 12.5 11 M 12.5 10 L 4.5 10 C 3.671875 10 3 10.671875 3 11.5 L 3 19.5 C 3 20.328125 3.671875 21 4.5 21 L 12.5 21 C 13.328125 21 14 20.328125 14 19.5 L 14 11.5 C 14 10.671875 13.328125 10 12.5 10 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 1.5 25 L 1 25 L 1 22 L 1.5 22 C 2.328125 22 3 22.671875 3 23.5 C 3 24.328125 2.328125 25 1.5 25 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 38.5 22 L 39 22 L 39 25 L 38.5 25 C 37.671875 25 37 24.328125 37 23.5 C 37 22.671875 37.671875 22 38.5 22 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/space-shuttle.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#B6DCFE;" d="M 1.5 15.5 L 6.285156 15.5 L 6.285156 18.5 L 1.5 18.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.785156 16 L 5.785156 18 L 2 18 L 2 16 L 5.785156 16 M 6.785156 15 L 1 15 L 1 19 L 6.785156 19 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1.5 21.5 L 6.285156 21.5 L 6.285156 24.5 L 1.5 24.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 5.785156 22 L 5.785156 24 L 2 24 L 2 22 L 5.785156 22 M 6.785156 21 L 1 21 L 1 25 L 6.785156 25 Z "></path>
+<path style=" fill:#98CCFD;" d="M 5.5 35.5 L 5.5 25.5 L 4.5 25.5 L 4.5 14.5 L 5.5 14.5 L 5.5 4.5 L 8.523438 4.5 C 10.175781 4.5 11.710938 5.304688 12.625 6.65625 L 17.785156 14.5 L 29.570313 14.5 C 34.367188 14.5 37.644531 18.882813 38.402344 20 C 37.648438 21.117188 34.386719 25.5 29.570313 25.5 L 17.785156 25.5 L 12.621094 33.351563 C 11.710938 34.695313 10.175781 35.5 8.523438 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 8.523438 5 C 10.011719 5 11.390625 5.722656 12.203125 6.925781 L 17.21875 14.550781 L 17.515625 15 L 29.570313 15 C 33.785156 15 36.808594 18.636719 37.796875 20.003906 C 36.816406 21.375 33.828125 25 29.570313 25 L 17.515625 25 L 17.21875 25.449219 L 12.214844 33.0625 C 11.390625 34.277344 10.011719 35 8.523438 35 L 6 35 L 6 25 L 5 25 L 5 15 L 6 15 L 6 5 L 8.523438 5 M 8.523438 4 L 5 4 L 5 14 L 4 14 L 4 26 L 5 26 L 5 36 L 8.523438 36 C 10.339844 36 12.03125 35.109375 13.039063 33.625 L 18.054688 26 L 29.570313 26 C 35.421875 26 39 20 39 20 C 39 20 35.386719 14 29.570313 14 L 18.054688 14 L 13.039063 6.375 C 12.03125 4.890625 10.339844 4 8.523438 4 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 30.5 17.640625 L 31.9375 18 C 32.855469 18.230469 33.5 19.050781 33.5 20 C 33.5 20.949219 32.855469 21.769531 31.9375 22 L 30.5 22.359375 Z "></path>
+<path style=" fill:#4788C7;" d="M 31 18.28125 L 31.816406 18.484375 C 32.515625 18.660156 33 19.28125 33 20 C 33 20.71875 32.515625 21.339844 31.816406 21.515625 L 31 21.71875 L 31 18.28125 M 30 17 L 30 23 L 32.058594 22.484375 C 33.199219 22.199219 34 21.175781 34 20 C 34 18.824219 33.199219 17.800781 32.058594 17.515625 Z "></path>
+<path style=" fill:#4788C7;" d="M 5 15 L 11.5 15 C 11.773438 15 12 14.773438 12 14.5 C 12 14.226563 11.773438 14 11.5 14 L 5 14 C 4.726563 14 4.5 14.226563 4.5 14.5 C 4.5 14.773438 4.726563 15 5 15 Z "></path>
+<path style=" fill:#4788C7;" d="M 5 26 L 11.5 26 C 11.773438 26 12 25.773438 12 25.5 C 12 25.226563 11.773438 25 11.5 25 L 5 25 C 4.726563 25 4.5 25.226563 4.5 25.5 C 4.5 25.773438 4.726563 26 5 26 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/steam-engine.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 25.5 17.5 L 25.5 12.890625 L 22.570313 6.542969 L 25.269531 2.5 L 30.730469 2.5 L 33.429688 6.542969 L 30.5 12.890625 L 30.5 17.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 30.464844 3 L 32.859375 6.589844 L 30.09375 12.582031 L 30 12.78125 L 30 17 L 26 17 L 26 12.78125 L 25.90625 12.582031 L 23.144531 6.589844 L 25.535156 3 L 30.464844 3 M 31 2 L 25 2 L 22 6.5 L 25 13 L 25 18 L 31 18 L 31 13 L 34 6.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 18.5 12.5 L 21.5 12.5 L 21.5 18.5 L 18.5 18.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 21 13 L 21 18 L 19 18 L 19 13 L 21 13 M 22 12 L 18 12 L 18 19 L 22 19 Z "></path>
+<path style=" fill:#4788C7;" d="M 39 24.5 C 39 25.878906 37.878906 27 36.5 27 C 35.121094 27 34 25.878906 34 24.5 C 34 23.121094 35.121094 22 36.5 22 C 37.878906 22 39 23.121094 39 24.5 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1.5 2.5 L 15.5 2.5 L 15.5 19.5 L 1.5 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 15 3 L 15 19 L 2 19 L 2 3 L 15 3 M 16 2 L 1 2 L 1 20 L 16 20 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1.5 32.5 L 1.5 17.5 L 29 17.5 C 33.136719 17.5 36.5 20.863281 36.5 25 C 36.5 29.136719 33.136719 32.5 29 32.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29 18 C 32.859375 18 36 21.140625 36 25 C 36 28.859375 32.859375 32 29 32 L 2 32 L 2 18 L 29 18 M 29 17 L 1 17 L 1 33 L 29 33 C 33.417969 33 37 29.417969 37 25 C 37 20.582031 33.417969 17 29 17 Z "></path>
+<path style=" fill:#98CCFD;" d="M 32.5 37.5 L 32.5 29.5 L 35.675781 29.5 L 39.230469 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35.351563 30 L 38.460938 37 L 33 37 L 33 30 L 35.351563 30 M 36 29 L 32 29 L 32 38 L 40 38 Z "></path>
+<path style=" fill:#98CCFD;" d="M 15.5 32 C 15.5 35.039063 13.039063 37.5 10 37.5 C 6.960938 37.5 4.5 35.039063 4.5 32 C 4.5 28.960938 6.960938 26.5 10 26.5 C 13.039063 26.5 15.5 28.960938 15.5 32 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 27 C 12.757813 27 15 29.242188 15 32 C 15 34.757813 12.757813 37 10 37 C 7.242188 37 5 34.757813 5 32 C 5 29.242188 7.242188 27 10 27 M 10 26 C 6.6875 26 4 28.6875 4 32 C 4 35.3125 6.6875 38 10 38 C 13.3125 38 16 35.3125 16 32 C 16 28.6875 13.3125 26 10 26 Z "></path>
+<path style=" fill:#98CCFD;" d="M 29.5 32 C 29.5 35.039063 27.039063 37.5 24 37.5 C 20.960938 37.5 18.5 35.039063 18.5 32 C 18.5 28.960938 20.960938 26.5 24 26.5 C 27.039063 26.5 29.5 28.960938 29.5 32 Z "></path>
+<path style=" fill:#4788C7;" d="M 24 27 C 26.757813 27 29 29.242188 29 32 C 29 34.757813 26.757813 37 24 37 C 21.242188 37 19 34.757813 19 32 C 19 29.242188 21.242188 27 24 27 M 24 26 C 20.6875 26 18 28.6875 18 32 C 18 35.3125 20.6875 38 24 38 C 27.3125 38 30 35.3125 30 32 C 30 28.6875 27.3125 26 24 26 Z "></path>
+<path style=" fill:#4788C7;" d="M 26 32 C 26 33.105469 25.105469 34 24 34 C 22.894531 34 22 33.105469 22 32 C 22 30.894531 22.894531 30 24 30 C 25.105469 30 26 30.894531 26 32 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 32 C 12 33.105469 11.105469 34 10 34 C 8.894531 34 8 33.105469 8 32 C 8 30.894531 8.894531 30 10 30 C 11.105469 30 12 30.894531 12 32 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 10.414063 32.5 L 22.519531 32.5 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 6.378906 2.5 L 18 2.5 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 22.417969 6.5 L 33.375 6.5 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 25.207031 12.5 L 30.585938 12.5 "></path>
+<path style=" fill:#DFF0FE;" d="M 8 12.5 C 6.621094 12.5 5.5 11.378906 5.5 10 L 5.5 2.5 L 15.5 2.5 L 15.5 12.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 15 3 L 15 12 L 8 12 C 6.898438 12 6 11.101563 6 10 L 6 3 L 15 3 M 16 2 L 5 2 L 5 10 C 5 11.65625 6.34375 13 8 13 L 16 13 Z "></path>
+<path style=" fill:#4788C7;" d="M 35.5 38 C 35.226563 38 35 37.773438 35 37.5 L 35 35.5 C 35 35.226563 35.226563 35 35.5 35 C 35.773438 35 36 35.226563 36 35.5 L 36 37.5 C 36 37.773438 35.773438 38 35.5 38 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/suv.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 3 28.5 C 1.621094 28.5 0.5 27.378906 0.5 26 L 0.5 17.273438 L 3.730469 9.988281 C 4.128906 9.085938 5.027344 8.5 6.015625 8.5 L 24.011719 8.5 C 25.101563 8.5 26.144531 9.019531 26.800781 9.886719 L 31.660156 16.292969 L 37.621094 17.335938 C 38.699219 17.488281 39.5 18.410156 39.5 19.480469 L 39.5 25 C 39.5 26.929688 37.929688 28.5 36 28.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 24.011719 9 C 24.945313 9 25.839844 9.445313 26.402344 10.1875 L 31.144531 16.4375 L 31.378906 16.75 L 31.765625 16.816406 L 37.566406 17.832031 C 38.382813 17.945313 39 18.65625 39 19.480469 L 39 25 C 39 26.652344 37.652344 28 36 28 L 3 28 C 1.898438 28 1 27.101563 1 26 L 1 17.378906 L 4.1875 10.1875 C 4.507813 9.46875 5.222656 9 6.015625 9 L 24.011719 9 M 24.011719 8 L 6.015625 8 C 4.828125 8 3.753906 8.699219 3.273438 9.785156 L 0 17.167969 L 0 26 C 0 27.65625 1.34375 29 3 29 L 36 29 C 38.210938 29 40 27.210938 40 25 L 40 19.480469 C 40 18.152344 39.023438 17.027344 37.707031 16.84375 L 31.9375 15.835938 L 27.199219 9.582031 C 26.445313 8.585938 25.265625 8 24.011719 8 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 4 19.832031 C 4 19.097656 3.550781 18.5 3 18.5 L 1 18.5 L 1 22.5 L 3 22.5 C 3.550781 22.5 4 21.902344 4 21.167969 C 4 20.917969 4 20.082031 4 19.832031 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 36 20.5 L 36 21.5 C 36 22.328125 36.671875 23 37.5 23 L 39 23 C 39 23 39 20.328125 39 19.523438 C 39 19.175781 38.929688 19 38.929688 19 L 37.5 19 C 36.671875 19 36 19.671875 36 20.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 7.605469 16.5 C 7.148438 16.5 6.722656 16.296875 6.4375 15.945313 C 6.152344 15.589844 6.042969 15.132813 6.136719 14.6875 L 7.449219 8.5 L 24.011719 8.5 C 25.101563 8.5 26.144531 9.019531 26.800781 9.886719 L 31.660156 16.292969 L 32.851563 16.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 24.011719 9 C 24.945313 9 25.839844 9.445313 26.402344 10.1875 L 30.8125 16 L 7.605469 16 C 7.300781 16 7.019531 15.863281 6.828125 15.628906 C 6.636719 15.394531 6.5625 15.089844 6.625 14.792969 L 7.855469 9 L 24.011719 9 M 24.011719 8 L 7.046875 8 L 5.648438 14.585938 C 5.382813 15.828125 6.332031 17 7.605469 17 L 38.289063 17 C 38.105469 16.929688 37.910156 16.871094 37.707031 16.839844 L 31.9375 15.832031 L 27.199219 9.582031 C 26.445313 8.585938 25.265625 8 24.011719 8 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 20.5 16.5 L 20.5 8.5 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 13.5 16.5 L 13.5 8.5 "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 28 C 35.5 30.484375 33.484375 32.5 31 32.5 C 28.515625 32.5 26.5 30.484375 26.5 28 C 26.5 25.515625 28.515625 23.5 31 23.5 C 33.484375 23.5 35.5 25.515625 35.5 28 Z "></path>
+<path style=" fill:#4788C7;" d="M 31 24 C 33.207031 24 35 25.792969 35 28 C 35 30.207031 33.207031 32 31 32 C 28.792969 32 27 30.207031 27 28 C 27 25.792969 28.792969 24 31 24 M 31 23 C 28.238281 23 26 25.238281 26 28 C 26 30.761719 28.238281 33 31 33 C 33.761719 33 36 30.761719 36 28 C 36 25.238281 33.761719 23 31 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 32 28 C 32 28.550781 31.550781 29 31 29 C 30.449219 29 30 28.550781 30 28 C 30 27.449219 30.449219 27 31 27 C 31.550781 27 32 27.449219 32 28 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 13.5 28 C 13.5 30.484375 11.484375 32.5 9 32.5 C 6.515625 32.5 4.5 30.484375 4.5 28 C 4.5 25.515625 6.515625 23.5 9 23.5 C 11.484375 23.5 13.5 25.515625 13.5 28 Z "></path>
+<path style=" fill:#4788C7;" d="M 9 24 C 11.207031 24 13 25.792969 13 28 C 13 30.207031 11.207031 32 9 32 C 6.792969 32 5 30.207031 5 28 C 5 25.792969 6.792969 24 9 24 M 9 23 C 6.238281 23 4 25.238281 4 28 C 4 30.761719 6.238281 33 9 33 C 11.761719 33 14 30.761719 14 28 C 14 25.238281 11.761719 23 9 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 28 C 10 28.550781 9.550781 29 9 29 C 8.449219 29 8 28.550781 8 28 C 8 27.449219 8.449219 27 9 27 C 9.550781 27 10 27.449219 10 28 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/tour-bus.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 4 33.5 C 2.621094 33.5 1.5 32.378906 1.5 31 L 1.5 7 C 1.5 5.070313 3.070313 3.5 5 3.5 L 31.722656 3.5 C 33.382813 3.5 34.828125 4.683594 35.152344 6.3125 L 38.511719 23.097656 L 38.5 31 C 38.5 32.378906 37.378906 33.5 36 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.722656 4 C 33.144531 4 34.382813 5.015625 34.664063 6.410156 L 38 23.097656 L 38 31 C 38 32.101563 37.101563 33 36 33 L 4 33 C 2.898438 33 2 32.101563 2 31 L 2 7 C 2 5.347656 3.347656 4 5 4 L 31.722656 4 M 31.722656 3 L 5 3 C 2.789063 3 1 4.789063 1 7 L 1 31 C 1 32.65625 2.34375 34 4 34 L 36 34 C 37.65625 34 39 32.65625 39 31 L 39 23 L 35.644531 6.214844 C 35.269531 4.347656 33.628906 3 31.722656 3 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 33.5 33.5 C 33.5 35.710938 31.710938 37.5 29.5 37.5 C 27.289063 37.5 25.5 35.710938 25.5 33.5 C 25.5 31.289063 27.289063 29.5 29.5 29.5 C 31.710938 29.5 33.5 31.289063 33.5 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 29.5 30 C 31.429688 30 33 31.570313 33 33.5 C 33 35.429688 31.429688 37 29.5 37 C 27.570313 37 26 35.429688 26 33.5 C 26 31.570313 27.570313 30 29.5 30 M 29.5 29 C 27.015625 29 25 31.015625 25 33.5 C 25 35.984375 27.015625 38 29.5 38 C 31.984375 38 34 35.984375 34 33.5 C 34 31.015625 31.984375 29 29.5 29 Z "></path>
+<path style=" fill:#4788C7;" d="M 31 33.5 C 31 34.328125 30.328125 35 29.5 35 C 28.671875 35 28 34.328125 28 33.5 C 28 32.671875 28.671875 32 29.5 32 C 30.328125 32 31 32.671875 31 33.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 13.5 33.5 C 13.5 35.710938 11.710938 37.5 9.5 37.5 C 7.289063 37.5 5.5 35.710938 5.5 33.5 C 5.5 31.289063 7.289063 29.5 9.5 29.5 C 11.710938 29.5 13.5 31.289063 13.5 33.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 9.5 30 C 11.429688 30 13 31.570313 13 33.5 C 13 35.429688 11.429688 37 9.5 37 C 7.570313 37 6 35.429688 6 33.5 C 6 31.570313 7.570313 30 9.5 30 M 9.5 29 C 7.015625 29 5 31.015625 5 33.5 C 5 35.984375 7.015625 38 9.5 38 C 11.984375 38 14 35.984375 14 33.5 C 14 31.015625 11.984375 29 9.5 29 Z "></path>
+<path style=" fill:#4788C7;" d="M 11 33.5 C 11 34.328125 10.328125 35 9.5 35 C 8.671875 35 8 34.328125 8 33.5 C 8 32.671875 8.671875 32 9.5 32 C 10.328125 32 11 32.671875 11 33.5 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 2.5 28 L 2 28 L 2 25 L 2.5 25 C 3.328125 25 4 25.671875 4 26.5 C 4 27.328125 3.328125 28 2.5 28 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 37.5 25 L 38 25 L 38 28 L 37.5 28 C 36.671875 28 36 27.328125 36 26.5 C 36 25.671875 36.671875 25 37.5 25 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.5 22.5 L 1.5 14.5 L 36.789063 14.5 L 38.390625 22.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.378906 15 L 37.78125 22 L 2 22 L 2 15 L 36.378906 15 M 37.199219 14 L 1 14 L 1 23 L 39 23 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 1.5 11.5 L 1.5 7 C 1.5 5.070313 3.070313 3.5 5 3.5 L 31.691406 3.5 C 33.367188 3.5 34.8125 4.695313 35.128906 6.34375 L 36.109375 11.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.691406 4 C 33.128906 4 34.367188 5.027344 34.636719 6.4375 L 35.507813 11 L 2 11 L 2 7 C 2 5.347656 3.347656 4 5 4 L 31.691406 4 M 31.691406 3 L 5 3 C 2.789063 3 1 4.789063 1 7 L 1 12 L 36.714844 12 L 35.617188 6.253906 C 35.261719 4.363281 33.609375 3 31.691406 3 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 9.5 11.179688 L 9.5 3.035156 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 18.5 11.179688 L 18.5 3.035156 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 27.5 11.179688 L 27.5 3.035156 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 9.5 22.285156 L 9.5 14.714844 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 18.5 22.285156 L 18.5 14.714844 "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 27.5 22.285156 L 27.5 14.714844 "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/tow-truck.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#DFF0FE;" d="M 11.285156 22.5 L 1.5 5.863281 L 1.5 3.5 L 3.761719 3.5 L 18.960938 22.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 3.519531 4 L 17.917969 22 L 11.570313 22 L 2 5.726563 L 2 4 L 3.519531 4 M 4 3 L 1 3 L 1 6 L 11 23 L 20 23 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 9.5 21.5 L 19.5 21.5 L 19.5 25.5 L 9.5 25.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 22 L 19 25 L 10 25 L 10 22 L 19 22 M 20 21 L 9 21 L 9 26 L 20 26 Z "></path>
+<path style=" fill:#98CCFD;" d="M 3 32.5 C 1.621094 32.5 0.5 31.378906 0.5 30 L 0.5 24.5 L 22.5 24.5 L 22.5 12 C 22.5 10.621094 23.621094 9.5 25 9.5 L 34.699219 9.5 C 35.292969 9.5 35.828125 9.851563 36.070313 10.390625 L 39.027344 17.039063 C 39.339844 17.746094 39.5 18.5 39.5 19.273438 L 39.5 30 C 39.5 31.378906 38.378906 32.5 37 32.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 34.699219 10 C 35.09375 10 35.453125 10.234375 35.613281 10.59375 L 38.570313 17.242188 C 38.855469 17.886719 39 18.570313 39 19.273438 L 39 30 C 39 31.101563 38.101563 32 37 32 L 3 32 C 1.898438 32 1 31.101563 1 30 L 1 25 L 23 25 L 23 12 C 23 10.898438 23.898438 10 25 10 L 34.699219 10 M 34.699219 9 L 25 9 C 23.34375 9 22 10.34375 22 12 L 22 24 L 0 24 L 0 30 C 0 31.65625 1.34375 33 3 33 L 37 33 C 38.65625 33 40 31.65625 40 30 L 40 19.273438 C 40 18.433594 39.824219 17.601563 39.484375 16.835938 L 36.527344 10.1875 C 36.207031 9.464844 35.492188 9 34.699219 9 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 29.5 21.5 C 28.949219 21.5 28.5 21.050781 28.5 20.5 L 28.5 13.5 C 28.5 12.949219 28.949219 12.5 29.5 12.5 L 37.007813 12.5 L 39.027344 17.039063 C 39.339844 17.746094 39.5 18.5 39.5 19.273438 L 39.5 21.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 36.683594 13 L 38.570313 17.242188 C 38.855469 17.886719 39 18.570313 39 19.273438 L 39 21 L 29.5 21 C 29.222656 21 29 20.777344 29 20.5 L 29 13.5 C 29 13.222656 29.222656 13 29.5 13 L 36.683594 13 M 37.332031 12 L 29.5 12 C 28.671875 12 28 12.671875 28 13.5 L 28 20.5 C 28 21.328125 28.671875 22 29.5 22 L 40 22 L 40 19.273438 C 40 18.433594 39.824219 17.601563 39.484375 16.835938 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 4 L 1.5 15.5 "></path>
+<path style=" fill:#FFFFFF;" d="M 38.5 24 L 39 24 L 39 27 L 38.5 27 C 37.671875 27 37 26.328125 37 25.5 C 37 24.671875 37.671875 24 38.5 24 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 1.5 29 L 1 29 L 1 26 L 1.5 26 C 2.328125 26 3 26.671875 3 27.5 C 3 28.328125 2.328125 29 1.5 29 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 35.5 32.5 C 35.5 34.710938 33.710938 36.5 31.5 36.5 C 29.289063 36.5 27.5 34.710938 27.5 32.5 C 27.5 30.289063 29.289063 28.5 31.5 28.5 C 33.710938 28.5 35.5 30.289063 35.5 32.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 31.5 29 C 33.429688 29 35 30.570313 35 32.5 C 35 34.429688 33.429688 36 31.5 36 C 29.570313 36 28 34.429688 28 32.5 C 28 30.570313 29.570313 29 31.5 29 M 31.5 28 C 29.015625 28 27 30.015625 27 32.5 C 27 34.984375 29.015625 37 31.5 37 C 33.984375 37 36 34.984375 36 32.5 C 36 30.015625 33.984375 28 31.5 28 Z "></path>
+<path style=" fill:#4788C7;" d="M 33 32.5 C 33 33.328125 32.328125 34 31.5 34 C 30.671875 34 30 33.328125 30 32.5 C 30 31.671875 30.671875 31 31.5 31 C 32.328125 31 33 31.671875 33 32.5 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 14.5 32.5 C 14.5 34.710938 12.710938 36.5 10.5 36.5 C 8.289063 36.5 6.5 34.710938 6.5 32.5 C 6.5 30.289063 8.289063 28.5 10.5 28.5 C 12.710938 28.5 14.5 30.289063 14.5 32.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 10.5 29 C 12.429688 29 14 30.570313 14 32.5 C 14 34.429688 12.429688 36 10.5 36 C 8.570313 36 7 34.429688 7 32.5 C 7 30.570313 8.570313 29 10.5 29 M 10.5 28 C 8.015625 28 6 30.015625 6 32.5 C 6 34.984375 8.015625 37 10.5 37 C 12.984375 37 15 34.984375 15 32.5 C 15 30.015625 12.984375 28 10.5 28 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 32.5 C 12 33.328125 11.328125 34 10.5 34 C 9.671875 34 9 33.328125 9 32.5 C 9 31.671875 9.671875 31 10.5 31 C 11.328125 31 12 31.671875 12 32.5 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 15.5 L 2.5 15.5 C 3.605469 15.5 4.5 16.394531 4.5 17.5 L 4.5 18.5 C 4.5 19.605469 3.605469 20.5 2.5 20.5 C 1.394531 20.5 0.5 19.605469 0.5 18.5 "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/transportation.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#98CCFD;" d="M 3 19.5 C 2.171875 19.5 1.5 18.828125 1.5 18 L 1.5 16 C 1.5 15.171875 2.171875 14.5 3 14.5 L 37 14.5 C 37.828125 14.5 38.5 15.171875 38.5 16 L 38.5 18 C 38.5 18.828125 37.828125 19.5 37 19.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 37 15 C 37.550781 15 38 15.449219 38 16 L 38 18 C 38 18.550781 37.550781 19 37 19 L 3 19 C 2.449219 19 2 18.550781 2 18 L 2 16 C 2 15.449219 2.449219 15 3 15 L 37 15 M 37 14 L 3 14 C 1.894531 14 1 14.894531 1 16 L 1 18 C 1 19.105469 1.894531 20 3 20 L 37 20 C 38.105469 20 39 19.105469 39 18 L 39 16 C 39 14.894531 38.105469 14 37 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 30 38.5 C 29.726563 38.5 29.5 38.277344 29.5 38 L 29.5 35 C 29.5 34.722656 29.726563 34.5 30 34.5 L 35 34.5 C 35.273438 34.5 35.5 34.722656 35.5 35 L 35.5 38 C 35.5 38.277344 35.273438 38.5 35 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35 35 L 35 38 L 30 38 L 30 35 L 35 35 M 35 34 L 30 34 C 29.449219 34 29 34.449219 29 35 L 29 38 C 29 38.550781 29.449219 39 30 39 L 35 39 C 35.550781 39 36 38.550781 36 38 L 36 35 C 36 34.449219 35.550781 34 35 34 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 5 38.5 C 4.726563 38.5 4.5 38.277344 4.5 38 L 4.5 35 C 4.5 34.722656 4.726563 34.5 5 34.5 L 10 34.5 C 10.273438 34.5 10.5 34.722656 10.5 35 L 10.5 38 C 10.5 38.277344 10.273438 38.5 10 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 10 35 L 10 38 L 5 38 L 5 35 L 10 35 M 10 34 L 5 34 C 4.449219 34 4 34.449219 4 35 L 4 38 C 4 38.550781 4.449219 39 5 39 L 10 39 C 10.550781 39 11 38.550781 11 38 L 11 35 C 11 34.449219 10.550781 34 10 34 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.5 35.5 L 4.5 21 L 6.296875 5.769531 C 6.621094 3.339844 8.722656 1.5 11.183594 1.5 L 28.820313 1.5 C 31.277344 1.5 33.378906 3.339844 33.703125 5.777344 L 35.503906 21.058594 L 35.5 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28.820313 2 C 31.027344 2 32.917969 3.652344 33.207031 5.828125 L 35 21.058594 L 35 35 L 5 35 L 5 21.058594 L 6.792969 5.84375 C 7.085938 3.652344 8.972656 2 11.179688 2 L 28.820313 2 M 28.820313 1 L 11.179688 1 C 8.460938 1 6.160156 3.015625 5.800781 5.710938 L 4 21 L 4 36 L 36 36 L 36 21 L 34.199219 5.710938 C 33.839844 3.015625 31.539063 1 28.820313 1 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 4.5625 20.5 L 6.070313 7.5 L 33.90625 7.5 L 35.4375 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 33.460938 8 L 34.875 20 L 5.121094 20 L 6.515625 8 L 33.460938 8 M 34.347656 7 L 5.625 7 L 4 21 L 36 21 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 33 26 C 33 27.105469 32.105469 28 31 28 C 29.894531 28 29 27.105469 29 26 C 29 24.894531 29.894531 24 31 24 C 32.105469 24 33 24.894531 33 26 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 11 26 C 11 27.105469 10.105469 28 9 28 C 7.894531 28 7 27.105469 7 26 C 7 24.894531 7.894531 24 9 24 C 10.105469 24 11 24.894531 11 26 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 12.582031 35.5 L 13.804688 27.421875 C 13.953125 26.324219 14.898438 25.5 16 25.5 L 24 25.5 C 25.101563 25.5 26.046875 26.324219 26.195313 27.414063 L 27.417969 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 24 26 C 24.851563 26 25.582031 26.636719 25.699219 27.496094 L 26.835938 35 L 13.164063 35 L 14.300781 27.484375 C 14.417969 26.636719 15.148438 26 16 26 L 24 26 M 24 25 L 16 25 C 14.644531 25 13.492188 26.003906 13.3125 27.347656 L 12 36 L 28 36 L 26.6875 27.347656 C 26.507813 26.003906 25.355469 25 24 25 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/trolleybus.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 24.785156 6 L 23.265625 6 C 22.988281 6 22.765625 5.777344 22.765625 5.5 C 22.765625 5.222656 22.988281 5 23.265625 5 L 24.300781 5 L 28.109375 0.1875 C 28.28125 -0.0273438 28.59375 -0.0625 28.8125 0.105469 C 29.027344 0.277344 29.0625 0.59375 28.890625 0.808594 Z "></path>
+<path style=" fill:#4788C7;" d="M 15.214844 6 L 16.734375 6 C 17.011719 6 17.234375 5.777344 17.234375 5.5 C 17.234375 5.222656 17.011719 5 16.734375 5 L 15.699219 5 L 11.890625 0.1875 C 11.71875 -0.0273438 11.40625 -0.0625 11.1875 0.105469 C 10.972656 0.277344 10.9375 0.59375 11.109375 0.808594 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 5 38.5 C 4.726563 38.5 4.5 38.277344 4.5 38 L 4.5 35 C 4.5 34.722656 4.726563 34.5 5 34.5 L 11 34.5 C 11.273438 34.5 11.5 34.722656 11.5 35 L 11.5 38 C 11.5 38.277344 11.273438 38.5 11 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 11 35 L 11 38 L 5 38 L 5 35 L 11 35 M 11 34 L 5 34 C 4.449219 34 4 34.449219 4 35 L 4 38 C 4 38.550781 4.449219 39 5 39 L 11 39 C 11.550781 39 12 38.550781 12 38 L 12 35 C 12 34.449219 11.550781 34 11 34 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 29 38.5 C 28.726563 38.5 28.5 38.277344 28.5 38 L 28.5 35 C 28.5 34.722656 28.726563 34.5 29 34.5 L 35 34.5 C 35.273438 34.5 35.5 34.722656 35.5 35 L 35.5 38 C 35.5 38.277344 35.273438 38.5 35 38.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35 35 L 35 38 L 29 38 L 29 35 L 35 35 M 35 34 L 29 34 C 28.449219 34 28 34.449219 28 35 L 28 38 C 28 38.550781 28.449219 39 29 39 L 35 39 C 35.550781 39 36 38.550781 36 38 L 36 35 C 36 34.449219 35.550781 34 35 34 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.5 35.5 L 4.5 8 C 4.5 6.070313 6.070313 4.5 8 4.5 L 12.535156 4.5 L 12.652344 4.167969 C 13.007813 3.171875 13.949219 2.5 15 2.5 L 25 2.5 C 26.050781 2.5 26.992188 3.171875 27.347656 4.167969 L 27.464844 4.5 L 32 4.5 C 33.929688 4.5 35.5 6.070313 35.5 8 L 35.5 35.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 25 3 C 25.835938 3 26.589844 3.535156 26.875 4.335938 L 27.109375 5 L 32 5 C 33.652344 5 35 6.347656 35 8 L 35 35 L 5 35 L 5 8 C 5 6.347656 6.347656 5 8 5 L 12.890625 5 L 13.125 4.335938 C 13.410156 3.535156 14.164063 3 15 3 L 25 3 M 25 2 L 15 2 C 13.695313 2 12.597656 2.835938 12.183594 4 L 8 4 C 5.789063 4 4 5.789063 4 8 L 4 36 L 36 36 L 36 8 C 36 5.789063 34.210938 4 32 4 L 27.816406 4 C 27.402344 2.835938 26.304688 2 25 2 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 4.5 8.5 L 35.5 8.5 L 35.5 23.5 L 4.5 23.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35 9 L 35 23 L 5 23 L 5 9 L 35 9 M 36 8 L 4 8 L 4 24 L 36 24 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 28 29 L 33 29 L 33 32 L 28 32 Z "></path>
+<path style=" fill:#FFFFFF;" d="M 7 29 L 12 29 L 12 32 L 7 32 Z "></path>
+<path style=" fill:#98CCFD;" d="M 2 20.5 C 1.726563 20.5 1.5 20.277344 1.5 20 L 1.5 15 C 1.5 14.722656 1.726563 14.5 2 14.5 L 4.5 14.5 L 4.5 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 4 15 L 4 20 L 2 20 L 2 15 L 4 15 M 5 14 L 2 14 C 1.449219 14 1 14.449219 1 15 L 1 20 C 1 20.550781 1.449219 21 2 21 L 5 21 Z "></path>
+<path style=" fill:#98CCFD;" d="M 35.5 20.5 L 35.5 14.5 L 38 14.5 C 38.273438 14.5 38.5 14.722656 38.5 15 L 38.5 20 C 38.5 20.277344 38.273438 20.5 38 20.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 38 15 L 38 20 L 36 20 L 36 15 L 38 15 M 38 14 L 35 14 L 35 21 L 38 21 C 38.550781 21 39 20.550781 39 20 L 39 15 C 39 14.449219 38.550781 14 38 14 Z "></path>
+</g>
+</svg>
\ No newline at end of file

src/assets/icons/water-transportation.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" version="1.1">
+<g id="surface1">
+<path style=" fill:#4788C7;" d="M 21 7 L 19 7 L 19 2 C 19 1.449219 19.449219 1 20 1 C 20.550781 1 21 1.449219 21 2 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 7.5 21.5 L 7.5 8.5 L 11.5 8.5 L 11.5 4.5 L 28.5 4.5 L 28.5 8.5 L 32.5 8.5 L 32.5 21.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 28 5 L 28 9 L 32 9 L 32 21 L 8 21 L 8 9 L 12 9 L 12 5 L 28 5 M 29 4 L 11 4 L 11 8 L 7 8 L 7 22 L 33 22 L 33 8 L 29 8 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 8 L 21 8 L 21 10 L 19 10 Z "></path>
+<path style=" fill:#4788C7;" d="M 23 8 L 25 8 L 25 10 L 23 10 Z "></path>
+<path style=" fill:#4788C7;" d="M 15 8 L 17 8 L 17 10 L 15 10 Z "></path>
+<path style=" fill:#4788C7;" d="M 11 12 L 13 12 L 13 14 L 11 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 23 12 L 25 12 L 25 14 L 23 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 27 12 L 29 12 L 29 14 L 27 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 15 12 L 17 12 L 17 14 L 15 14 Z "></path>
+<path style=" fill:#4788C7;" d="M 19 12 L 21 12 L 21 14 L 19 14 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 4.5 37.5 L 4.5 25.871094 L 1.734375 20.855469 C 1.429688 20.230469 1.441406 19.496094 1.78125 18.859375 C 2.121094 18.226563 2.726563 17.808594 3.441406 17.710938 L 20 15.503906 L 36.558594 17.710938 C 37.273438 17.808594 37.878906 18.226563 38.21875 18.859375 C 38.558594 19.496094 38.570313 20.230469 38.257813 20.878906 L 35.5 25.871094 L 35.5 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 20 16.007813 L 36.492188 18.207031 C 37.046875 18.28125 37.515625 18.605469 37.777344 19.097656 C 38.035156 19.582031 38.050781 20.144531 37.816406 20.640625 L 35.125 25.515625 L 35 25.742188 L 35 37 L 5 37 L 5 25.742188 L 4.875 25.515625 L 2.195313 20.65625 C 1.949219 20.15625 1.960938 19.585938 2.222656 19.097656 C 2.488281 18.605469 2.957031 18.28125 3.507813 18.207031 L 20 16.007813 M 20 15 L 3.375 17.21875 C 1.539063 17.460938 0.484375 19.433594 1.296875 21.097656 L 4 26 L 4 38 L 36 38 L 36 26 L 38.707031 21.097656 C 39.519531 19.433594 38.460938 17.460938 36.625 17.21875 Z "></path>
+<path style=" fill:#DFF0FE;" d="M 2.222656 19.097656 C 1.960938 19.589844 1.949219 20.15625 2.195313 20.660156 L 4.875 25.515625 L 5 25.742188 L 5 37 L 20 37 L 20 16.007813 L 3.507813 18.207031 C 2.953125 18.28125 2.488281 18.605469 2.222656 19.097656 Z "></path>
+<path style=" fill:#4788C7;" d="M 31 23 C 31 21.894531 30.328125 21 29.5 21 C 28.671875 21 28 21.894531 28 23 C 28 24.105469 28.671875 25 29.5 25 C 30.328125 25 31 24.105469 31 23 Z "></path>
+<path style=" fill:#4788C7;" d="M 12 23 C 12 21.894531 11.328125 21 10.5 21 C 9.671875 21 9 21.894531 9 23 C 9 24.105469 9.671875 25 10.5 25 C 11.328125 25 12 24.105469 12 23 Z "></path>
+<path style=" fill:#98CCFD;" d="M 4.5 28.5 L 35.5 28.5 L 35.5 37.5 L 4.5 37.5 Z "></path>
+<path style=" fill:#4788C7;" d="M 35 29 L 35 37 L 5 37 L 5 29 L 35 29 M 36 28 L 4 28 L 4 38 L 36 38 Z "></path>
+<path style=" fill:#98CCFD;" d="M 5 28 L 35 28 L 35 38 L 5 38 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 5 28 L 20 28 L 20 38 L 5 38 Z "></path>
+<path style=" fill:#B6DCFE;" d="M 1 39 L 39 39 L 39 31.878906 C 37.691406 31.613281 36.148438 31 35 31 C 33.542969 31 31.4375 32 30 32 C 28.5625 32 26.457031 31 25 31 C 23.542969 31 21.4375 32 20 32 C 18.5625 32 16.457031 31 15 31 C 13.542969 31 11.4375 32 10 32 C 8.5625 32 6.457031 31 5 31 C 3.851563 31 2.308594 31.613281 1 31.878906 Z "></path>
+<path style="fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke:#4788C7;stroke-opacity:1;stroke-miterlimit:10;" d="M 1.5 32.277344 C 1.863281 32.191406 2.238281 32.085938 2.613281 31.980469 C 3.460938 31.746094 4.335938 31.5 5 31.5 C 5.664063 31.5 6.535156 31.746094 7.382813 31.984375 C 8.28125 32.238281 9.214844 32.5 10 32.5 C 10.785156 32.5 11.71875 32.238281 12.617188 31.984375 C 13.464844 31.746094 14.335938 31.5 15 31.5 C 15.664063 31.5 16.535156 31.746094 17.382813 31.984375 C 18.28125 32.238281 19.214844 32.5 20 32.5 C 20.785156 32.5 21.71875 32.238281 22.617188 31.984375 C 23.464844 31.746094 24.335938 31.5 25 31.5 C 25.664063 31.5 26.535156 31.746094 27.382813 31.984375 C 28.28125 32.238281 29.214844 32.5 30 32.5 C 30.785156 32.5 31.71875 32.238281 32.617188 31.984375 C 33.464844 31.746094 34.335938 31.5 35 31.5 C 35.664063 31.5 36.539063 31.746094 37.386719 31.980469 C 37.761719 32.085938 38.136719 32.191406 38.5 32.277344 "></path>
+</g>
+</svg>
\ No newline at end of file

src/catagory.ts

+export const catagory = [
+    {
+        type: 'Drama',
+    },
+    {
+        type: 'BL',
+    },
+    {
+        type: 'Suspense, Thriller',
+    },
+    {
+        type: 'Melodrama',
+    },
+    {
+        type: 'Romance, Melodrama, Suspense',
+    },
+    {
+        type: 'Romantic Comedy',
+    },
+];
\ No newline at end of file

src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

src/environments/environment.ts

+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

src/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Mean</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+
+    <link
+      rel="prefetch"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      as="style"
+      crossorigin
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
+      as="style"
+      crossorigin
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
+      rel="stylesheet"
+    />
+      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+  <body class="mat-typography">
+    <app-root></app-root>
+  </body>
+</html>

src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.log(err));

src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.

src/styles.scss

+/* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
+@import "~@angular/material/theming";
+
+$custom-typography: mat-typography-config(
+  $font-family: "Exo",
+);
+
+@include mat-core($custom-typography);
+
+body {
+  background-color: #e4e4e4;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  margin: 0;
+  app-root * {
+    font-family: "Exo", sans-serif;
+  }
+}
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}

src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

src/typings.d.ts

+import { User } from '@app/shared/interfaces';
+
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+
+declare global {
+  interface Window {
+    user: User | null;
+  }
+}

tsconfig.app.json

+{
+  "extends": "./tsconfig.json",
+  "files": [
+    "src/polyfills.ts",
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}

tsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@app/*": [
+        "src/app/*"
+      ]
+    },
+    "target": "ES2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "strict": true,
+    "sourceMap": true,
+    "declaration": false,
+    "importHelpers": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "suppressImplicitAnyIndexErrors": true
+  }
+}

tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "module": "commonjs",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

tslint.json

+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
+    "no-unused-expression": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "no-output-on-prefix": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}