diff --git a/components.d.ts b/components.d.ts index 39a4d221a5eec7be22d8b9601cf1796efce5c651..b5319bf7693e67fa4a592db7c18c4833b4d1f293 100644 --- a/components.d.ts +++ b/components.d.ts @@ -2,13 +2,14 @@ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 -export {} +export {}; /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { Avatar: typeof import('primevue/avatar')['default'] Button: typeof import('primevue/button')['default'] + CreateEntityMenu: typeof import('./src/components/CreateEntityMenu.vue')['default'] Divider: typeof import('primevue/divider')['default'] Drawer: typeof import('primevue/drawer')['default'] LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default'] diff --git a/public/favicon.ico b/public/favicon.ico index 6fd4e8f5b58243f819903f3d662691e27f3f2c30..b96e38e7cdbc6bd251e5ea2a7fb3d0d508d25cab 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/assets/Motion.svg b/src/assets/Motion.svg index 67b88ff4db7a417a5ce552b02427ebe571b732e7..a51145e952f004c36dc87ffff45382f8b88fbbc3 100644 --- a/src/assets/Motion.svg +++ b/src/assets/Motion.svg @@ -1,72 +1,203 @@ - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/helpers /index.ts b/src/helpers /index.ts new file mode 100644 index 0000000000000000000000000000000000000000..eb5badfc9a3fc44cbe6b582df3b6e8479680994e --- /dev/null +++ b/src/helpers /index.ts @@ -0,0 +1,25 @@ +import { useInterfaceStore } from '@/stores/interface'; +import type { IEntity } from '@/interfaces/environment'; + +export async function uploadFile($event: Event) { + const target = $event.target as HTMLInputElement; + if (target && target.files && target.files[0]) { + const file = target.files[0]; + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.addEventListener('load', () => { + const url = reader.result; + const interfaceStore = useInterfaceStore(); + interfaceStore.changeHomeBackgroundUrl(url); + localStorage.setItem('homeBackgroundUrl', url); + }); + } +} + +export function setDefaultHomeBackground() { + const interfaceStore = useInterfaceStore(); + interfaceStore.changeHomeBackgroundUrl( + 'https://wallpapers.com/images/featured/minimalist-7xpryajznty61ra3.jpg' + ); + localStorage.removeItem('homeBackgroundUrl'); +} diff --git a/src/output.css b/src/output.css index 340995abe7b7632f40a265720898db57567a91e7..0b40bb46dfb9a3ec8f0e4d177c680c37d0f40827 100644 --- a/src/output.css +++ b/src/output.css @@ -588,10 +588,6 @@ video { } } -.pointer-events-none { - pointer-events: none; -} - .\!visible { visibility: visible !important; } @@ -620,24 +616,70 @@ video { left: 0px; } +.right-0 { + right: 0px; +} + .top-0 { top: 0px; } +.right-2 { + right: 0.5rem; +} + +.top-2 { + top: 0.5rem; +} + +.right-8 { + right: 2rem; +} + +.top-8 { + top: 2rem; +} + +.top-16 { + top: 4rem; +} + +.top-12 { + top: 3rem; +} + +.z-10 { + z-index: 10; +} + .-m-2 { margin: -0.5rem; } -.-m-4 { - margin: -1rem; +.-my-4 { + margin-top: -1rem; + margin-bottom: -1rem; +} + +.-my-2 { + margin-top: -0.5rem; + margin-bottom: -0.5rem; +} + +.-mb-2 { + margin-bottom: -0.5rem; } .mb-6 { margin-bottom: 1.5rem; } -.ml-8 { - margin-left: 2rem; +.ml-0 { + margin-left: 0px; +} + +.ml-\[58px\] { + margin-left: 58px; } .ml-auto { @@ -648,54 +690,46 @@ video { margin-right: 0.5rem; } -.ml-16 { - margin-left: 4rem; -} - -.ml-14 { - margin-left: 3.5rem; +.mt-4 { + margin-top: 1rem; } -.ml-\[60px\] { - margin-left: 60px; +.mt-1 { + margin-top: 0.25rem; } -.ml-\[58px\] { - margin-left: 58px; +.-mr-24 { + margin-right: -6rem; } -.mt-2 { - margin-top: 0.5rem; +.-mr-48 { + margin-right: -12rem; } -.mt-4 { - margin-top: 1rem; +.-mr-36 { + margin-right: -9rem; } -.-mb-4 { - margin-bottom: -1rem; +.-ml-2 { + margin-left: -0.5rem; } -.-mb-2 { - margin-bottom: -0.5rem; +.-mr-\[120px\] { + margin-right: -120px; } -.ml-0 { - margin-left: 0px; +.-mr-\[130px\] { + margin-right: -130px; } -.mt-8 { - margin-top: 2rem; +.-mr-\[135px\] { + margin-right: -135px; } .block { display: block; } -.inline-block { - display: inline-block; -} - .flex { display: flex; } @@ -708,30 +742,56 @@ video { display: table; } +.hidden { + display: none; +} + .size-12 { width: 3rem; height: 3rem; } -.size-full { - width: 100%; - height: 100%; +.size-24 { + width: 6rem; + height: 6rem; +} + +.size-8 { + width: 2rem; + height: 2rem; +} + +.size-48 { + width: 12rem; + height: 12rem; } .h-full { height: 100%; } -.min-h-\[200px\] { - min-height: 200px; +.h-24 { + height: 6rem; +} + +.w-20 { + width: 5rem; } .w-full { width: 100%; } -.w-20 { - width: 5rem; +.w-24 { + width: 6rem; +} + +.w-4 { + width: 1rem; +} + +.w-2 { + width: 0.5rem; } .cursor-pointer { @@ -744,10 +804,6 @@ video { user-select: none; } -.resize-y { - resize: vertical; -} - .flex-col { flex-direction: column; } @@ -760,6 +816,10 @@ video { align-items: center; } +.justify-end { + justify-content: flex-end; +} + .justify-center { justify-content: center; } @@ -772,10 +832,6 @@ video { gap: 0.5rem; } -.overflow-hidden { - overflow: hidden; -} - .rounded { border-radius: 0.25rem; } @@ -784,63 +840,60 @@ video { border-radius: 0.375rem; } +.rounded-lg { + border-radius: 0.5rem; +} + .border { border-width: 1px; } -.bg-blue-500 { - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +.border-2 { + border-width: 2px; } -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +.border-solid { + border-style: solid; } -.bg-gray-500 { - --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); +.border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.bg-gray-400 { +.bg-sky-900 { --tw-bg-opacity: 1; - background-color: rgb(156 163 175 / var(--tw-bg-opacity)); + background-color: rgb(12 74 110 / var(--tw-bg-opacity)); } -.bg-gray-600 { +.bg-white { --tw-bg-opacity: 1; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-sky-600 { +.bg-blue-900 { --tw-bg-opacity: 1; - background-color: rgb(2 132 199 / var(--tw-bg-opacity)); + background-color: rgb(30 58 138 / var(--tw-bg-opacity)); } -.bg-sky-700 { +.bg-blue-950 { --tw-bg-opacity: 1; - background-color: rgb(3 105 161 / var(--tw-bg-opacity)); + background-color: rgb(23 37 84 / var(--tw-bg-opacity)); } -.bg-sky-800 { +.bg-black { --tw-bg-opacity: 1; - background-color: rgb(7 89 133 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } -.bg-sky-950 { +.bg-blue-500 { --tw-bg-opacity: 1; - background-color: rgb(8 47 73 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); } -.bg-sky-900 { +.bg-blue-600 { --tw-bg-opacity: 1; - background-color: rgb(12 74 110 / var(--tw-bg-opacity)); -} - -.object-cover { - -o-object-fit: cover; - object-fit: cover; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); } .p-2 { @@ -856,33 +909,53 @@ video { padding-bottom: 1rem; } -.py-5 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.pl-0 { + padding-left: 0px; } .pr-2 { padding-right: 0.5rem; } -.pl-4 { - padding-left: 1rem; +.pt-6 { + padding-top: 1.5rem; } -.pl-0 { - padding-left: 0px; +.pt-1 { + padding-top: 0.25rem; +} + +.pr-24 { + padding-right: 6rem; +} + +.pr-48 { + padding-right: 12rem; +} + +.pr-36 { + padding-right: 9rem; } -.pb-14 { - padding-bottom: 3.5rem; +.pl-2 { + padding-left: 0.5rem; } -.pb-20 { - padding-bottom: 5rem; +.pr-\[120px\] { + padding-right: 120px; } -.pb-16 { - padding-bottom: 4rem; +.pr-\[130px\] { + padding-right: 130px; +} + +.pr-\[135px\] { + padding-right: 135px; } .text-center { @@ -904,26 +977,17 @@ video { line-height: 1.75rem; } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.font-semibold { - font-weight: 600; -} - .font-bold { font-weight: 700; } -.leading-\[0\] { - line-height: 0; +.font-semibold { + font-weight: 600; } -.text-gray-500 { +.text-gray-400 { --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); + color: rgb(156 163 175 / var(--tw-text-opacity)); } .text-white { @@ -931,11 +995,46 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); +.opacity-0 { + opacity: 0; +} + +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } .hover\:cursor-pointer:hover { cursor: pointer; +} + +.hover\:text-gray-400:hover { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.hover\:text-gray-300:hover { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity)); +} + +.hover\:opacity-50:hover { + opacity: 0.5; +} + +.hover\:opacity-20:hover { + opacity: 0.2; +} + +.hover\:opacity-90:hover { + opacity: 0.9; } \ No newline at end of file diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue index d879ed071dd17b7080d88cc538545a7b4dfdcdf6..39fbd52d475f15205edcf243090574a624203268 100644 --- a/src/pages/HomePage.vue +++ b/src/pages/HomePage.vue @@ -1,5 +1,95 @@ - + + +

Home page

+ +
+ + +
+ Change image +
+ + +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem cum dolores doloribus + dolorum, earum illum nam nemo nesciunt odit pariatur quam quisquam reprehenderit + sapiente ullam unde ut vel, voluptatem! +

+ +
+ +
+
+ + +
+ background image + + + diff --git a/src/router/index.ts b/src/router/index.ts index fcc517cf4f7c26432147e7df9bd5e5571fba0ddb..5947f22917d4d24c9546e740c112cd1e695b7792 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -10,12 +10,12 @@ const router = createRouter({ component: HomePage }, { - path: '/sheet/:sheetUuid', - name: 'about', + path: '/:sheetUuid', + name: 'sheet', // route level code-splitting // this generates a separate chunk (About.[hash].js) for this route // which is lazy-loaded when the route is visited. - component: () => import('../pages/SheetPage.vue') + component: () => import('../pages/[uuid]/SheetPage.vue') } ] }); diff --git a/src/stores/interface.ts b/src/stores/interface.ts new file mode 100644 index 0000000000000000000000000000000000000000..b59fc34aba7a900f597d1e11723a2f6ba6189c3c --- /dev/null +++ b/src/stores/interface.ts @@ -0,0 +1,17 @@ +import { defineStore } from 'pinia'; + +export const useInterfaceStore = defineStore('interfaceStore', () => { + const homeBackgroundUrl = ref( + 'https://wallpapers.com/images/featured/minimalist-7xpryajznty61ra3.jpg' + ); + onMounted(() => { + homeBackgroundUrl.value = + localStorage.getItem('homeBackgroundUrl') || + 'https://wallpapers.com/images/featured/minimalist-7xpryajznty61ra3.jpg'; + }); + function changeHomeBackgroundUrl(newUrl: string) { + homeBackgroundUrl.value = newUrl; + } + + return { homeBackgroundUrl, changeHomeBackgroundUrl }; +});