diff --git a/README.md b/README.md index 25b5821..7064491 100755 --- a/README.md +++ b/README.md @@ -1,75 +1 @@ -# Nuxt Minimal Starter - -Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. - -## Setup - -Make sure to install dependencies: - -```bash -# npm -npm install - -# pnpm -pnpm install - -# yarn -yarn install - -# bun -bun install -``` - -## Development Server - -Start the development server on `http://localhost:3000`: - -```bash -# npm -npm run dev - -# pnpm -pnpm dev - -# yarn -yarn dev - -# bun -bun run dev -``` - -## Production - -Build the application for production: - -```bash -# npm -npm run build - -# pnpm -pnpm build - -# yarn -yarn build - -# bun -bun run build -``` - -Locally preview production build: - -```bash -# npm -npm run preview - -# pnpm -pnpm preview - -# yarn -yarn preview - -# bun -bun run preview -``` - -Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. +# TBD diff --git a/app/assets/styles/button.css b/app/assets/styles/button.css index ebc7ca1..3a78022 100755 --- a/app/assets/styles/button.css +++ b/app/assets/styles/button.css @@ -1,7 +1,7 @@ .Button { --padding: .2rem; - --background: var(--color-main); - --color: var(--color-white); + --background: var(--color-gradient-main-dark); + --color: var(--color-lightest); --background-hover: var(--color-main-dark); position: relative; @@ -13,9 +13,58 @@ transition: var(--transition-default); outline: none; border: none; - background: transparent; + background: var(--background); color: var(--color); + &.transparent { + --background: transparent; + box-shadow: none; + padding: .5em 1.5em; + border-radius: var(--radius-default); + } + + &.raised { + box-shadow: var(--box-shadow-z2); + padding: .5em 1.5em; + border-radius: var(--radius-default); + + &.danger { + --background: var(--color-gradient-error); + --color: var(--color-lightest); + } + } + + &.text { + --background: transparent; + --color: var(--color-darkest); + padding: .5em 1.5em; + border-radius: var(--radius-default); + + &:hover { + --background: rgba(0, 0, 0, 0.05); + } + + &.white { + --color: var(--color-lightest); + } + + &.danger { + --color: var(--color-error); + + &:hover { + --background: rgba(255, 0, 0, 0.1); + } + } + } + + &.round { + display: flex; + justify-content: center; + align-items: center; + border-radius: 100%; + padding: .5rem; + } + &.cta { background: var(--background); color: var(--color); @@ -29,9 +78,9 @@ } &.cta.white { - --background: var(--color-white); + --background: var(--color-lightest); --color: var(--color-main); - --background-hover: var(--color-grey); + --background-hover: var(--color-light); } &.icon-button { diff --git a/app/assets/styles/buttonGroup.css b/app/assets/styles/buttonGroup.css index 9c47667..91eb4bc 100644 --- a/app/assets/styles/buttonGroup.css +++ b/app/assets/styles/buttonGroup.css @@ -1,9 +1,13 @@ .ButtonGroup { display: flex; + background: var(--color-main); + border-radius: var(--radius-default); + overflow: hidden; + box-shadow: var(--box-shadow-z2); & button { - --color: var(--color-white-transparent); - --background: var(--color-main); + --color: var(--color-light); + --background: var(--color-main-darkest); all: unset; display: flex; align-items: center; @@ -17,7 +21,7 @@ transition: var(--transition-default); &.active { - --color: var(--color-white); + --color: var(--color-lightest); --background: var(--color-main-dark); } diff --git a/app/assets/styles/footer.css b/app/assets/styles/footer.css index 23c47e5..b23b844 100644 --- a/app/assets/styles/footer.css +++ b/app/assets/styles/footer.css @@ -1,9 +1,11 @@ .Footer { - background: var(--color-main-dark); + position: relative; + background: var(--color-darkest); padding: 1rem; + z-index: 100; & h4 { - color: var(--color-white); + color: var(--color-lightest); text-align: center; margin-bottom: 1rem; } @@ -12,7 +14,7 @@ display: flex; gap: 1rem; justify-content: space-between; - color: var(--color-white-transparent); + color: var(--color-light); } & .socials { @@ -33,7 +35,7 @@ gap: 1rem; & a { - color: var(--color-white); + color: var(--color-lightest); text-decoration: none; } } diff --git a/app/assets/styles/formInput.css b/app/assets/styles/formInput.css index 44d228d..3d9c8a0 100755 --- a/app/assets/styles/formInput.css +++ b/app/assets/styles/formInput.css @@ -1,44 +1,52 @@ .Input { - position: relative; - flex: 25% 1 0; - border: 2px solid var(--color-blue); - border-radius: var(--radius-default); - overflow: hidden; - transition: var(--transition-default); - outline: 0 solid var(--color-white); + &.error { + & .input-wrapper { + border-color: var(--color-error); + outline-width: 2px; + } - & label { - position: absolute; - left: .5rem; - font-size: 1.5em; - top: .7rem; - transition: var(--transition-default); - } - - & input { - all: unset; - width: calc(100% - 1rem); - font-size: 1.2em; - padding: 1.3rem .5rem .5rem .5rem; - background: var(--color-white); - - &[type="number"] { - text-align: right; + & span { + color: var(--color-error); } } - &:has(input:invalid) { - border-color: var(--color-red); - outline-width: 2px; + & span { + font-size: .65em; } - & input:focus, - & input:not(:placeholder-shown) { - & + label { - color: var(--color-main); - font-size: 1em; + & .input-wrapper { + position: relative; + flex: 25% 1 0; + border: 2px solid var(--color-main-dark); + border-radius: var(--radius-default); + overflow: hidden; + transition: var(--transition-default); + outline: 0 solid var(--color-lightest); + + & label { + position: absolute; + font-size: .8em; top: .3rem; - right: .5rem; + left: .5rem; + transition: var(--transition-default); + } + + & input { + all: unset; + width: calc(100% - 1rem); + padding: 1.3rem .5rem .5rem .5rem; + background: var(--color-lightest); + + &[type="number"] { + text-align: right; + } + } + + & input:focus, + & input:not(:placeholder-shown) { + & + label { + color: var(--color-main-dark); + } } } } \ No newline at end of file diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css index 594a8d1..9a68aee 100755 --- a/app/assets/styles/general.css +++ b/app/assets/styles/general.css @@ -1,27 +1,50 @@ :root { --padding-default: 1rem; - --radius-default: 5px; + --padding-small: .5rem; + --radius-default: 3px; --transition-default: 150ms; - --color-white: white; - --color-white-transparent: rgba(255, 255, 255, 0.67); - --color-red: #cc0001; - --color-blue-light: #61a7fd; - --color-blue: #2e86de; - --color-blue-dark: #1b4b7f; - --color-grey: #c7c7c7; + --color-success: #328104; + --color-error: #A20606; + --color-blue-light: #0DDCE7; + --color-blue: #05B0FF; + --color-blue-dark: #0266F2; + --color-blue-darkest: #013174; + + --color-darkest: #292929; + --color-dark: #404040; + --color-middle: #707070; + --color-light: #E0E0E6; + --color-lightest: #FAFAFF; + + --color-green-light: #05FFC5; + --color-green: #02F276; + --color-green-dark: #09DC33; + --color-green-darkest: #07B029; + --color-green-darkest-most: #157C2A; - --color-orange: #DE9C2F; --color-main: var(--color-blue); --color-main-light: var(--color-blue-light); --color-main-dark: var(--color-blue-dark); + --color-main-darkest: var(--color-blue-darkest); - --color-accent: var(--color-orange); + --color-accent: var(--color-green); + --color-accent-light: var(--color-green-light); + --color-accent-dark: var(--color-green-dark); + --color-accent-darkest: var(--color-green-darkest); + + --color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light)); + --color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark)); + --color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light)); + --color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark)); + --color-gradient-error: linear-gradient(to bottom right, #B00707, #DC0909); + --color-gradient-error-reverse: linear-gradient(to top left, #B00707, #DC0909); --box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23); --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); --box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23); + } * { @@ -35,6 +58,7 @@ body { height: 100%; overflow-x: hidden; font-family: sans-serif; + color: var(--color-darkest); } .dot { @@ -77,7 +101,6 @@ body { .card { overflow: hidden; border-radius: var(--radius-default); - border: 1px solid var(--color-main); box-shadow: var(--box-shadow-z2); } @@ -106,7 +129,7 @@ body { } .text-white { - color: var(--color-white); + color: var(--color-lightest); } .bg-main { @@ -123,4 +146,50 @@ body { .bg-main-dark-hover:hover { background-color: var(--color-main-dark); +} + +.gap-default { + gap: 1rem; +} + +.bg-blue { + background: var(--color-blue); +} + +.bg-white { + background: var(--color-lightest); +} + +.padding { + gap: 1rem; + padding: var(--padding-default); +} + +.padding-small { + gap: 1rem; + padding: var(--padding-small); +} + +dialog { + top: 50%; + left: 50%; + width: 100vw; + transform: translate(-50%, -50%); + border: none; + border-radius: var(--radius-default); + + font-size: 1rem; + + & header { + justify-content: space-between; + align-items: center; + } + + & footer { + justify-content: space-between; + } + + &::backdrop { + background: rgba(0, 0, 0, 0.5); + } } \ No newline at end of file diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css index f89db28..568236a 100755 --- a/app/assets/styles/header.css +++ b/app/assets/styles/header.css @@ -3,16 +3,19 @@ align-items: center; justify-content: space-between; padding: var(--padding-default); - background-color: var(--color-white); + background-color: rgba(255 255 255 / .8); + backdrop-filter: blur(10px); box-shadow: var(--box-shadow-z2); + color: var(--color-darkest); position: sticky; top: 0; - z-index: 1; + z-index: 100; & strong { font-size: 2em; + & span { - color: var(--color-main); + color: var(--color-main-dark); } } @@ -38,7 +41,7 @@ top: 0; height: 100dvh; transition: 150ms ease-in-out; - background: var(--color-white); + background: var(--color-lightest); font-size: 2em; align-items: end; z-index: 100; @@ -49,6 +52,17 @@ align-items: center; & li { list-style: none; + + & a { + color: var(--color-black); + text-decoration: none; + transition: var(--transition-default); + + &.active { + color: var(--color-main); + font-weight: bold; + } + } } } } \ No newline at end of file diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index 47acd68..b8702ea 100755 --- a/app/assets/styles/priceCard.css +++ b/app/assets/styles/priceCard.css @@ -1,93 +1,117 @@ .PriceCard { + position: relative; + overflow: hidden; width: 100%; - display: grid; transition: 150ms; - grid-template-rows: auto 1fr auto; - max-height: 400px; opacity: 1; + color: var(--color-darkest); + background: black; - &.deleting { - max-height: 0; - opacity: 0; - } - - &.folded { - grid-template-rows: auto 0fr auto; - } - - & > header { - color: var(--color-white); + .bottom { + position: absolute; + z-index: 1; display: flex; - justify-content: space-between; - align-items: center; - font-size: 1.3em; - - & > .Button { - color: var(--color-white); - border: 2px solid var(--color-white); - } - } - - & aside { - overflow: hidden; - } - - & footer { - display: flex; - justify-content: space-between; - align-items: center; - - & > .Button.delete { - scale: 0; - } - - & > .Button.deletable { - scale: 1; - } - } - - & .padding { - gap: 1rem; - padding: var(--padding-default); - } - - & .bg-blue { - background: var(--color-blue); - } - - & .bg-white { - background: var(--color-white); - } - - & .wrapper { - display: flex; - flex-direction: row; + align-items: stretch; width: 100%; - gap: 1rem; - justify-content: space-between; + height: 100%; & > * { - flex-basis: 25%; flex-grow: 1; - } - - & > .info { + color: var(--color-lightest); + font-size: 2rem; + display: flex; align-items: center; - & > .icon { - color: var(--color-blue-light); - font-size: 2rem; - padding: .2rem; + & .icon { + filter: drop-shadow(1px 3px 1px rgb(0 0 0 / 0.4)); } + } - & > .price { - font-size: 1.2rem; + & .bg-edit { + background: var(--color-gradient-main-dark); + padding: 2rem; + text-align: left; + } + + & .bg-delete { + background: var(--color-gradient-error-reverse); + padding: 2rem; + text-align: right; + justify-content: flex-end; + } + } + + .top { + position: relative; + background: var(--color-lightest); + z-index: 2; + gap: 1rem; + padding: 1rem; + border-radius: var(--radius-default); + + &.animated { + transition: var(--transition-default); + } + + & > header { + display: flex; + justify-content: space-between; + align-items: center; + color: var(--color-darkest); + + & .icon { + font-size: 1rem; + cursor: pointer; } + } - & > .pro { - font-size: .8rem; + & .name-price { + display: flex; + gap: .5rem; + + & > span:nth-child(1) { font-weight: bold; - color: var(--color-main-light); + max-width: 210px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + & > span:nth-child(2)::before { + content: '•'; + margin-right: .5rem; + color: var(--color-middle); + } + } + + & .wrapper { + display: flex; + flex-direction: row; + width: 100%; + gap: 1rem; + justify-content: space-between; + + & > .info { + flex-grow: 0; + align-items: center; + gap: .25rem; + font-weight: bold; + + & > .price { + display: flex; + align-items: center; + gap: .5rem; + + & > .icon { + color: var(--color-main-dark); + } + } + + & > .pro { + font-size: .6rem; + color: var(--color-middle); + font-weight: lighter; + } } } } diff --git a/app/assets/styles/toolbar.css b/app/assets/styles/toolbar.css index 44f305f..a634889 100755 --- a/app/assets/styles/toolbar.css +++ b/app/assets/styles/toolbar.css @@ -1,9 +1,10 @@ .Toolbar { display: flex; justify-content: space-evenly; - background: var(--color-main); + background: var(--color-main-darkest); position: sticky; bottom: 0; + z-index: 100; box-shadow: var(--box-shadow-upper); & > .Button { diff --git a/app/components/Pp/ButtonGroup.vue b/app/components/Pp/ButtonGroup.vue index 322b6f7..71b90d4 100644 --- a/app/components/Pp/ButtonGroup.vue +++ b/app/components/Pp/ButtonGroup.vue @@ -1,5 +1,5 @@ + + \ No newline at end of file diff --git a/app/components/Pp/FormInput.vue b/app/components/Pp/FormInput.vue index 66c8a94..cd1ec71 100755 --- a/app/components/Pp/FormInput.vue +++ b/app/components/Pp/FormInput.vue @@ -1,17 +1,20 @@ @@ -22,9 +25,9 @@ type Props = { min ?: number step ?: number required ?: boolean + message ?: string label : string id : string - uid : string } const { @@ -32,15 +35,9 @@ const { required = false, step = 0.01, min = 1, - max, - label, - id, - uid, } = defineProps() const emit = defineEmits(['blur']) const text = defineModel() - -const makeId = () => `${id}_${uid}` diff --git a/app/components/Pp/Header.vue b/app/components/Pp/Header.vue index acaabf8..6398aac 100755 --- a/app/components/Pp/Header.vue +++ b/app/components/Pp/Header.vue @@ -1,22 +1,56 @@ \ No newline at end of file +type NavPoint = { + label: string + to: string +} + +const navPoints = useState('nav', () => ([ + { + label: 'Home', + to: '/', + }, + { + label: 'Übersicht', + to: '/overview', + }, +])) + +const cb = useTemplateRef('checkbox') +const closeNav = () => { cb.value!.checked = false } + + + + \ No newline at end of file diff --git a/app/components/Pp/PriceCard.vue b/app/components/Pp/PriceCard.vue index 0b495bb..c4236e6 100755 --- a/app/components/Pp/PriceCard.vue +++ b/app/components/Pp/PriceCard.vue @@ -1,64 +1,59 @@ diff --git a/app/components/Pp/PriceCardDialog.vue b/app/components/Pp/PriceCardDialog.vue new file mode 100644 index 0000000..00dd42f --- /dev/null +++ b/app/components/Pp/PriceCardDialog.vue @@ -0,0 +1,129 @@ + + + \ No newline at end of file diff --git a/app/pages/imprint.vue b/app/pages/imprint.vue new file mode 100644 index 0000000..a2b2e54 --- /dev/null +++ b/app/pages/imprint.vue @@ -0,0 +1,72 @@ + + diff --git a/app/pages/index.vue b/app/pages/index.vue index cc1abb7..5e39a87 100755 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -1,4 +1,15 @@