update

2025-01-02 20:56:21 +01:00 · 2025-01-01 23:06:17 +01:00 · 2025-01-01 11:15:54 +01:00
38 changed files with 3928 additions and 1795 deletions
--- a/app.vue
+++ b/app.vue
@ -5,10 +5,94 @@
 </template>
 <script setup>

+import 'primeicons/primeicons.css'
+
+const siteData = ref()
+const nuxtApp = useNuxtApp()
+const categoriesStore = useCategoriesStore()
+const placeStore = useMyPlacesStore()
+const authStore = useAuthStore()
+const configStore = useMyConfigStore()
+const token = useCookie('_auth')
+
+async function loadData() {
+    const { data } = await useFetch('https://olcsoberauto.hu/rest/init',
+        {
+            headers: {
+                'auth-key': token.value
+            }
+        }
+    )
+
+    if (data.value?.user) {
+        authStore.user = data.value.user
+        console.log(data.value.user)
+    }
+
+    if (data.value?.config) {
+        configStore.config = data.value.config
+    }
+
+    if (data.value?.states) {
+        configStore.states = data.value.states
+    }
+
+    if (data.value?.categories) {
+        categoriesStore.categories = data.value.categories
+        placeStore.places = data.value.places
+    }
+}
+
+nuxtApp.hooks.hook('app:mounted', async () => {
+    console.log('mounted...')
+    await loadData()
+})
+
 </script>
 <style>
 html {
-    font-size: 14px;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size: 18px;
+    font-family: "Roboto", serif;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-start {
+    text-align: start;
+}
+
+.text-end {
+    text-align: end;
+}
+
+.card-loading {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(5px);
+    z-index: 1;
+}
+
+.p-inputotp-input.p-inputtext-sm {
+    width: 2rem;
+}
+
+.p-message {
+    outline: none;
+    border-left: 4px;
+    border-style: solid;
+}
+.p-disabled, .p-component:disabled{
+    opacity: 0.2;
+}
+pre{
+    font-size: 13px;
 }
 </style>
--- a/assets/styles/base.css
+++ b/assets/styles/base.css
@ -1,15 +1,15 @@
 :root {
-    --p-primary-50: #ecfdf5;
-    --p-primary-100: #d1fae5;
-    --p-primary-200: #a7f3d0;
-    --p-primary-300: #6ee7b7;
-    --p-primary-400: #34d399;
-    --p-primary-500: #10b981;
-    --p-primary-600: #059669;
-    --p-primary-700: #047857;
-    --p-primary-800: #065f46;
-    --p-primary-900: #064e3b;
-    --p-primary-950: #022c22;
+    --p-primary-50: #fcf3f4;
+    --p-primary-100: #f2c4c8;
+    --p-primary-200: #e7959d;
+    --p-primary-300: #dd6672;
+    --p-primary-400: #d23846;
+    --p-primary-500: #c8091b;
+    --p-primary-600: #aa0817;
+    --p-primary-700: #8c0613;
+    --p-primary-800: #6e050f;   
+    --p-primary-900: #50040b;
+    --p-primary-950: #320207;
    --p-surface-0: #ffffff;
    --p-surface-50: #fafafa;
    --p-surface-100: #f4f4f5;
--- a/assets/styles/fonts.css
+++ b/assets/styles/fonts.css
@ -0,0 +1,756 @@
+/* cyrillic-ext */
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEz0dL_nz.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEzQdL_nz.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEzwdL_nz.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEzMdL_nz.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEz8dL_nz.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEz4dL_nz.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOiCnqEu92Fr1Mu51QrEzAdLw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc3CsTKlA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc-CsTKlA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc2CsTKlA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc5CsTKlA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc1CsTKlA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc0CsTKlA.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xFIzIFKw.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xEIzIFKw.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xLIzIFKw.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xHIzIFKw.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc3CsTKlA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc-CsTKlA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc2CsTKlA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc5CsTKlA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc1CsTKlA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc0CsTKlA.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51S7ACc6CsQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic3CsTKlA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic-CsTKlA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic2CsTKlA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic5CsTKlA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic1CsTKlA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic0CsTKlA.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc3CsTKlA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc-CsTKlA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc2CsTKlA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc5CsTKlA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc1CsTKlA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc0CsTKlA.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOjCnqEu92Fr1Mu51TLBCc6CsQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxMIzIFKw.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxEIzIFKw.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxLIzIFKw.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxHIzIFKw.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxGIzIFKw.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* cyrillic-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+  }
+  /* cyrillic */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+  }
+  /* greek-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+  }
+  /* greek */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+  }
+  /* vietnamese */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+  /* latin */
+  @font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
--- a/components/Alert.vue
+++ b/components/Alert.vue
@ -0,0 +1,13 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>
--- a/components/CardLoading.vue
+++ b/components/CardLoading.vue
@ -0,0 +1,11 @@
+<template>
+  <div class="card-loading">
+    <ProgressSpinner style="width: 32px; height: 32px;" stroke-width="4" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style></style>
--- a/components/Countdown.vue
+++ b/components/Countdown.vue
@ -0,0 +1,53 @@
+<template>
+  <span>
+    {{ minutes }}:{{ seconds }}
+  </span>
+</template>
+
+<script setup type="ts">
+const minutes = ref()
+const seconds = ref()
+const interval = ref()
+const props = defineProps(['expired'])
+const emits = defineEmits(['end'])
+const tmp = ref()
+function startCountdown() {
+  let now = new Date()
+  const end = new Date(props.expired)
+  console.log(end)
+  let diff = (end.getTime() - now.getTime()) / 1000
+  minutes.value = Math.floor(diff / 60)
+  seconds.value = Math.floor(diff - (minutes.value * 60))
+
+  if (seconds.value < 10) {
+    seconds.value = (seconds.value + '').padStart(2, '0')
+  }
+
+  interval.value = setInterval(() => {
+    now = new Date()
+
+    let diff = (end.getTime() - now.getTime()) / 1000
+    minutes.value = Math.floor(diff / 60)
+    seconds.value = Math.floor(diff - (minutes.value * 60))
+
+    if (seconds.value < 10) {
+      seconds.value = (seconds.value + '').padStart(2, '0')
+    }
+
+    if (diff <= 0) {
+      clearInterval(interval.value)
+      minutes.value = '0'
+      seconds.value = '00'
+      emits('end')
+    }
+  }, 1000)
+}
+onMounted(() => {
+  startCountdown()
+})
+
+onBeforeUnmount(() => {
+  clearInterval(interval.value)
+})
+
+</script>
--- a/components/RentStep.vue
+++ b/components/RentStep.vue
@ -0,0 +1,27 @@
+<template>
+  <div class="flex gap-2 px-3 w-full justify-between">
+    <div v-for="i in 8" :class="inidactorClass(i)" style="padding: 2px;">
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const router = useRouter()
+const route = useRoute()
+const rentList = computed(() => {
+  let r = router.getRoutes()
+  return r.filter(x => { if (x.path = '/rent' && x.children.length > 0 && x.children[0].name?.toString().match(/^rent-/gi)) { return true } }).map(x => { return x.children })[0].sort((a, b) => a.meta.rentStep - b.meta.rentStep)
+})
+
+const inidactorClass = (n)=>{
+  let a = ['w-full']
+  if(n <= route.meta?.rentStep){
+      a.push('bg-primary dark:bg-primary')
+  }else{
+    a.push('bg-gray-300 dark:bg-stone-800')
+  }
+  return a
+}
+</script>
+
+<style></style>
--- a/composables/localeDateString.ts
+++ b/composables/localeDateString.ts
@ -0,0 +1,10 @@
+export const useLocaleDateString = (d:any) => {
+  let _d = d
+  if(typeof d === "string"){
+    let _d = new Date(d)
+  }
+  if(typeof _d === 'object'){
+    console.log(typeof _d)
+    return _d.toLocaleDateString()
+  }
+}
--- a/middleware/00-auth.global.ts
+++ b/middleware/00-auth.global.ts
@ -0,0 +1,27 @@
+export default defineNuxtRouteMiddleware(async(to, from) => {
+    const authStore = useAuthStore()
+    const token = useCookie('_auth')
+    
+    await authStore.getData()
+
+    let navigate: any = false
+
+    /** Belépett */
+    if (authStore.user) {
+        if (to.fullPath.match(/^\/login/gi)) {
+            navigate = '/'
+        }
+    } else {
+        navigate = '/login'
+        if (to.fullPath.match(/^\/login/gi)) {
+            navigate = false
+        }
+        if (to.fullPath.match(/^\/page/gi)) {
+            navigate = false
+        }
+    }
+
+    if (navigate) {
+        return navigateTo(navigate)
+    }
+})
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -2,10 +2,16 @@ import * as path from "path";

 export default defineNuxtConfig({
  compatibilityDate:'2024-12-29',
-    modules: [ "@primevue/nuxt-module"],
-    css: ['@/assets/styles/tailwind.css', '@/assets/styles/base.css'],
+  devServer:{
+    host:'0.0.0.0'
+  },
+  ssr:false,
+    modules: ["@primevue/nuxt-module", "@pinia/nuxt", "@nuxt/icon"],
+    css: ['@/assets/styles/tailwind.css', '@/assets/styles/base.css', '@/assets/styles/fonts.css'],
    primevue: {      
-        options: { theme: 'none' , locale:{
+        options: { theme: 'none' ,pt:{
+          card:{ root:'shadowl-lg', body:'p-2'}
+        }, locale:{
            "accept": "Igen",
            "addRule": "Szabály hozzáadása",
            "am": "de.",
--- a/package.json
+++ b/package.json
@ -9,18 +9,23 @@
        "postinstall": "nuxt prepare"
    },
    "devDependencies": {
-        "@primevue/nuxt-module": "^4.3.3",
-        "autoprefixer": "^10.4.21",
-        "nuxt": "3.12.1",
-        "postcss": "^8.5.3",
+        "@iconify-json/ph": "^1.2.2",
+        "@nuxt/icon": "1.10.3",
+        "@pinia/nuxt": "0.9.0",
+        "@primevue/nuxt-module": "^4.2.5",
+        "autoprefixer": "^10.4.20",
+        "nuxt": "3.15.0",
+        "pinia": "^2.3.0",
+        "postcss": "^8.4.49",
        "postcss-import": "^16.1.0"
    },
    "dependencies": {
-        "@primevue/forms": "^4.3.3",
-        "primevue": "^4.3.3",
+        "primeicons": "^7.0.0",
+        "primevue": "^4.2.5",
        "tailwindcss": "^3.4.17",
        "tailwindcss-primeui": "^0.3.4",
        "vue": "^3.5.13",
        "vue-router": "^4.5.0"
-    }
+    },
+    "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
 }
--- a/pages/index.vue
+++ b/pages/index.vue
@ -1,12 +1,115 @@
 <script setup>
+const auth = useAuthStore()
+const config = useMyConfigStore()
+const token = useCookie('_auth')
+const menuShow = ref()
+const router = useRouter()
+const user = computed(() => {
+    return auth.user
+})
+
+const rentals = computed(() => {
+    return auth.rentals
+})
+
+const states = computed(() => {
+    return config.states
+})
+
+function getStateName(id) {
+    if (id == '0') {
+        return 'Visszaigazolásra vár'
+    }
+    let match = states.value?.filter(x => { if (x.id == id) { return true } })
+    if (match?.length > 0) {
+        return match[0].name
+    }
+}
+
+function getYear(date) {
+
+}
+
+function getMont(date) {
+
+}
+
+function logOut(){
+    token.value = null
+    auth.user = null
+    router.push({path:'/login'})
+}
 </script>
 <template>
-    <div class="flex items-center justify-center min-h-dvh p-10">
-        <div class="flex items-center justify-center p-10">
-            <section class="bg-white dark:bg-surface-900 p-10 rounded-xl flex flex-col gap-8 max-w-3xl ">
-                <h1 class="text-4xl text-black dark:text-white font-bold text-center">Nuxt + Tailwind CSS + PrimeVue
-                </h1>
-            </section>
+    <div class="min-h-12 bg-neutral-800 flex justify-between items-center pe-2">
+        <div @click="$router.push({ path: '/' })"
+            class="bg-neutral-800 h-12 flex items-center shadow-lg bg-gradient-to-r from-neutral-800 dark:from-neutral-900 to-transparent">
+            <img src="/euro_cars_rent_a_car_logo.png" class="h-8 mx-3" />
+        </div>
+        <div>
+            <Drawer v-model:visible="menuShow" header=" " position="right" :pt="{ root: 'border-0' }">
+                <template #header>
+                    <div class="flex flex-col">
+                        <div>{{ auth.user.nev }}</div>
+                        <div class="text-xs">{{ auth.user.email }}</div>
+                    </div>
+
+                </template>
+                <div class="flex flex-col space-y-3 text-sm">
+                    <NuxtLink to="/profile">Adataim</NuxtLink>
+                    <Divider />
+                    <NuxtLink :to="'/page/'+p.id" v-for="p in config?.config.menu">{{ p.label }}</NuxtLink>
+                    <!-- <NuxtLink to="/page/72">GYIK</NuxtLink>
+                    <NuxtLink to="/page/66">Autóbérlés feltételei</NuxtLink>
+                    <NuxtLink to="/page/69">Általános Szerződési Feltételek</NuxtLink>
+                    <NuxtLink to="/page/68">Adatvédelmi nyilatkozat</NuxtLink>
+                    <NuxtLink to="/page/70">Lemondási és távolmaradási feltételek</NuxtLink>
+                    <NuxtLink to="/page/65">Elérhetőség</NuxtLink> -->
+                    <Divider />
+                    <NuxtLink @click="logOut()">Kijelentketés</NuxtLink>
+
+                </div>
+            </Drawer>
+            <Button variant="link" icon="pi pi-user" @click="$router.push({ path: '/profile' })"></Button>
+            <Button variant="link" icon="pi pi-bars" @click="menuShow = true"></Button>
        </div>
    </div>
+
+    <div v-if="!rentals">
+        <div class="p-3 text-center">
+            <div class="py-5">
+                <Icon name="ph:calendar-slash-thin" size="68" class="opacity-30" />
+            </div>
+            Jelenleg nincs foglalásod
+        </div>
+    </div>
+
+    <div v-for="rent in rentals" class="p-2">
+        <div class="p-card border-t border-t-4 border-primary">
+            <div class="ps-3">{{ getStateName(rent.status) }}</div>
+            <div v-if="rent.jaratszam" class="text-end text-xs pe-3"><span class="">járatszám:</span><b>{{
+                    rent.jaratszam
+                    }}</b></div>
+            <div class="flex items-baseline flex-row">
+                <div class="text-center p-2 w-full items-top">
+                    <div class="text-xs">{{ rent.auto_felvetel_datum }}</div>
+                    <div class="text-2xl">{{ rent.auto_felvetel_idopont }}</div>
+                    <div class="text-xs">{{ rent.auto_felvetel_hely }}</div>
+                </div>
+                <div class="w-4"></div>
+                <div class="text-center p-2 w-full">
+                    <div class="text-xs">{{ rent.auto_leadas_datum }}</div>
+                    <div class="text-2xl">{{ rent.auto_leadas_idopont }}</div>
+                    <div class="text-xs">{{ rent.auto_leadas_hely }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="py-5 px-3 ">
+        <Button class="w-full" variant="success" icon="pi pi-plus" @click="$router.push({ path: '/rent' })">Új
+            foglalás</Button>
+
+    </div>
+
 </template>
--- a/pages/login.vue
+++ b/pages/login.vue
@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div class="min-h-dvh px-5 pb-5">
+      <div class="flex flex-col gap-3 items-center justify-center text-center">
+        <div @click="$router.push({path:'/'})"
+          class="w-48 bg-neutral-600 p-5 flex items-end rounded-ee-xl rounded-es-xl shadow-lg bg-gradient-to-b from-neutral-300 dark:from-black to-transparent">
+          <img src="/euro_cars_rent_a_car_logo.png" class="w-full" />
+        </div>
+        <NuxtPage />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style></style>
--- a/pages/login/code.vue
+++ b/pages/login/code.vue
@ -0,0 +1,111 @@
+
+<script lang="ts" setup>
+const auth = useAuthStore()
+
+const loginCode = ref()
+const loginCodePrefix = ref()
+const codeExpire = ref()
+const account = ref()
+const isLoading = ref(false)
+const charcode = ref()
+const errorMessage = ref()
+const successMessage = ref()
+const router = useRouter()
+const token = useCookie('_auth')
+async function sendCode() {
+  isLoading.value = true
+  errorMessage.value = false
+  successMessage.value = false
+  const { data } = await useFetch('https://olcsoberauto.hu/rest/tokenRequest', {
+    method: "post",
+    body: {
+      account: account.value,
+      code: loginCode.value,
+      code_prefix: loginCodePrefix.value
+    }
+  })
+
+  if (data.value?.error) {
+    errorMessage.value = data.value?.message
+  }
+
+  if (data.value?.success) {
+    if (data.value?.message) {
+      successMessage.value = data.value?.message
+    }
+    if (data.value?.token) {
+      token.value = data.value.token
+      window.localStorage.removeItem('codePrefix')
+      window.localStorage.removeItem('codeExpire')
+      if (data.value?.user) {
+        auth.user = data.value.user
+      }
+      return navigateTo('/')
+    }
+  }
+
+  isLoading.value = false
+}
+
+
+function codeExpired() {
+  console.log('Code expired!')
+    loginCodePrefix.value = null
+    codeExpire.value = null
+    router.push({path:'/login'})
+}
+
+function changeCode() {
+    if (loginCode.value.length === 4) {
+        sendCode()
+    }
+}
+
+onMounted(()=>{
+  loginCodePrefix.value = window.localStorage.getItem('codePrefix')
+  codeExpire.value = window.localStorage.getItem('codeExpire')
+  account.value = window.localStorage.getItem('account')
+  window.document.addEventListener('keydown', function(e){
+    console.log(e)
+    charcode.value = e.key
+    if(e.key === 'Backspace' && loginCode.value.length > 0){
+      loginCode.value = loginCode.value.substr(0,loginCode.value.length-1)
+    }
+  })
+})
+</script>
+
+<template>
+  <div>
+    <Message class="w-full" severity="error" v-if="errorMessage">{{ errorMessage }}</Message>
+    <Message class="w-full" severity="success" v-if="successMessage">{{ successMessage }}</Message>
+    <div class="p-2">
+      Add meg a kódot amit a(z) <b>{{ account }}</b> e-mail címre küldött ki rendszerünk.
+    </div>
+    <Card>
+      <template #content>
+        <div class="flex flex-wrap justify-center gap-1 items-center p-2 relative">
+          <CardLoading v-if="isLoading" />
+          <InputOtp v-model="loginCodePrefix" :length="2" style="gap: 1" disabled size="small">
+          </InputOtp>
+          <div><i class="pi pi-minus"></i></div>
+          <InputOtp v-model="loginCode" :length="4" style="gap: 1" size="small" @change="changeCode($event)" integer-only></InputOtp>
+        </div>
+      </template>
+    </Card>
+    <div class="p-2">
+      A kód még <b>
+        <Countdown v-if="codeExpire" :expired="codeExpire" @end="codeExpired()" />
+      </b> percig érvényes. Lejárat után új kódot kell igényelned.
+    </div>
+    <Alert>
+      {{ errorMessage }}
+    </Alert>
+    <Button @click="sendCode()" class="w-full" icon="pi pi-check-circles">Kód küldése</Button>
+
+    <Button @click="$router.push({path:'/login'})" variant="link" class="w-full mt-3" icon="pi pi-check-circles">Új kód kérése</Button>
+  </div>
+</template>
+
+
+<style></style>
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@ -0,0 +1,76 @@
+<template>
+  <div>
+    <Message class="w-full" severity="error" v-if="errorMessage">{{ errorMessage }}</Message>
+    <Message class="w-full" severity="success" v-if="successMessage">{{ successMessage }}</Message>
+    <h1 class="text-2xl py-3">Kérjük, add meg az e-mail címedet</h1>
+    <div>Ha már korábban volt foglalásod vagy regisztrációd akkor azt az e-mail címet add meg.</div>
+
+    <Card class="w-full max-w-sm m-auto mt-3">
+      <template #content>
+        <div class="flex flex-col gap-5 items-center p-2 relative w-full">
+          <CardLoading v-if="isLoading" />
+          <FloatLabel variant="on" class="w-full">
+            <InputText id="email_label" v-model="account" autocomplete="off" class="w-full" />
+            <label for="email_label">E-mail cím</label>
+          </FloatLabel>
+          <div class="text-xs">Az e-mail cím megadásával elfogadod a felhasználási feltételeinket. Az
+            adatvédelemről az Adatvédelmi nyilatkozat linken olvashatsz.</div>
+          <Button @click="sendAccount()" class="w-full" icon="pi pi-check-circles">Megadom az e-mail
+            címem</Button>
+        </div>
+      </template>
+    </Card>
+
+    <div class="text-center text-xs mt-5" v-if="configStore?.config">
+      <NuxtLink :to="'/page/' + configStore?.config?.adatvedelem_id">Adatvédelmi nyilatkozat</NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const configStore = useMyConfigStore()
+const errorMessage = ref()
+const successMessage = ref()
+const isLoading = ref()
+const account = ref()
+const router = useRouter()
+
+async function sendAccount() {
+    errorMessage.value = false
+    successMessage.value = false
+    isLoading.value = true
+
+    const { data } = await useFetch('https://olcsoberauto.hu/rest/authRequest', {
+        method: "post",
+        body: {
+            account: account.value
+        }
+    })
+
+    if (data.value?.error) {
+        errorMessage.value = data.value.message
+    }
+
+    if (data.value?.success) {
+
+        window.localStorage.setItem('codePrefix', data.value.codePrefix)
+        window.localStorage.setItem('codeExpire', data.value.codeExpire)
+        window.localStorage.setItem('account', data.value.account)
+
+        if (data.value?.message) {
+            successMessage.value = data.value.message
+        }
+
+        router.push({ path: '/login/code',force:true })
+    }
+
+    isLoading.value = false
+}
+
+onMounted(() => {
+    account.value = window.localStorage.getItem('account')
+})
+
+</script>
+
+<style></style>
--- a/pages/page/[id].vue
+++ b/pages/page/[id].vue
@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div class="flex items-center border-b mb-3 border-primary">
+      <Button icon="pi pi-arrow-left" variant="link" @click="$router.go(-1)"></Button>
+      <h1>{{ Title }}</h1>
+      <Skeleton width="85%" v-if="isLoading"></Skeleton>
+    </div>
+    <div class="p-3">
+      <div v-if="isLoading">
+        <Skeleton></Skeleton>
+        <Skeleton width="85%" class="my-2"></Skeleton>
+        <Skeleton width="75%"></Skeleton>
+      </div>
+      <div v-html="Content"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const Title = ref()
+  const Content = ref()
+  const route = useRoute()
+  const isLoading = ref(true)
+
+  onMounted(async()=>{
+    const {data} = await useFetch('https://olcsoberauto.hu/rest/getPage', { query:{id:route.params.id}})
+    if(data.value?.success){
+      Title.value = data.value?.page.post_title
+      Content.value = data.value?.page.post_content
+    }
+    isLoading.value = false
+  })
+</script>
+
+<style>
+
+</style>
--- a/pages/profile/index.vue
+++ b/pages/profile/index.vue
@ -0,0 +1,70 @@
+<template>
+  <div>
+
+    <div class="flex justify-between items-center">
+      <Button @click="$router.back()" link icon="pi pi-arrow-left"></Button>
+      <div class="px-3">Adataim</div>
+    </div>
+    <div class="p-3 space-y-3">
+      <CardLoading v-if="isLoading" />
+      <FloatLabel variant="on">
+        <InputText id="name" v-model="user.nev" class="w-full" />
+        <label for="name">Név</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <InputText id="email" v-model="user.email" class="w-full" />
+        <label for="email">E-mail</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <InputText id="telefon" v-model="user.telefon" class="w-full" />
+        <label for="telefon">Telefon</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <InputText id="anyja_neve" v-model="user.anyja_neve" class="w-full" />
+        <label for="anyja_neve">Anyja neve</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <InputText id="szuletesi_hely" v-model="user.szuletesi_hely" class="w-full" />
+        <label for="szuletesi_hely">Születési hely</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <DatePicker show-icon date-format="yy-mm-dd" id="szuletesi_ido" v-model="user.szuletesi_ido" class="w-full" />
+        <label for="szuletesi_ido">Születési idő</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <InputText id="nemzetiseg" v-model="user.nemzetiseg" class="w-full" />
+        <label for="nemzetiseg">Állampolgárság</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <InputText id="szigszam" v-model="user.szigszam" class="w-full" />
+        <label for="szigszam">Személyi igazolvány / Útlevél száma</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <InputText id="jogositvany_szama" v-model="user.jogositvany_szama" class="w-full" />
+        <label for="jogositvany_szama">Jogosítvány száma</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <InputText id="lakcim" v-model="user.lakcim" class="w-full" />
+        <label for="lakcim">Lakcím</label>
+      </FloatLabel>
+      <FloatLabel variant="on">
+        <InputText id="tartozkodasicim" v-model="user.tartozkodasicim" class="w-full" />
+        <label for="tartozkodasicim">Tartózkodási cím</label>
+      </FloatLabel>
+
+      <div class="">
+        <Button @click="save()" class="max-sm:w-full min-w-20" icon="pi pi-save">Adatok mentése</Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const isLoading = ref()
+const { user } = storeToRefs(useAuthStore())
+async function save() {
+
+}
+</script>
+
+<style></style>
--- a/pages/rent.vue
+++ b/pages/rent.vue
@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="flex justify-between items-center h-16">
+      <Button @click="$router.back()" link icon="pi pi-arrow-left" v-if="$route.meta?.rentStep < 8"></Button>
+      <div class="px-3">{{ $route?.meta?.title }}</div>
+    </div>
+    <RentStep v-if="$route.meta?.rentStep < 8"/>
+    <!--     <Stepper value="1" linear>
+      <StepList>
+        <Step value="1">Autófelvétel</Step>
+        <Step value="2"></Step>
+        <Step value="3"></Step>
+      </StepList>
+    </Stepper> -->
+    <NuxtPage />
+    <!-- <pre>{{ rent }}</pre> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+const {rent} = useAuthStore()
+
+const prevPage = ref()
+definePageMeta({
+  pageTransition: {
+    name: 'slide-right',
+    mode: 'out-in'
+  },
+  middleware(to, from) {
+    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
+      console.log(to.meta)
+    to.meta.pageTransition.name = +to.meta.rentStep! > +from.meta.rentStep! ? 'slide-left' : 'slide-right'
+    prevPage.value = from.fullPath
+  }
+})
+
+
+</script>
+
+<style>
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.2s;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
+</style>
--- a/pages/rent/category.vue
+++ b/pages/rent/category.vue
@ -0,0 +1,47 @@
+<template>
+  <div>
+
+    <div class="flex flex-col gap-3 p-3">
+      <Card v-for="categori in categories" :pt="{ root: '' }" @click="next(categori)">
+        <template #content>
+          <div class="flex">
+            <div class="flex justify-center items-center text-3xl font-bold" style="width: 56px; font-size: 32px;">{{
+              categori.shortname }}</div>
+            <div>
+              <div class="text-sm">{{ categori.name }}</div>
+              <div class="text-primary-500">{{ HUFormat.format(categori.price) }} / nap</div>
+            </div>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { rent } = storeToRefs(useAuthStore())
+
+definePageMeta({
+  rentStep: 6,
+  title: 'Válassz egy kategóriát'
+})
+const categoriestStore = useCategoriesStore()
+
+const categories: CategoryType[] = computed(() => {
+  return categoriestStore.categories
+})
+
+let HUFormat = new Intl.NumberFormat('hu-HU', {
+  style: 'currency',
+  currency: 'HUF',
+  maximumFractionDigits: 0
+});
+
+function next(category) {
+  rent.value.category_id = category.category_id
+  rent.value.valasztott_auto = category.shortname + ' ' + category.name
+  navigateTo('/rent/preview')
+}
+</script>
+
+<style></style>
--- a/pages/rent/date-to.vue
+++ b/pages/rent/date-to.vue
@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="flex flex-col p-3">
+
+      <DatePicker inline :min-date="rent.auto_felvetel_datum" v-model="rent.auto_leadas_datum" />
+    </div>
+
+    <div class="flex flex-col p-3">
+      Időpont
+      <Dropdown :options="timeList" v-model="rent.auto_leadas_idopont" />
+    </div>
+    <div class="p-3">
+      <Button @click="next()" class="max-sm:w-full min-w-20" v-if="rent.auto_leadas_datum && rent.auto_leadas_idopont">Tovább</Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const {rent} = storeToRefs(useAuthStore())
+definePageMeta({
+  rentStep: 3,
+  title: 'Autóbérlés vége'
+})
+function next() {
+  navigateTo('/rent/place-to')
+}
+const rentDays = computed(() => {
+  // Dátum objektumok létrehozása
+  const kezdoDatumObj = rent.auto_felvetel_datum;
+  const vegDatumObj = rent.auto_leadas_datum;
+
+  // A két dátum közötti különbség millimásodpercben
+  const kulonbsegMs = vegDatumObj - kezdoDatumObj;
+
+  // Átváltás napokba (egy nap 86400000 millimásodperc)
+  const napok = Math.floor(kulonbsegMs / 86400000);
+
+  return napok+1;
+})
+const timeList = computed(() => {
+  let a = []
+  for (let i = 0; i < 24; i++) {
+    if(rent.value.auto_leadas_datum == rent.value.auto_felvetel_datum){
+      if(rent.value.auto_felvetel_idopont < i + ':00'){
+        a.push(i + ':00')
+      }
+      if(rent.value.auto_felvetel_idopont < i + ':30'){
+        a.push(i + ':30')
+      }
+    }else{
+      a.push(i + ':00')
+      a.push(i + ':30')
+    }
+
+  }
+  return a
+})
+
+</script>
+
+<style></style>
--- a/pages/rent/extra.vue
+++ b/pages/rent/extra.vue
@ -0,0 +1,86 @@
+<template>
+  <div class="p-3">
+
+
+
+    <div>
+      <div><span class="text-red-500">*</span>  Autó használata:</div>
+      <div class="flex flex-col gap-4 p-3">
+        <div class="flex items-center gap-2">
+          <RadioButton v-model="rent.hasznalat" inputId="hasznalat-belfold" name="hasznalat" value="belfold" />
+          <label for="hasznalat-belfold" class="text-sm">Belföld</label>
+        </div>
+        <div class="flex items-center gap-2">
+          <RadioButton v-model="rent.hasznalat" inputId="hasznalat-kulfold" name="hasznalat" value="kulfold" />
+          <label for="hasznalat-kulfold" class="text-sm">Belföld és külföld</label>
+        </div>
+      </div>
+    </div>
+    <Divider />
+    <div class="flex items-center gap-2 text-small">
+      <ToggleSwitch name="matrica" v-model="rent.palyamatrica" input-id="palyamatrica" />
+      <label for="palyamatrica">Magyar autópálya matrica</label>
+    </div>
+    <Divider />
+    <div>
+      <div>Opcionálisan bérelhető tartozékok:</div>
+      <div class="flex flex-col gap-4 p-3">
+        <div class="flex items-center gap-2">
+          <Checkbox v-model="rent.tartozekok" inputId="tartozekok-snowchain" name="tartozekok[]" value="snowchain" />
+          <label for="tartozekok-snowchain" class="text-sm">Hólánc</label>
+        </div>
+        <div class="flex items-center gap-2">
+          <Checkbox v-model="rent.tartozekok" inputId="tartozekok-childsheat" name="tartozekok[]" value="childsheat" />
+          <label for="tartozekok-childsheat" class="text-sm">Gyerekülés</label>
+        </div>
+      </div>
+    </div>
+    <Divider />
+    <div>
+      <div><span class="text-red-500">*</span> Fizetési mód:</div>
+      <div class="flex flex-col gap-4 p-3">
+        <div class="flex items-center gap-2">
+          <RadioButton v-model="rent.fizetesi_mod" inputId="fizetesi_mod-1" name="payment" value="1" />
+          <label for="fizetesi_mod-1" class="text-sm">Készpénzzel a helyszínen</label>
+        </div>
+        <div class="flex items-center gap-2">
+          <RadioButton v-model="rent.fizetesi_mod" inputId="fizetesi_mod-2" name="payment" value="2" />
+          <label for="fizetesi_mod-2" class="text-sm">Banki előre utalás</label>
+        </div>
+        <div class="flex items-center gap-2">
+          <RadioButton v-model="rent.fizetesi_mod" inputId="fizetesi_mod-3" name="payment" value="3" />
+          <label for="fizetesi_mod-3" class="text-sm">Bankkártyával  a helyszínen</label>
+        </div>
+      </div>
+    </div>
+    <Divider />
+    <div>
+      <div>Üzenet:</div>
+      <Textarea rows="4" class="w-full text-sm" placeholder="Ha szeretnél nekünk üzenni az autóbérléssel kapcsolatosan, akkor itt megteheted."></Textarea>
+    </div>
+    <div class="py-3">
+      <Button @click="next()" class="w-full" :disabled="isValid">Tovább</Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { rent } = storeToRefs(useAuthStore())
+
+definePageMeta({
+  rentStep:5,
+  title: ''
+})
+const hasznalatOptions = ref([{ value: 'belfold', label: 'Belföld' }, { value: 'kulfold', label: 'Belföld és külföld' }])
+function next() {
+  navigateTo('/rent/category')
+}
+
+const isValid = computed(()=>{
+  if(!rent.value?.hasznalat) return true
+  if(!rent.value?.fizetesi_mod) return true
+  return false
+})
+</script>
+
+<style></style>
--- a/pages/rent/index.vue
+++ b/pages/rent/index.vue
@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div class="flex flex-col p-3">
+      <DatePicker inline :min-date="(new Date())" v-model="rent.auto_felvetel_datum"/>
+    </div>
+
+    <div class="flex flex-col p-3">
+      Időpont
+      <Dropdown :options="timeList" v-model="rent.auto_felvetel_idopont" />
+    </div>
+    <div class="p-3">
+      <Button @click="next()" class="max-sm:w-full min-w-20" v-if="rent.auto_felvetel_datum && rent.auto_felvetel_idopont">Tovább</Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const {rent} = storeToRefs(useAuthStore())
+definePageMeta({
+  rentStep: 1,
+  title:'Autóbérlés kezdete'
+})
+function next() {
+  navigateTo('/rent/place-from')
+}
+
+const timeList = computed(()=>{
+  let a = []
+  for(let i=0; i<24; i++){
+    a.push(i+':00')
+    a.push(i+':30')
+  }
+  return a
+})
+
+</script>
+
+<style></style>
--- a/pages/rent/jaratszam.vue
+++ b/pages/rent/jaratszam.vue
@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-col p-3 gap-3">
+    Járatszám
+    <InputText v-model="rent.jaratszam" :style="{'text-transform': 'uppercase'}" />
+    <div class="text-center">
+      <Button class="w-full mb-5" @click="next()">Tovább</Button>
+      <NuxtLink @click="next(1)">Nem adok meg járatszámot</NuxtLink>
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const {rent} = useAuthStore()
+const router = useRouter()
+definePageMeta({
+  rentStep: 2.5,
+  title:'Járatszám'
+})
+
+function next(clear: any = false){
+  if(clear){
+    rent.jaratszam = null
+  }
+  router.push({path:'/rent/date-to'})
+}
+</script>
+
+<style>
+
+</style>
--- a/pages/rent/place-from.vue
+++ b/pages/rent/place-from.vue
@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="flex flex-col gap-3 p-3">
+      <Card v-for="place in places" :pt="{ root: (rent.auto_felvetel_hely == place) ? 'bg-primary-500 text-white mb-3' : 'mb-3' }">
+        <template #content>
+          <div class="flex gap-3" @click="next(place)">
+            <div class="flex justify-center items-center text-3xl font-bold" style="width: 56px; font-size: 32px;">
+              <template v-if="place.icon == 'airplane'">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 256 256">
+                  <path fill="currentColor"
+                    d="M256 216a8 8 0 0 1-8 8H104a8 8 0 0 1 0-16h144a8 8 0 0 1 8 8m-26.16-24.3L53.21 142.24A40.12 40.12 0 0 1 24 103.72V48a16 16 0 0 1 21.06-15.18l5.47 1.82a8 8 0 0 1 5 4.87l10.6 29.37L96 77.39V48a16 16 0 0 1 21.06-15.18l5.47 1.82a8 8 0 0 1 4.85 4.5l22.5 53.63l60.84 17A40.13 40.13 0 0 1 240 148.32V184a8 8 0 0 1-10.16 7.7M224 148.32a24.09 24.09 0 0 0-17.58-23.13l-64.57-18a8 8 0 0 1-5.23-4.61L114 48.67l-2-.67v40a8 8 0 0 1-10.19 7.7l-44-12.54a8 8 0 0 1-5.33-5L41.79 48.59L40 48v55.72a24.09 24.09 0 0 0 17.53 23.12L224 173.45Z" />
+                </svg>
+              </template>
+              <template v-if="place.icon == 'office'">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 256 256"><path fill="currentColor" d="M248 208h-16V96a8 8 0 0 0 0-16h-48V48a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16v160H24a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16M216 96v112h-32V96ZM56 48h112v160h-24v-48a8 8 0 0 0-8-8H88a8 8 0 0 0-8 8v48H56Zm72 160H96v-40h32ZM72 80a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8m48 0a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16h-16a8 8 0 0 1-8-8m-48 40a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8m48 0a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16h-16a8 8 0 0 1-8-8"/></svg>
+              </template>
+            </div>
+            <div class="w-full">
+              <div class="text-sm"><b>{{ place.name }}</b></div>
+              <div class="text-sm">{{ place.address }}</div>
+            </div>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const {rent} = storeToRefs(useAuthStore())
+
+definePageMeta({
+  rentStep: 2,
+  title:'Autófelvétel helye'
+})
+const placeStore = useMyPlacesStore()
+
+const places: PlaceType[] = computed(() => {
+  return placeStore.places
+})
+
+let HUFormat = new Intl.NumberFormat('hu-HU', {
+  style: 'currency',
+  currency: 'HUF',
+  maximumFractionDigits: 0
+});
+
+function next(val) {
+  rent.value.auto_felvetel_hely=val
+  if(val.id == '3'){
+    navigateTo('/rent/jaratszam')
+  }else{
+    navigateTo('/rent/date-to')
+  }
+}
+
+function prev() {
+  navigateTo('/rent')
+}
+</script>
+
+<style></style>
--- a/pages/rent/place-to.vue
+++ b/pages/rent/place-to.vue
@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div class="flex flex-col gap-3 p-3">
+      <Card v-for="place in places"
+        :pt="{ root: (rent.auto_leadas_hely == place) ? 'bg-primary-500 text-white mb-3' : 'mb-3' }">
+        <template #content>
+          <div class="flex gap-3" @click="next(place)">
+            <div class="flex justify-center items-center text-3xl font-bold" style="width: 56px; font-size: 32px;">
+              <template v-if="place.icon == 'airplane'">
+                <Icon name="ph:airplane-takeoff" size="48" />
+              </template>
+              <template v-if="place.icon == 'office'">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 256 256">
+                  <path fill="currentColor"
+                    d="M248 208h-16V96a8 8 0 0 0 0-16h-48V48a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16v160H24a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16M216 96v112h-32V96ZM56 48h112v160h-24v-48a8 8 0 0 0-8-8H88a8 8 0 0 0-8 8v48H56Zm72 160H96v-40h32ZM72 80a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8m48 0a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16h-16a8 8 0 0 1-8-8m-48 40a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8m48 0a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16h-16a8 8 0 0 1-8-8" />
+                </svg>
+              </template>
+            </div>
+            <div class="w-full">
+              <div class="text-sm"><b>{{ place.name }}</b></div>
+              <div class="text-sm">{{ place.address }}</div>
+            </div>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { rent } = storeToRefs(useAuthStore())
+
+definePageMeta({
+  rentStep: 4,
+  title: 'Autóleadás helye'
+})
+const placeStore = useMyPlacesStore()
+
+const places: PlaceType[] = computed(() => {
+  return placeStore.places
+})
+
+let HUFormat = new Intl.NumberFormat('hu-HU', {
+  style: 'currency',
+  currency: 'HUF',
+  maximumFractionDigits: 0
+});
+
+function next(val) {
+  rent.value.auto_leadas_hely = val
+  navigateTo('/rent/extra')
+}
+</script>
+
+<style></style>
--- a/pages/rent/preview.vue
+++ b/pages/rent/preview.vue
@ -0,0 +1,71 @@
+<template>
+  <div class="p-3">
+    <div class="p-card border-t border-t-4 border-primary p-4">
+      <div><b>Név: </b>{{ user.nev }}</div>
+      <div><b>E-mail: </b>{{ user.email }}</div>
+      <div><b>Telefon: </b>{{ user.telefon }}</div>
+      <div><b>Anyja neve: </b>{{ user.anyja_neve }}</div>
+      <div><b>Születési hely: </b>{{ user.szuletesi_hely }}</div>
+      <div><b>Születési idő: </b>{{ user.szuletesi_ido }}</div>
+      <div><b>Állampolgárság: </b>{{ user.nemzetiseg }}</div>
+      <div class="text-sm"><b>Személyi igazolvány / Útlevél száma: </b><br>{{ user.szigszam }}</div>
+      <div class="text-sm"><b>Jogosítvány száma: </b><br>{{ user.jogositvany_szama }}</div>
+      <div class="text-sm"><b>Lakcím: </b><br>{{ user.lakcim }}</div>
+      <div class="text-sm"><b>Tartózkodási cím: </b><br>{{ user.tartozkodasicim }}</div>
+
+      <Message class="mt-2" severity="warn">Amennyiben adataidban változás történt, módosítsd a <i
+          class="pi pi-user mx-2"></i> profilodban.</Message>
+
+      <div class="text-center">
+        <Button variant="link" @click="$router.push({ path: '/profile' })">Adatok módosítása</Button>
+      </div>
+    </div>
+    <div class="space-y-4 mt-4">
+      <div class="p-card border-t border-t-4 border-primary">
+        <div v-if="rent.jaratszam" class="text-end text-xs pe-3"><span class="">járatszám:</span><b>{{
+          rent.jaratszam
+        }}</b></div>
+        <div class="flex items-baseline flex-row">
+          <div class="text-center p-2 w-full items-top">
+            <div class="text-xs">{{ useLocaleDateString(rent.auto_felvetel_datum) }}</div>
+            <div class="text-2xl">{{ rent.auto_felvetel_idopont }}</div>
+            <div class="text-xs">{{ rent.auto_felvetel_hely?.name }}</div>
+          </div>
+          <div class="w-4"></div>
+          <div class="text-center p-2 w-full">
+            <div class="text-xs">{{ useLocaleDateString(rent.auto_leadas_datum) }}</div>
+            <div class="text-2xl">{{ rent.auto_leadas_idopont }}</div>
+            <div class="text-xs">{{ rent.auto_leadas_hely?.name }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-start gap-1" v-for="t in config?.rent.confirms">
+        <Checkbox v-model="confirms" :inputId="`confirm${t.id}`" name="confirms[]" :value="t.id" />
+        <label :for="`confirm${t.id}`" class="text-sm">{{ t.label }}</label>
+      </div>
+    </div>
+    <div class="py-5">
+      <Button @click="$router.push({ path: '/rent/thanks' })" class="w-full" :disabled="isValid">Foglalás
+        elküldése</Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const { rent, user } = storeToRefs(useAuthStore())
+const { config } = storeToRefs(useMyConfigStore())
+const confirms = ref([])
+
+definePageMeta({
+  rentStep: 7,
+  title: 'Foglalás áttekintése'
+})
+
+const isValid = computed(() => {
+  if (config.value?.rent.confirms.length > confirms.value?.length) return true
+  return false
+})
+</script>
+
+<style></style>
--- a/pages/rent/profile.vue
+++ b/pages/rent/profile.vue
@ -0,0 +1,17 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+definePageMeta({
+  rentStep: 6,
+  title:''
+})
+</script>
+
+<style>
+
+</style>
--- a/pages/rent/thanks.vue
+++ b/pages/rent/thanks.vue
@ -0,0 +1,23 @@
+<template>
+  <div class="p-3">
+    <div class="bg-gray-500 bg-opacity-20 rounded-full w-24 h-24 flex items-center justify-center mx-auto">
+      <Icon name="ph:calendar-check" size="72" class="text-green-600 dark:text-green-400" />
+    </div>
+    <div class="text-center font-bold text-green-600 dark:text-green-400 my-3" v-html="config?.rent.thanks_message.title"></div>
+    <div class="text-center text-sm" v-html="config?.rent.thanks_message.content"></div>
+    <Button icon="i-ph-check-circle" class="my-3 w-full" @click="$router.push({path:'/'})">Rendben</Button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const {rent} = storeToRefs(useAuthStore())
+const {config} = storeToRefs(useMyConfigStore())
+definePageMeta({
+  rentStep: 8,
+  title:''
+})
+</script>
+
+<style>
+
+</style>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/euro_cars_rent_a_car_logo.png
+++ b/public/euro_cars_rent_a_car_logo.png
--- a/stores/auth.ts
+++ b/stores/auth.ts
@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+
+export const useAuthStore = defineStore({
+  id: 'AuthStore',
+  state: () => ({ user: null, rentals: null, rent: {} }),
+  actions: {
+    async getData() {
+      const token = useCookie('_auth')
+      if (token.value) {
+        const { data } = await useFetch('https://olcsoberauto.hu/rest/me',
+          {
+            headers: {
+              'auth-key': token.value
+            }
+          }
+        )
+
+        if (data.value?.user) {
+          this.user = data.value.user
+          this.rentals = data.value.rentals
+        }
+      }
+    }
+  }
+})
--- a/stores/categories.ts
+++ b/stores/categories.ts
@ -0,0 +1,7 @@
+import { defineStore } from 'pinia'
+
+export const useCategoriesStore = defineStore({
+  id: 'CategoriesStore',
+  state: () => ({ categories :  null }),
+  actions: {}
+})
--- a/stores/config.ts
+++ b/stores/config.ts
@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+
+export const useMyConfigStore = defineStore({
+  id: 'myConfigStore',
+  state: () => ({ config: null, states:null }),
+  actions: {
+    async fetchData(){
+      
+    }
+  }
+})
--- a/stores/places.ts
+++ b/stores/places.ts
@ -0,0 +1,7 @@
+import { defineStore } from 'pinia'
+
+export const useMyPlacesStore = defineStore({
+  id: 'myPlacesStore',
+  state: () => ({ places:null }),
+  actions: {}
+})
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -2,7 +2,6 @@
 const primeui = require("tailwindcss-primeui");

 module.exports = {
-    darkMode: 'class', // Ne 'media' legyen
    content: ["./components/**/*.{js,vue,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./plugins/**/*.{js,ts}", "./nuxt.config.{js,ts}", "./app.vue", "./error.vue"],
    plugins: [primeui],
 };
--- a/types/CategoryType.d.ts
+++ b/types/CategoryType.d.ts
@ -0,0 +1,8 @@
+interface CategoryType{
+    category_id: Number,
+    shortname: String,
+    name: String,
+    price: String,
+    status: String,
+    image: String
+}
--- a/types/PlaceType.d.ts
+++ b/types/PlaceType.d.ts
@ -0,0 +1,12 @@
+interface PlaceType {
+    id: String,
+    icon: String,
+    name: String,
+    address: String,
+    price: String,
+    input: String,
+    office_place: String,
+    sort_order: String,
+    shortname: String,
+    color: String
+}
Author	SHA1	Message	Date
ervin	ec735c7a4e	update	2025-01-02 20:56:21 +01:00
ervin	2658719822	update	2025-01-01 23:06:17 +01:00
ervin	98b1c11be6	update	2025-01-01 11:15:54 +01:00