.gitignore

@@ -6,6 +6,7 @@ db/
 .yarn/
 public/*.js
 public/*.map
+public/*.css
 .yarnrc.yml
 .pnp*
 build/

package.json

@@ -4,7 +4,8 @@
     "description": "Open Travel Mapper",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "yarn build-server && yarn build-client",
+        "build": "yarn build-server && yarn build-client && yarn build-style",
+        "build-style": "esbuild src/style/index.css --outfile=public/index.css --bundle --minify ",
         "build-client": "esbuild src/client/main.ts --outfile=public/main.js --tree-shaking=true  --bundle --minify --sourcemap --tsconfig=tsconfig-client.json",
         "build-server": "esbuild src/server/**/*.ts --outdir=build --platform=node --format=cjs",
         "start": "node build/main.js",

src/server/main.ts

@@ -25,10 +25,10 @@ server.register(fastify_view, {
 
 server.register(api, { prefix: "/api" });
 
-server.get("/", (req, reply) => reply.view("/template/home.pug"));
+server.get("/", (req, reply) => reply.view("/src/template/home.pug"));
-server.get("/:id", (req, reply) => reply.view("/template/journey.pug"));
+server.get("/:id", (req, reply) => reply.view("/src/template/journey.pug"));
-server.get("/view/:id", (req, reply) => reply.view("/template/view.pug"));
+server.get("/view/:id", (req, reply) => reply.view("/src/template/view.pug"));
-server.get("/short/:id", (req, reply) => reply.view("/template/short.pug"));
+server.get("/short/:id", (req, reply) => reply.view("/src/template/short.pug"));
 
 server.listen({ port: 8080, host: "0.0.0.0" }, (err, address) => {
   if (err) throw err;

src/style/custom.css

@@ -0,0 +1,207 @@
+.leaflet-popup-close-button {
+    visibility: hidden;
+}
+
+.p-abs {
+    position: absolute;
+}
+
+.list-group {
+    overflow: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+    padding: 1rem 0rem;
+}
+
+.list-group-item {
+    border: 1px solid var(--darkdark);
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    text-align: center;
+    padding: 0.5rem 0.8rem;
+}
+
+.list-group-item:hover {
+    filter: brightness(85%);
+}
+
+.leaflet-control-attribution {
+    display: none;
+}
+
+.display-none {
+    display: none;
+}
+
+.col-0 {
+    flex: 0 0 0%;
+    max-width: 0%;
+    overflow: hidden;
+}
+
+.map-container,
+.drawer-container {
+    transition: flex 0.5s ease-in-out, max-width 0.5s ease-in-out;
+}
+
+.map-container {
+    min-width: 52px;
+    height: 100%;
+}
+
+.drawer-container {
+    height: 100%;
+    right: 0;
+    top: 0;
+    overflow: scroll;
+}
+
+.travel-path-icon {
+    margin-left: -12px;
+    margin-top: -32px;
+}
+
+
+.ml-auto {
+    margin-left: auto;
+}
+
+.mr-auto {
+    margin-right: auto;
+}
+
+.input .mx-input {
+    height: 40px;
+}
+
+.h-100 {
+    height: 100%;
+}
+
+.map-menu {
+    position: absolute;
+    display: flex;
+    z-index: 1100;
+    right: 0;
+    flex-direction: column;
+    gap: 10px;
+    margin: 5px;
+}
+
+.map-menu-top {
+    top: 0;
+}
+
+.map-menu-bottom {
+    bottom: 0;
+}
+
+.map-menu-center {
+    top: 50%;
+}
+
+.padding-1 {
+    padding: 5px;
+}
+
+.map-menu-item {
+    background-color: var(--darkdark);
+    padding: 5px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.map-menu-item:hover {
+    filter: brightness(150%);
+}
+
+.map-menu-sub {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 5px;
+}
+
+.map-menu-item,
+.map-menu-sub-item {
+    background-color: var(--darkdark);
+    padding: 5px;
+    border-radius: 50%;
+    cursor: pointer;
+    float: right;
+    width: 42px;
+    height: 42px;
+    align-content: center;
+    text-align: center;
+}
+
+.vue2leaflet-map {
+    border-radius: var(--border-radius);
+}
+
+.leaflet-popup-content {
+    margin: 10px 20px !important;
+    /* display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto !important;
+  max-width: 100%; */
+}
+
+
+.leaflet-popup>.leaflet-popup-content-wrapper {
+    border-radius: var(--border-radius);
+    width: 350px;
+}
+
+.leaflet-popup-button-group {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    margin: 2px 6px;
+}
+
+.leaflet-popup-button-group>a {
+    cursor: pointer;
+}
+
+.leaflet-popup-button-group>a:hover {
+    cursor: pointer;
+    filter: brightness(150%);
+}
+
+.leaflet-popup-button-group>a>i {
+    font-size: 1em;
+}
+
+.query-result {
+    display: flex;
+    align-items: center;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+}
+
+.query-result:hover {
+    filter: brightness(85%);
+}
+
+.scroll-content>div:first-child {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+}
+
+.scroll-content>div:nth-last-child(3) {
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+}
+
+.scroll-content>div:last-child {
+    border-radius: var(--border-radius);
+}
+
+.mx-datepicker {
+    width: 100% !important;
+}

src/style/define.css

@@ -0,0 +1,19 @@
+:root {
+    --black: #030B12;
+    --darkdark: #0C1D2E;
+    --dark: #203A53;
+    --lightdark: #425F7C;
+    --light: #93A9BE;
+    --lightlight: #B6C5D5;
+    --white: #F0F3F7;
+    --orange: ##F5B97D;
+    --yellow: #F5F57D;
+    --green: #B9F57D;
+    --turquoise: #7DF5B9;
+    --blue: #7DB9F5;
+    --purple: #B97DF5;
+    --pink: #F57DB9;
+    --red: #F57D7D;
+
+    --border-radius: 3px;
+}

src/style/index.css

@@ -0,0 +1,13 @@
+@import './define.css';
+
+@import './module/input.css';
+@import './module/load_n_spin.css';
+@import './module/typography.css';
+@import './module/layout.css';
+@import './module/general.css';
+
+@import './custom.css';
+
+[v-cloak] {
+    display: none;
+}

src/style/module/general.css

@@ -0,0 +1,202 @@
+html,
+body,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+time,
+mark,
+audio,
+video {
+    background: transparent;
+    border: 0;
+    font-size: 100%;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    vertical-align: baseline;
+}
+
+article,
+aside,
+figure,
+footer,
+header,
+main,
+nav,
+section {
+    display: block;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+    outline: none;
+}
+
+body {
+    background-color: #fff;
+    min-height: 100%;
+    overflow-x: hidden;
+    position: relative;
+}
+
+p {
+    font-weight: normal;
+    margin-bottom: 1.5em;
+}
+
+img {
+    max-width: 100%;
+}
+
+strong {
+    font-weight: 600;
+}
+
+ul {
+    margin-bottom: 1em;
+}
+
+li {
+    list-style: none;
+    margin-bottom: 0.5em;
+}
+
+/**
+ *  BACKGROUND
+ */
+.bg-primary {
+    background-color: var(--blue);
+}
+
+.bg-dark {
+    background-color: var(--darkdark);
+}
+
+.bg-secondary {
+    background-color: var(--pink);
+}
+
+.bg-white {
+    background-color: var(--white);
+}
+
+.bg-success {
+    background-color: var(--green);
+}
+
+.bg-info {
+    background-color: var(--yellow);
+}
+
+.bg-warning {
+    background-color: var(--orange);
+}
+
+.bg-error {
+    background-color: var(--red);
+}
+
+.bg-gray {
+    background-color: var(--lightdark);
+}
+
+.bg-gray-light {
+    background-color: var(--lightlight);
+}
+
+
+.align {
+    align-items: center;
+    justify-content: center;
+}
+
+.fleft {
+    float: left;
+}
+
+.fright {
+    float: right;
+}
+
+.clearfix ::after {
+    clear: both;
+    content: "";
+    display: table;
+}
+
+.no-wrap {
+    white-space: nowrap;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.rounded {
+    border-radius: var(--border-radius);
+}

src/style/module/input.css

@@ -0,0 +1,362 @@
+input,
+textarea {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    resize: none;
+}
+
+label {
+    display: block;
+    font-weight: normal;
+}
+
+input:-webkit-autofill {
+    box-shadow: 0 0 0 1000px #eceff1 inset;
+}
+
+.textarea,
+.input,
+.select {
+    border: 1px solid var(--white);
+    border-radius: var(--border-radius);
+    box-shadow: none;
+    display: inline-block;
+    font-weight: normal;
+    overflow: hidden;
+}
+
+.textarea :focus,
+.input :focus,
+.select :focus {
+    outline: none;
+}
+
+.textarea.has-error,
+.input.has-error,
+.select.has-error {
+    background: #eceff1;
+    border: 1px solid #e74c3c;
+    margin-bottom: 0;
+}
+
+.select {
+    background-color: #eceff1;
+    display: inline-block;
+    margin-right: 16px;
+    position: relative;
+}
+
+.select:last-child {
+    margin-right: 0;
+}
+
+.select-fullWidth {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+}
+
+.select select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    border: 0;
+    border-radius: 0;
+    color: #272727;
+    display: block;
+    font-size: 16px;
+    line-height: 1.5em;
+    margin: 0;
+    padding: 8px 16px;
+    padding-right: 30px;
+    transition: background-color 0.2s ease-in-out;
+    width: 100%;
+}
+
+.select select:active,
+.select select:focus {
+    background-color: #fbfbfc;
+    border: 0;
+    outline: none;
+}
+
+.select select::-ms-expand {
+    display: none;
+}
+
+.select::after,
+.select::before {
+    background: #03a9f4;
+    content: "";
+    display: block;
+    height: 2px;
+    margin-top: 2px;
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    -webkit-transform-origin: 1px;
+    transform-origin: 1px;
+    width: 10px;
+}
+
+.select::after {
+    -webkit-transform: rotate(-135deg);
+    transform: rotate(-135deg);
+}
+
+.select::before {
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.textarea {
+    background-color: #eceff1;
+    padding: 0;
+}
+
+.textarea-fullWidth {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+}
+
+.textarea textarea {
+    background: transparent;
+    border: 0;
+    color: #272727;
+    display: block;
+    font-family: "Lato", sans-serif;
+    font-size: 16px;
+    line-height: 1.5em;
+    margin: 0;
+    min-height: 120px;
+    padding: 8px 16px;
+    transition: background-color 0.2s ease-in-out;
+    width: 100%;
+}
+
+.textarea textarea::-webkit-input-placeholder {
+    color: #969da6;
+}
+
+.textarea textarea::-ms-input-placeholder {
+    color: #969da6;
+}
+
+.textarea textarea::placeholder {
+    color: #969da6;
+}
+
+.textarea textarea:focus,
+.textarea textarea:active {
+    background-color: #fbfbfc;
+    border: 0;
+    outline: none;
+}
+
+.checkbox {
+    margin-bottom: 8px;
+    position: relative;
+}
+
+.checkbox input[type="checkbox"] {
+    display: none;
+}
+
+.checkbox input[type="checkbox"]:checked+label::after {
+    -webkit-animation: checkboxAndRadioAnimation 0.25s;
+    animation: checkboxAndRadioAnimation 0.25s;
+    content: "";
+    -webkit-transform: scale(1) rotate(45deg);
+    transform: scale(1) rotate(45deg);
+}
+
+.checkbox input[type="checkbox"]+label {
+    display: block;
+    overflow: hidden;
+    padding-left: 30px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.checkbox input[type="checkbox"]+label::before {
+    background-color: #eceff1;
+    border: 1px solid var(--white);
+    border-radius: var(--border-radius);
+    content: "";
+    display: inline-block;
+    height: 20px;
+    left: 0;
+    margin-top: -10px;
+    position: absolute;
+    top: 50%;
+    width: 20px;
+}
+
+.checkbox input[type="checkbox"]+label::after {
+    border-bottom: 3px solid #03a9f4;
+    border-right: 3px solid #03a9f4;
+    display: block;
+    height: 12px;
+    left: 11px;
+    margin-left: -4px;
+    margin-top: -7px;
+    position: absolute;
+    top: 50%;
+    width: 7px;
+    z-index: 1;
+}
+
+.radio {
+    margin-bottom: 8px;
+    position: relative;
+}
+
+.radio input[type="radio"] {
+    display: none;
+}
+
+.radio input[type="radio"]:checked+label::after {
+    -webkit-animation: checkboxAndRadioAnimation 0.25s;
+    animation: checkboxAndRadioAnimation 0.25s;
+    content: "";
+    -webkit-transform: scale(1) rotate(45deg);
+    transform: scale(1) rotate(45deg);
+}
+
+.radio input[type="radio"]+label {
+    display: block;
+    overflow: hidden;
+    padding-left: 30px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.radio input[type="radio"]+label::before {
+    background-color: #eceff1;
+    border: 1px solid var(--white);
+    border-radius: 20px;
+    content: "";
+    display: inline-block;
+    height: 20px;
+    left: 0;
+    margin-top: -10px;
+    position: absolute;
+    top: 50%;
+    width: 20px;
+}
+
+.radio input[type="radio"]+label::after {
+    background-color: #03a9f4;
+    border-radius: 20px;
+    display: block;
+    height: 10px;
+    left: 11px;
+    margin-left: -6px;
+    margin-top: -6px;
+    position: absolute;
+    top: 13px;
+    width: 10px;
+    z-index: 1;
+}
+
+@-webkit-keyframes checkboxAndRadioAnimation {
+    0% {
+        -webkit-transform: scale(0) rotate(45deg);
+        transform: scale(0) rotate(45deg);
+    }
+
+    50% {
+        -webkit-transform: scale(1.5) rotate(45deg);
+        transform: scale(1.5) rotate(45deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1) rotate(45deg);
+        transform: scale(1) rotate(45deg);
+    }
+}
+
+@keyframes checkboxAndRadioAnimation {
+    0% {
+        -webkit-transform: scale(0) rotate(45deg);
+        transform: scale(0) rotate(45deg);
+    }
+
+    50% {
+        -webkit-transform: scale(1.5) rotate(45deg);
+        transform: scale(1.5) rotate(45deg);
+    }
+
+    100% {
+        -webkit-transform: scale(1) rotate(45deg);
+        transform: scale(1) rotate(45deg);
+    }
+}
+
+.input-invis {
+    background-color: transparent !important;
+    margin: auto !important;
+    border: 0 !important;
+}
+
+.input {
+    background-color: var(--white);
+    padding: 0;
+    position: relative;
+}
+
+.input :focus,
+.input :active {
+    background-color: var(--white);
+    border-radius: var(--border-radius);
+}
+
+.input input,
+.input textarea {
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    color: #272727;
+    font-size: 16px;
+    line-height: 1.5em;
+    margin: 0;
+    outline: none;
+    padding: 8px 16px;
+    width: 100%;
+}
+
+.input input::-webkit-input-placeholder {
+    color: #969da6;
+}
+
+.input input::-ms-input-placeholder {
+    color: #969da6;
+}
+
+.input input::placeholder {
+    color: #969da6;
+}
+
+.input input.small {
+    line-height: 1em;
+    padding: 0;
+}
+
+.input-withIcon input {
+    padding-right: 32px;
+}
+
+.input-icon {
+    fill: #969da6;
+    height: 16px;
+    margin-top: -8px;
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    width: 16px;
+}

src/style/module/layout.css

@@ -0,0 +1,354 @@
+/**
+ * LAYOUT
+ */
+.section {
+    padding-bottom: 36px;
+    padding-top: 36px;
+}
+
+@media (min-width: 768px) {
+    .section {
+        padding-bottom: 72px;
+        padding-top: 72px;
+    }
+}
+
+.section+.section {
+    padding-top: 0;
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 1380px;
+    padding-left: 12px;
+    padding-right: 12px;
+    width: 100%;
+}
+
+@media (min-width: 576px) {
+    .container {
+        max-width: 540px;
+    }
+}
+
+@media (min-width: 992px) {
+    .container {
+        max-width: 960px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .container {
+        max-width: 1140px;
+    }
+}
+
+@media (min-width: 768px) {
+    .container {
+        padding-left: 24px;
+        padding-right: 24px;
+        max-width: 720px;
+    }
+}
+
+.container-medium {
+    margin: 0 auto;
+    max-width: 944px;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+@media (min-width: 768px) {
+    .container-medium {
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+}
+
+.container {
+    width: 100%;
+    padding-right: 12px;
+    padding-left: 12px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.container-fluid {
+    width: 100%;
+    padding-right: 12px;
+    padding-left: 12px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -12px;
+    margin-left: -12px;
+}
+
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9,
+.col-10,
+.col-11,
+.col-12,
+.col,
+.col-auto,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12 {
+    position: relative;
+    width: 100%;
+    min-height: 1px;
+    padding-right: 12px;
+    padding-left: 12px;
+}
+
+.col {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+}
+
+.col-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: none;
+}
+
+.col-1 {
+    flex: 0 0 8.33333%;
+    max-width: 8.33333%;
+}
+
+.col-2 {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
+}
+
+.col-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+}
+
+.col-4 {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+}
+
+.col-5 {
+    flex: 0 0 41.66667%;
+    max-width: 41.66667%;
+}
+
+.col-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.col-7 {
+    flex: 0 0 58.33333%;
+    max-width: 58.33333%;
+}
+
+.col-8 {
+    flex: 0 0 66.66667%;
+    max-width: 66.66667%;
+}
+
+.col-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+}
+
+.col-10 {
+    flex: 0 0 83.33333%;
+    max-width: 83.33333%;
+}
+
+.col-11 {
+    flex: 0 0 91.66667%;
+    max-width: 91.66667%;
+}
+
+.col-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+@media (min-width: 576px) {
+    .col-sm {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+    }
+
+    .col-sm-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: none;
+    }
+
+    .col-sm-1 {
+        flex: 0 0 8.33333%;
+        max-width: 8.33333%;
+    }
+
+    .col-sm-2 {
+        flex: 0 0 16.66667%;
+        max-width: 16.66667%;
+    }
+
+    .col-sm-3 {
+        flex: 0 0 25%;
+        max-width: 25%;
+    }
+
+    .col-sm-4 {
+        flex: 0 0 33.33333%;
+        max-width: 33.33333%;
+    }
+
+    .col-sm-5 {
+        flex: 0 0 41.66667%;
+        max-width: 41.66667%;
+    }
+
+    .col-sm-6 {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+
+    .col-sm-7 {
+        flex: 0 0 58.33333%;
+        max-width: 58.33333%;
+    }
+
+    .col-sm-8 {
+        flex: 0 0 66.66667%;
+        max-width: 66.66667%;
+    }
+
+    .col-sm-9 {
+        flex: 0 0 75%;
+        max-width: 75%;
+    }
+
+    .col-sm-10 {
+        flex: 0 0 83.33333%;
+        max-width: 83.33333%;
+    }
+
+    .col-sm-11 {
+        flex: 0 0 91.66667%;
+        max-width: 91.66667%;
+    }
+
+    .col-sm-12 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+@media (min-width: 768px) {
+    .col-md {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+    }
+
+    .col-md-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: none;
+    }
+
+    .col-md-1 {
+        flex: 0 0 8.33333%;
+        max-width: 8.33333%;
+    }
+
+    .col-md-2 {
+        flex: 0 0 16.66667%;
+        max-width: 16.66667%;
+    }
+
+    .col-md-3 {
+        flex: 0 0 25%;
+        max-width: 25%;
+    }
+
+    .col-md-4 {
+        flex: 0 0 33.33333%;
+        max-width: 33.33333%;
+    }
+
+    .col-md-5 {
+        flex: 0 0 41.66667%;
+        max-width: 41.66667%;
+    }
+
+    .col-md-6 {
+        flex: 0 0 50%;
+        max-width: 50%;
+    }
+
+    .col-md-7 {
+        flex: 0 0 58.33333%;
+        max-width: 58.33333%;
+    }
+
+    .col-md-8 {
+        flex: 0 0 66.66667%;
+        max-width: 66.66667%;
+    }
+
+    .col-md-9 {
+        flex: 0 0 75%;
+        max-width: 75%;
+    }
+
+    .col-md-10 {
+        flex: 0 0 83.33333%;
+        max-width: 83.33333%;
+    }
+
+    .col-md-11 {
+        flex: 0 0 91.66667%;
+        max-width: 91.66667%;
+    }
+
+    .col-md-12 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}

src/style/module/load_n_spin.css

@@ -0,0 +1,166 @@
+/**
+ *  LOADING BAR
+ *
+ *  Markup:
+ *  ---------
+ *  <div class="loadingBar"></div>
+ *
+ */
+.loadingBar {
+    height: 6px;
+    left: 0;
+    overflow: hidden;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+}
+
+.loadingBar::before {
+    -webkit-animation: loading 2s linear infinite;
+    animation: loading 2s linear infinite;
+    background-color: #03a9f4;
+    content: "";
+    display: block;
+    height: 6px;
+    left: -300px;
+    position: absolute;
+    width: 300px;
+}
+
+@-webkit-keyframes loading {
+    from {
+        left: -300px;
+        width: 30%;
+    }
+
+    50% {
+        width: 30%;
+    }
+
+    70% {
+        width: 70%;
+    }
+
+    80% {
+        left: 50%;
+    }
+
+    95% {
+        left: 120%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+@keyframes loading {
+    from {
+        left: -300px;
+        width: 30%;
+    }
+
+    50% {
+        width: 30%;
+    }
+
+    70% {
+        width: 70%;
+    }
+
+    80% {
+        left: 50%;
+    }
+
+    95% {
+        left: 120%;
+    }
+
+    to {
+        left: 100%;
+    }
+}
+
+.spinner {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    display: block
+}
+
+.spinner:after,
+.spinner:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+    left: 50%;
+    margin: -12px 0 0 -12px;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    border: 3px solid transparent;
+    border-top-color: var(--blue);
+}
+
+.spinner:before {
+    -webkit-animation: spinning 2.4s cubic-bezier(.41, .26, .2, .62);
+    animation: spinning 2.4s cubic-bezier(.41, .26, .2, .62);
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite
+}
+
+.spinner:after {
+    -webkit-animation: spinning 2.4s cubic-bezier(.51, .09, .21, .8);
+    animation: spinning 2.4s cubic-bezier(.51, .09, .21, .8);
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite
+}
+
+@-webkit-keyframes spinning {
+    0% {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    25% {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+
+    75% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spinning {
+    0% {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+
+    50% {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
+
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}

src/style/module/typography.css

@@ -0,0 +1,148 @@
+/**
+ *  TYPOGRAPHY
+ */
+body {
+    color: #272727;
+    font-family: "Lato", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5em;
+}
+
+a {
+    color: var(--blue);
+    text-decoration: none;
+}
+
+a:hover {
+    color: color-mix(in srgb, var(--color-primary), #FFF 15%);
+}
+
+a:focus {
+    color: var(--blue);
+}
+
+.text-huge,
+.text-big,
+.text-medium {
+    margin-bottom: 1em;
+}
+
+.text-huge {
+    font-size: 36px;
+    line-height: 1.3em;
+}
+
+.text-big {
+    font-size: 24px;
+    line-height: 1.3em;
+}
+
+.text-medium {
+    font-size: 16px;
+    line-height: 1.5em;
+}
+
+.text-small {
+    font-size: 12px;
+    line-height: 1.3em;
+}
+
+.text-body {
+    font-size: 16px;
+    line-height: 1.5em;
+}
+
+.text-primary {
+    color: #03a9f4;
+}
+
+.text-dark {
+    color: #18232f;
+}
+
+.text-secondary {
+    color: #e91e63;
+}
+
+.text-white {
+    color: #fff;
+}
+
+.text-success {
+    color: #4caf50;
+}
+
+.text-info {
+    color: #5bc0de;
+}
+
+.text-warning {
+    color: #f0ad4e;
+}
+
+.text-error {
+    color: #e74c3c;
+}
+
+.text-gray {
+    color: #969da6;
+}
+
+.text-gray-light {
+    color: #eceff1;
+}
+
+.text-light {
+    font-weight: 300;
+}
+
+.text-normal {
+    font-weight: 400;
+}
+
+.text-lineThrough {
+    text-decoration: line-through;
+}
+
+.text-italic {
+    font-style: italic;
+}
+
+.text-underline {
+    text-decoration: underline;
+}
+
+.text-uppercase {
+    text-transform: uppercase;
+}
+
+.text-withSubtitle {
+    margin-bottom: 0 !important;
+}
+
+.text-withSubtitle+.text-huge,
+.text-withSubtitle+.text-big,
+.text-withSubtitle+.text-medium,
+.text-withSubtitle+.text-small {
+    margin-top: 0.5em;
+}
+
+h1,
+h2,
+h3,
+h4 {
+    font-weight: 300;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.text-left {
+    text-align: left;
+}

src/template/module/head.pug

@@ -8,7 +8,7 @@ head
     href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700,300",
     type="text/css"
   )
-  link(rel="stylesheet", href="/public/css/index.css")
+  link(rel="stylesheet", href="/public/index.css")
 
   link(rel="stylesheet", href="https://unpkg.com/vue2-datepicker/index.css")
   link(rel="stylesheet", href="https://unpkg.com/leaflet/dist/leaflet.css")

yarn.lock

@@ -32,7 +32,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.23.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
+"@babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
   version: 7.26.9
   resolution: "@babel/parser@npm:7.26.9"
   dependencies:
@@ -435,6 +435,150 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-android-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-android-arm64@npm:2.5.1"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-darwin-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-darwin-arm64@npm:2.5.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-darwin-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-darwin-x64@npm:2.5.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-freebsd-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-freebsd-x64@npm:2.5.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm-musl@npm:2.5.1"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm64-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm64-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm64-musl@npm:2.5.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-x64-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-x64-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-x64-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-x64-musl@npm:2.5.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-arm64@npm:2.5.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-ia32@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-ia32@npm:2.5.1"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-x64@npm:2.5.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher@npm:^2.4.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher@npm:2.5.1"
+  dependencies:
+    "@parcel/watcher-android-arm64": "npm:2.5.1"
+    "@parcel/watcher-darwin-arm64": "npm:2.5.1"
+    "@parcel/watcher-darwin-x64": "npm:2.5.1"
+    "@parcel/watcher-freebsd-x64": "npm:2.5.1"
+    "@parcel/watcher-linux-arm-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-arm-musl": "npm:2.5.1"
+    "@parcel/watcher-linux-arm64-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-arm64-musl": "npm:2.5.1"
+    "@parcel/watcher-linux-x64-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-x64-musl": "npm:2.5.1"
+    "@parcel/watcher-win32-arm64": "npm:2.5.1"
+    "@parcel/watcher-win32-ia32": "npm:2.5.1"
+    "@parcel/watcher-win32-x64": "npm:2.5.1"
+    detect-libc: "npm:^1.0.3"
+    is-glob: "npm:^4.0.3"
+    micromatch: "npm:^4.0.5"
+    node-addon-api: "npm:^7.0.0"
+    node-gyp: "npm:latest"
+  dependenciesMeta:
+    "@parcel/watcher-android-arm64":
+      optional: true
+    "@parcel/watcher-darwin-arm64":
+      optional: true
+    "@parcel/watcher-darwin-x64":
+      optional: true
+    "@parcel/watcher-freebsd-x64":
+      optional: true
+    "@parcel/watcher-linux-arm-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm-musl":
+      optional: true
+    "@parcel/watcher-linux-arm64-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm64-musl":
+      optional: true
+    "@parcel/watcher-linux-x64-glibc":
+      optional: true
+    "@parcel/watcher-linux-x64-musl":
+      optional: true
+    "@parcel/watcher-win32-arm64":
+      optional: true
+    "@parcel/watcher-win32-ia32":
+      optional: true
+    "@parcel/watcher-win32-x64":
+      optional: true
+  checksum: 10c0/8f35073d0c0b34a63d4c8d2213482f0ebc6a25de7b2cdd415d19cb929964a793cb285b68d1d50bfb732b070b3c82a2fdb4eb9c250eab709a1cd9d63345455a82
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -442,17 +586,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prettier/plugin-pug@npm:^3.0.0":
-  version: 3.2.1
-  resolution: "@prettier/plugin-pug@npm:3.2.1"
-  dependencies:
-    pug-lexer: "npm:^5.0.1"
-  peerDependencies:
-    prettier: ^3.0.0
-  checksum: 10c0/f361496e1669e308e1e74b3de2f524ba92364904142b23cf496bc26531f8cab3ccea965d0cb32b6272656c0415f0dbfe422aa6dc844f56f89cbdbdc815899390
-  languageName: node
-  linkType: hard
-
 "@types/node@npm:^22.13.5":
   version: 22.13.5
   resolution: "@types/node@npm:22.13.5"
@@ -462,21 +595,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:2.7.16":
-  version: 2.7.16
-  resolution: "@vue/compiler-sfc@npm:2.7.16"
-  dependencies:
-    "@babel/parser": "npm:^7.23.5"
-    postcss: "npm:^8.4.14"
-    prettier: "npm:^1.18.2 || ^2.0.0"
-    source-map: "npm:^0.6.1"
-  dependenciesMeta:
-    prettier:
-      optional: true
-  checksum: 10c0/eaeeef054c939e6cd7591199e2b998ae33d0afd65dc1b5675b54361f0c657c08ae82945791a1a8ca76762e1c1f8e69a00595daf280b854cbc3370ed5c5a34bcd
-  languageName: node
-  linkType: hard
-
 "abbrev@npm:^3.0.0":
   version: 3.0.0
   resolution: "abbrev@npm:3.0.0"
@@ -674,7 +792,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:~3.0.2":
+"braces@npm:^3.0.3, braces@npm:~3.0.2":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
   dependencies:
@@ -749,7 +867,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.5.2":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.5.2":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
   dependencies:
@@ -768,6 +886,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "chokidar@npm:4.0.3"
+  dependencies:
+    readdirp: "npm:^4.0.1"
+  checksum: 10c0/a58b9df05bb452f7d105d9e7229ac82fa873741c0c40ddcc7bb82f8a909fbe3f7814c9ebe9bc9a2bef9b737c0ec6e2d699d179048ef06ad3ec46315df0ebe6ad
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^3.0.0":
   version: 3.0.0
   resolution: "chownr@npm:3.0.0"
@@ -833,13 +960,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^2.6.5":
-  version: 2.6.12
-  resolution: "core-js@npm:2.6.12"
-  checksum: 10c0/00128efe427789120a06b819adc94cc72b96955acb331cb71d09287baf9bd37bebd191d91f1ee4939c893a050307ead4faea08876f09115112612b6a05684b63
-  languageName: node
-  linkType: hard
-
 "cross-spawn@npm:^7.0.0":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
@@ -851,6 +971,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-tree@npm:1.1.3":
+  version: 1.1.3
+  resolution: "css-tree@npm:1.1.3"
+  dependencies:
+    mdn-data: "npm:2.0.14"
+    source-map: "npm:^0.6.1"
+  checksum: 10c0/499a507bfa39b8b2128f49736882c0dd636b0cd3370f2c69f4558ec86d269113286b7df469afc955de6a68b0dba00bc533e40022a73698081d600072d5d83c1c
+  languageName: node
+  linkType: hard
+
 "cssstyle@npm:^4.2.1":
   version: 4.2.1
   resolution: "cssstyle@npm:4.2.1"
@@ -861,13 +991,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.1.0":
-  version: 3.1.3
-  resolution: "csstype@npm:3.1.3"
-  checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
-  languageName: node
-  linkType: hard
-
 "data-urls@npm:^5.0.0":
   version: 5.0.0
   resolution: "data-urls@npm:5.0.0"
@@ -928,6 +1051,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "detect-libc@npm:1.0.3"
+  bin:
+    detect-libc: ./bin/detect-libc.js
+  checksum: 10c0/4da0deae9f69e13bc37a0902d78bf7169480004b1fed3c19722d56cff578d16f0e11633b7fbf5fb6249181236c72e90024cbd68f0b9558ae06e281f47326d50d
+  languageName: node
+  linkType: hard
+
 "doctypes@npm:^1.1.0":
   version: 1.1.0
   resolution: "doctypes@npm:1.1.0"
@@ -1044,6 +1176,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-plugin-sass@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "esbuild-plugin-sass@npm:1.0.1"
+  dependencies:
+    css-tree: "npm:1.1.3"
+    fs-extra: "npm:10.0.0"
+    sass: "npm:1.47.0"
+    tmp: "npm:0.2.1"
+  peerDependencies:
+    esbuild: ">=0.11.14"
+  checksum: 10c0/4a8b0aec2de41a44bfeb5518e5754be6b8a39a8873f4e543bfb40595636db639b5a5f9e2561594c8de7c81e5dddb88b83e73336827cada875203a185b4a1d053
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.25.0":
   version: 0.25.0
   resolution: "esbuild@npm:0.25.0"
@@ -1276,6 +1422,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:10.0.0":
+  version: 10.0.0
+  resolution: "fs-extra@npm:10.0.0"
+  dependencies:
+    graceful-fs: "npm:^4.2.0"
+    jsonfile: "npm:^6.0.1"
+    universalify: "npm:^2.0.0"
+  checksum: 10c0/85802f3d9e49d197744a8372f0d78d5a1faa3df73f4c5375d6366a4b9f745197d3da1f095841443d50f29a9f81cdc01363eb6d17bef2ba70c268559368211040
+  languageName: node
+  linkType: hard
+
 "fs-minipass@npm:^3.0.0":
   version: 3.0.3
   resolution: "fs-minipass@npm:3.0.3"
@@ -1285,6 +1442,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs.realpath@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "fs.realpath@npm:1.0.0"
+  checksum: 10c0/444cf1291d997165dfd4c0d58b69f0e4782bfd9149fd72faa4fe299e68e0e93d6db941660b37dd29153bf7186672ececa3b50b7e7249477b03fdf850f287c948
+  languageName: node
+  linkType: hard
+
 "fsevents@npm:~2.3.2":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
@@ -1380,6 +1544,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:^7.1.3":
+  version: 7.2.3
+  resolution: "glob@npm:7.2.3"
+  dependencies:
+    fs.realpath: "npm:^1.0.0"
+    inflight: "npm:^1.0.4"
+    inherits: "npm:2"
+    minimatch: "npm:^3.1.1"
+    once: "npm:^1.3.0"
+    path-is-absolute: "npm:^1.0.0"
+  checksum: 10c0/65676153e2b0c9095100fe7f25a778bf45608eeb32c6048cf307f579649bcc30353277b3b898a3792602c65764e5baa4f643714dfbdfd64ea271d210c7a425fe
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.2.0":
   version: 1.2.0
   resolution: "gopd@npm:1.2.0"
@@ -1387,7 +1565,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.6":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -1498,6 +1676,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.3.7
+  resolution: "immutable@npm:4.3.7"
+  checksum: 10c0/9b099197081b22f6433003e34929da8ecddbbdc1474cdc8aa3b7669dee4adda349c06143de22def36016d1b6de5322b043eccd7a11db1dad2ca85dad4fff5435
+  languageName: node
+  linkType: hard
+
+"immutable@npm:^5.0.2":
+  version: 5.0.3
+  resolution: "immutable@npm:5.0.3"
+  checksum: 10c0/3269827789e1026cd25c2ea97f0b2c19be852ffd49eda1b674b20178f73d84fa8d945ad6f5ac5bc4545c2b4170af9f6e1f77129bc1cae7974a4bf9b04a9cdfb9
+  languageName: node
+  linkType: hard
+
 "imurmurhash@npm:^0.1.4":
   version: 0.1.4
   resolution: "imurmurhash@npm:0.1.4"
@@ -1505,7 +1697,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2.0.4, inherits@npm:^2.0.3, inherits@npm:^2.0.4":
+"inflight@npm:^1.0.4":
+  version: 1.0.6
+  resolution: "inflight@npm:1.0.6"
+  dependencies:
+    once: "npm:^1.3.0"
+    wrappy: "npm:1"
+  checksum: 10c0/7faca22584600a9dc5b9fca2cd5feb7135ac8c935449837b315676b4c90aa4f391ec4f42240178244b5a34e8bede1948627fda392ca3191522fc46b34e985ab2
+  languageName: node
+  linkType: hard
+
+"inherits@npm:2, inherits@npm:2.0.4, inherits@npm:^2.0.3, inherits@npm:^2.0.4":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 10c0/4e531f648b29039fb7426fb94075e6545faa1eb9fe83c29f0b6d9e7263aceb4289d2d4557db0d428188eeb449cc7c5e77b0a0b2c4e248ff2a65933a0dee49ef2
@@ -1578,7 +1780,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.1, is-glob@npm:~4.0.1":
+"is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -1720,6 +1922,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsonfile@npm:^6.0.1":
+  version: 6.1.0
+  resolution: "jsonfile@npm:6.1.0"
+  dependencies:
+    graceful-fs: "npm:^4.1.6"
+    universalify: "npm:^2.0.0"
+  dependenciesMeta:
+    graceful-fs:
+      optional: true
+  checksum: 10c0/4f95b5e8a5622b1e9e8f33c96b7ef3158122f595998114d1e7f03985649ea99cb3cd99ce1ed1831ae94c8c8543ab45ebd044207612f31a56fd08462140e46865
+  languageName: node
+  linkType: hard
+
 "jstransformer@npm:1.0.0":
   version: 1.0.0
   resolution: "jstransformer@npm:1.0.0"
@@ -1730,13 +1945,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"leaflet@npm:^1.9.4":
-  version: 1.9.4
-  resolution: "leaflet@npm:1.9.4"
-  checksum: 10c0/f639441dbb7eb9ae3fcd29ffd7d3508f6c6106892441634b0232fafb9ffb1588b05a8244ec7085de2c98b5ed703894df246898477836cfd0ce5b96d4717b5ca1
-  languageName: node
-  linkType: hard
-
 "level-codec@npm:^10.0.0":
   version: 10.0.0
   resolution: "level-codec@npm:10.0.0"
@@ -1856,6 +2064,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdn-data@npm:2.0.14":
+  version: 2.0.14
+  resolution: "mdn-data@npm:2.0.14"
+  checksum: 10c0/67241f8708c1e665a061d2b042d2d243366e93e5bf1f917693007f6d55111588b952dcbfd3ea9c2d0969fb754aad81b30fdcfdcc24546495fc3b24336b28d4bd
+  languageName: node
+  linkType: hard
+
+"micromatch@npm:^4.0.5":
+  version: 4.0.8
+  resolution: "micromatch@npm:4.0.8"
+  dependencies:
+    braces: "npm:^3.0.3"
+    picomatch: "npm:^2.3.1"
+  checksum: 10c0/166fa6eb926b9553f32ef81f5f531d27b4ce7da60e5baf8c021d043b27a388fb95e46a8038d5045877881e673f8134122b59624d5cecbd16eb50a42e7a6b5ca8
+  languageName: node
+  linkType: hard
+
 "mime-db@npm:1.52.0":
   version: 1.52.0
   resolution: "mime-db@npm:1.52.0"
@@ -1890,7 +2115,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^3.1.2":
+"minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -2001,15 +2226,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.8":
-  version: 3.3.8
-  resolution: "nanoid@npm:3.3.8"
-  bin:
-    nanoid: bin/nanoid.cjs
-  checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120
-  languageName: node
-  linkType: hard
-
 "napi-macros@npm:~2.0.0":
   version: 2.0.0
   resolution: "napi-macros@npm:2.0.0"
@@ -2024,6 +2240,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-addon-api@npm:^7.0.0":
+  version: 7.1.1
+  resolution: "node-addon-api@npm:7.1.1"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10c0/fb32a206276d608037fa1bcd7e9921e177fe992fc610d098aa3128baca3c0050fc1e014fa007e9b3874cf865ddb4f5bd9f43ccb7cbbbe4efaff6a83e920b17e9
+  languageName: node
+  linkType: hard
+
 "node-gyp-build@npm:^4.3.0":
   version: 4.8.4
   resolution: "node-gyp-build@npm:4.8.4"
@@ -2114,6 +2339,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"once@npm:^1.3.0":
+  version: 1.4.0
+  resolution: "once@npm:1.4.0"
+  dependencies:
+    wrappy: "npm:1"
+  checksum: 10c0/5d48aca287dfefabd756621c5dfce5c91a549a93e9fdb7b8246bc4c4790aa2ec17b34a260530474635147aeb631a2dcc8b32c613df0675f96041cbb8244517d0
+  languageName: node
+  linkType: hard
+
 "p-map@npm:^7.0.2":
   version: 7.0.3
   resolution: "p-map@npm:7.0.3"
@@ -2137,6 +2371,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-is-absolute@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "path-is-absolute@npm:1.0.1"
+  checksum: 10c0/127da03c82172a2a50099cddbf02510c1791fc2cc5f7713ddb613a56838db1e8168b121a920079d052e0936c23005562059756d653b7c544c53185efe53be078
+  languageName: node
+  linkType: hard
+
 "path-key@npm:^3.1.0":
   version: 3.1.1
   resolution: "path-key@npm:3.1.1"
@@ -2171,14 +2412,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.1.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
-  version: 1.1.1
-  resolution: "picocolors@npm:1.1.1"
-  checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
-  languageName: node
-  linkType: hard
-
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
@@ -2222,26 +2456,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.14":
-  version: 8.5.3
-  resolution: "postcss@npm:8.5.3"
-  dependencies:
-    nanoid: "npm:^3.3.8"
-    picocolors: "npm:^1.1.1"
-    source-map-js: "npm:^1.2.1"
-  checksum: 10c0/b75510d7b28c3ab728c8733dd01538314a18c52af426f199a3c9177e63eb08602a3938bfb66b62dc01350b9aed62087eabbf229af97a1659eb8d3513cec823b3
-  languageName: node
-  linkType: hard
-
-"prettier@npm:^1.18.2 || ^2.0.0":
-  version: 2.8.8
-  resolution: "prettier@npm:2.8.8"
-  bin:
-    prettier: bin-prettier.js
-  checksum: 10c0/463ea8f9a0946cd5b828d8cf27bd8b567345cf02f56562d5ecde198b91f47a76b7ac9eae0facd247ace70e927143af6135e8cf411986b8cb8478784a4d6d724a
-  languageName: node
-  linkType: hard
-
 "prettier@npm:^3.5.2":
   version: 3.5.2
   resolution: "prettier@npm:3.5.2"
@@ -2450,6 +2664,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:^4.0.1":
+  version: 4.1.2
+  resolution: "readdirp@npm:4.1.2"
+  checksum: 10c0/60a14f7619dec48c9c850255cd523e2717001b0e179dc7037cfa0895da7b9e9ab07532d324bfb118d73a710887d1e35f79c495fa91582784493e085d18c72c62
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -2527,6 +2748,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rimraf@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "rimraf@npm:3.0.2"
+  dependencies:
+    glob: "npm:^7.1.3"
+  bin:
+    rimraf: bin.js
+  checksum: 10c0/9cb7757acb489bd83757ba1a274ab545eafd75598a9d817e0c3f8b164238dd90eba50d6b848bd4dcc5f3040912e882dc7ba71653e35af660d77b25c381d402e8
+  languageName: node
+  linkType: hard
+
 "rimraf@npm:^5.0.5":
   version: 5.0.10
   resolution: "rimraf@npm:5.0.10"
@@ -2575,6 +2807,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:1.47.0":
+  version: 1.47.0
+  resolution: "sass@npm:1.47.0"
+  dependencies:
+    chokidar: "npm:>=3.0.0 <4.0.0"
+    immutable: "npm:^4.0.0"
+    source-map-js: "npm:>=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: 10c0/863afee6aac8529a009d184e5cf8cd79dbd4d4759a49170b2ece5a519911311b630f9630e66db287c4e883d5635c4e8a2a12e0d4579bf484df72680a64dccf56
+  languageName: node
+  linkType: hard
+
+"sass@npm:^1.85.1":
+  version: 1.85.1
+  resolution: "sass@npm:1.85.1"
+  dependencies:
+    "@parcel/watcher": "npm:^2.4.1"
+    chokidar: "npm:^4.0.0"
+    immutable: "npm:^5.0.2"
+    source-map-js: "npm:>=0.6.2 <2.0.0"
+  dependenciesMeta:
+    "@parcel/watcher":
+      optional: true
+  bin:
+    sass: sass.js
+  checksum: 10c0/f843aa1df1dca2f0e9cb2fb247e4939fd514ae4c182cdd1900a0622c0d71b40dfb1c4225f78b78e165a318287ca137ec597695db3e496408bd16a921a2bc2b3f
+  languageName: node
+  linkType: hard
+
 "saxes@npm:^6.0.0":
   version: 6.0.0
   resolution: "saxes@npm:6.0.0"
@@ -2683,7 +2945,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^1.2.1":
+"source-map-js@npm:>=0.6.2 <2.0.0":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
   checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
@@ -2840,6 +3102,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tmp@npm:0.2.1":
+  version: 0.2.1
+  resolution: "tmp@npm:0.2.1"
+  dependencies:
+    rimraf: "npm:^3.0.0"
+  checksum: 10c0/67607aa012059c9ce697bee820ee51bc0f39b29a8766def4f92d3f764d67c7cf9205d537d24e0cb1ce9685c40d4c628ead010910118ea18348666b5c46ed9123
+  languageName: node
+  linkType: hard
+
 "to-regex-range@npm:^5.0.1":
   version: 5.0.1
   resolution: "to-regex-range@npm:5.0.1"
@@ -2936,6 +3207,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"universalify@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "universalify@npm:2.0.1"
+  checksum: 10c0/73e8ee3809041ca8b818efb141801a1004e3fc0002727f1531f4de613ea281b494a40909596dae4a042a4fb6cd385af5d4db2e137b1362e0e91384b828effd3a
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
@@ -2957,60 +3235,19 @@ __metadata:
     "@fastify/leveldb": "npm:^6.0.0"
     "@fastify/static": "npm:^8.0.0"
     "@fastify/view": "npm:^10.0.0"
-    "@prettier/plugin-pug": "npm:^3.0.0"
     "@types/node": "npm:^22.13.5"
     esbuild: "npm:^0.25.0"
+    esbuild-plugin-sass: "npm:^1.0.1"
     fastify: "npm:^5.2.1"
     jsdom: "npm:^26.0.0"
-    leaflet: "npm:^1.9.4"
     nodemon: "npm:^3.0.1"
     prettier: "npm:^3.5.2"
     pug: "npm:^3.0.2"
+    sass: "npm:^1.85.1"
     undici: "npm:^7.3.0"
-    vue: "npm:2"
-    vue-multiselect: "npm:2"
-    vue-textarea-autosize: "npm:^1.1.1"
-    vue2-leaflet: "npm:^2.7.1"
   languageName: unknown
   linkType: soft
 
-"vue-multiselect@npm:2":
-  version: 2.1.9
-  resolution: "vue-multiselect@npm:2.1.9"
-  checksum: 10c0/baecfbb97b4b225bd2e2054f2eed640917b47f448a76a43f084d344764c813a58e825ea2131f6803c125e6e8d4e0b4edb5712da49dd1b8a082f29ac845cc7c2b
-  languageName: node
-  linkType: hard
-
-"vue-textarea-autosize@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "vue-textarea-autosize@npm:1.1.1"
-  dependencies:
-    core-js: "npm:^2.6.5"
-  checksum: 10c0/22614d412b7e592b68c9b127cfc4257985058571d185ef1885acd3666b77381c87a2006b5084d5687b5e3729ad5b8c53ff962eaf43bbefa1dc5ae0e58cada9db
-  languageName: node
-  linkType: hard
-
-"vue2-leaflet@npm:^2.7.1":
-  version: 2.7.1
-  resolution: "vue2-leaflet@npm:2.7.1"
-  peerDependencies:
-    "@types/leaflet": ^1.5.7
-    leaflet: ^1.3.4
-    vue: ^2.5.17
-  checksum: 10c0/34ae5cc4b78deaf3ee7f73a210b2e45f9d80b92860d5ac5d831d74fd8a94d06983845f01e6203b4e61bad7f6385715f0ea3cd23b2e39fb6c8ce912fe4d096af6
-  languageName: node
-  linkType: hard
-
-"vue@npm:2":
-  version: 2.7.16
-  resolution: "vue@npm:2.7.16"
-  dependencies:
-    "@vue/compiler-sfc": "npm:2.7.16"
-    csstype: "npm:^3.1.0"
-  checksum: 10c0/15bf536c131a863d03c42386a4bbc82316262129421ef70e88d1758bcf951446ef51edeff42e3b27d026015330fe73d90155fca270eb5eadd30b0290735f2c3e
-  languageName: node
-  linkType: hard
-
 "w3c-xmlserializer@npm:^5.0.0":
   version: 5.0.0
   resolution: "w3c-xmlserializer@npm:5.0.0"
@@ -3109,6 +3346,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wrappy@npm:1":
+  version: 1.0.2
+  resolution: "wrappy@npm:1.0.2"
+  checksum: 10c0/56fece1a4018c6a6c8e28fbc88c87e0fbf4ea8fd64fc6c63b18f4acc4bd13e0ad2515189786dd2c30d3eec9663d70f4ecf699330002f8ccb547e4a18231fc9f0
+  languageName: node
+  linkType: hard
+
 "ws@npm:^8.18.0":
   version: 8.18.1
   resolution: "ws@npm:8.18.1"