diff --git a/src/App.vue b/src/App.vue
index 55bb82c9ac7f56b397714e4c36c79718e5fede89..87236c353a7556c8295152ad9d2c2353faf8fa78 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,7 @@ import { RouterLink, RouterView } from 'vue-router'
<RouterLink to="/sparemaal">Sparemål</RouterLink>
<RouterLink to="/spareutfordringer">Spareutfordringer</RouterLink>
<RouterLink to="/profil">Profil</RouterLink>
+ <RouterLink to="/konfigurasjonSteg1">Konfigurasjon</RouterLink>
</nav>
<main>
diff --git a/src/assets/base.css b/src/assets/base.css
index da22042ddd2a38d0e7a76daebdd628ff252a5388..97ddcffedbe66a706b0c51ac50bd51809447e682 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -3,6 +3,7 @@
:root {
--black: #363739;
--white: #ffffff;
+ --green: #95e35d;
--bright: #f7da7c;
diff --git a/src/assets/head.png b/src/assets/head.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e6edb76b40cb4f25b9fa7eef99734d0d7bb90d3
Binary files /dev/null and b/src/assets/head.png differ
diff --git a/src/assets/litt.png b/src/assets/litt.png
new file mode 100644
index 0000000000000000000000000000000000000000..6add972367e016606dbea3a785abd0cc8b398134
Binary files /dev/null and b/src/assets/litt.png differ
diff --git a/src/assets/nose.png b/src/assets/nose.png
new file mode 100644
index 0000000000000000000000000000000000000000..2845ed5555b18c3c03e97d1c193dad506bc63852
Binary files /dev/null and b/src/assets/nose.png differ
diff --git a/src/assets/passe.png b/src/assets/passe.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ce43e9f28288fe4b8d8a2c9372d9cf8e8269fb7
Binary files /dev/null and b/src/assets/passe.png differ
diff --git a/src/assets/pig.png b/src/assets/pig.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a10f0f9dabc23d2d2db0654c465448024bd9a66
Binary files /dev/null and b/src/assets/pig.png differ
diff --git a/src/assets/store.png b/src/assets/store.png
new file mode 100644
index 0000000000000000000000000000000000000000..54bfd38639ed5e7b57f220bf7330750b08e74544
Binary files /dev/null and b/src/assets/store.png differ
diff --git a/src/components/ContinueButtonComponent.vue b/src/components/ContinueButtonComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6b42981605e2a775d79af5c241188a6a8b11b2b7
--- /dev/null
+++ b/src/components/ContinueButtonComponent.vue
@@ -0,0 +1,30 @@
+<template>
+ <button class="continue-button" @click="onClick">Fortsett</button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+ name: 'ContinueButtonComponent',
+ emits: {
+ click: (event: Event) => true
+ },
+ setup(props, { emit }) {
+ const onClick = (event: Event) => {
+ emit('click', event)
+ }
+
+ return {
+ onClick
+ }
+ }
+})
+</script>
+
+<style>
+.continue-button {
+ @apply p-3 px-20 text-lg rounded-lg cursor-pointer transition-all font-bold
+ text-black bg-[var(--green)] hover:brightness-90 active:brightness-75;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 752bb2814616045a6b2b7f9dc19c280b7c08e3ec..cd6c196327186ffb6a352f60494349d2fb4f39b9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -33,6 +33,26 @@ const router = createRouter({
path: '/:pathMatch(.*)*',
name: 'not-found',
component: () => import('../views/NotFoundView.vue')
+ },
+ {
+ path: '/konfigurasjonSteg1',
+ name: 'configurations1',
+ component: () => import('../views/ConfigHabitChangeView.vue')
+ },
+ {
+ path: '/konfigurasjonSteg2',
+ name: 'configurations2',
+ component: () => import('../views/ConfigFamiliarWithSavingsView.vue')
+ },
+ {
+ path: '/konfigurasjonSteg3',
+ name: 'configurations3',
+ component: () => import('../views/ConfigSpendingItemsView.vue')
+ },
+ {
+ path: '/konfigurasjonSteg4',
+ name: 'configurations4',
+ component: () => import('../views/ConfigSpendingItemsAmountView.vue')
}
]
})
diff --git a/src/views/ConfigFamiliarWithSavingsView.vue b/src/views/ConfigFamiliarWithSavingsView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..76d60f4a520fa4a1c14af9f4a3710f0a4067a9eb
--- /dev/null
+++ b/src/views/ConfigFamiliarWithSavingsView.vue
@@ -0,0 +1,60 @@
+<template>
+ <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
+ <h1 class="mb-16 text-4xl font-bold lg:mb-20">Hvor kjent er du med sparing fra før?</h1>
+ <div class="grid grid-cols-1 gap-14 mb-20 md:grid-cols-3">
+ <div
+ :class="{
+ 'border-[var(--green)] border-4': selectedOption === 'litt',
+ 'border-gray-300 border-2': selectedOption !== 'litt'
+ }"
+ class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]-500"
+ @click="selectOption('litt')"
+ >
+ <img src="@/assets/nose.png" alt="Litt kjent" class="h-16 md:h-20" />
+ <p class="mt-2 text-lg font-bold">Litt kjent</p>
+ </div>
+ <div
+ :class="{
+ 'border-[var(--green)] border-4': selectedOption === 'noe',
+ 'border-gray-300 border-2': selectedOption !== 'noe'
+ }"
+ class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+ @click="selectOption('noe')"
+ >
+ <img src="@/assets/head.png" alt="Noe kjent" class="h-16 md:h-20" />
+ <p class="mt-2 text-lg font-bold">Noe kjent</p>
+ </div>
+ <div
+ :class="{
+ 'border-[var(--green)] border-4': selectedOption === 'godt',
+ 'border-gray-300 border-2': selectedOption !== 'godt'
+ }"
+ class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+ @click="selectOption('godt')"
+ >
+ <img src="@/assets/pig.png" alt="Godt kjent" class="h-16 md:h-20" />
+ <p class="mt-2 text-lg font-bold">Godt kjent</p>
+ </div>
+ </div>
+ <ContinueButtonComponent
+ @click="onButtonClick"
+ class="px-10 py-3 text-2xl font-bold self-end"
+ ></ContinueButtonComponent>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+import router from '@/router'
+
+const selectedOption = ref<string | null>(null)
+
+const selectOption = (option: string) => {
+ selectedOption.value = option
+}
+
+const onButtonClick = () => {
+ router.push('/konfigurasjonSteg3')
+}
+</script>
diff --git a/src/views/ConfigHabitChangeView.vue b/src/views/ConfigHabitChangeView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..55080b49f42201a755844efdc213a5ef7c7e0c23
--- /dev/null
+++ b/src/views/ConfigHabitChangeView.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+import router from '@/router'
+
+const selectedOption = ref<string | null>(null)
+
+const selectOption = (option: string) => {
+ selectedOption.value = option
+}
+
+const onButtonClick = () => {
+ router.push('/konfigurasjonSteg2')
+}
+</script>
+
+<template>
+ <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
+ <h1 class="mb-16 text-4xl font-bold lg:mb-20">
+ Hvor store vaneedringer er du villig til å gjøre?
+ </h1>
+ <div class="grid grid-cols-1 gap-14 mb-20 md:grid-cols-3">
+ <div
+ :class="{
+ 'border-[var(--green)] border-4': selectedOption === 'litt',
+ 'border-gray-300 border-2': selectedOption !== 'litt'
+ }"
+ class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+ @click="selectOption('litt')"
+ >
+ <img src="@/assets/litt.png" alt="litt" class="object-contain h-1/3" />
+ <p class="text-lg font-bold mt-2">Litt</p>
+ </div>
+ <div
+ :class="{
+ 'border-[var(--green)] border-4': selectedOption === 'passe',
+ 'border-gray-300 border-2': selectedOption !== 'passe'
+ }"
+ class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+ @click="selectOption('passe')"
+ >
+ <img src="@/assets/passe.png" alt="passe" class="object-contain h-1/3" />
+ <p class="text-lg font-bold mt-2">Passe</p>
+ </div>
+ <div
+ :class="{
+ 'border-[var(--green)] border-4': selectedOption === 'store',
+ 'border-gray-300 border-2': selectedOption !== 'store'
+ }"
+ class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+ @click="selectOption('store')"
+ >
+ <img src="@/assets/store.png" alt="store" class="object-contain h-1/3" />
+ <p class="text-lg font-bold mt-2">Store</p>
+ </div>
+ </div>
+ <ContinueButtonComponent
+ @click="onButtonClick"
+ class="px-10 py-3 text-2xl font-bold self-end"
+ ></ContinueButtonComponent>
+ </div>
+</template>
diff --git a/src/views/ConfigSpendingItemsAmountView.vue b/src/views/ConfigSpendingItemsAmountView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0f7dc530c8bf2987f1b79c0395a13e726f28c6a
--- /dev/null
+++ b/src/views/ConfigSpendingItemsAmountView.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+
+interface Option {
+ name: string
+ amount: number | null
+}
+
+const options = ref<Option[]>([
+ { name: 'Snus', amount: null },
+ { name: 'Kaffe', amount: null },
+ { name: 'Kantina', amount: null }
+])
+
+const onButtonClick = () => {}
+</script>
+
+<template>
+ <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
+ <h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye penger per kjøp bruker du på ...</h1>
+ <div class="flex flex-col gap-2 mb-6">
+ <div
+ v-for="(option, index) in options"
+ :key="index"
+ :class="{
+ 'border-[var(--green)] border-4': option.amount !== null && option.amount >= 0,
+ 'border-gray-300 border-2': !(option.amount !== null && option.amount >= 0)
+ }"
+ class="flex justify-between items-center w-72 p-2 cursor-pointer transition-colors bg-white rounded-lg my-4"
+ >
+ <p class="text-xl font-bold">{{ option.name }}</p>
+ <div class="flex items-center">
+ <input
+ type="number"
+ v-model="option.amount"
+ class="w-20 h-10 p-1 rounded-md text-right text-lg"
+ placeholder="Beløp"
+ min="0"
+ />
+ <p class="ml-2 font-bold">kr</p>
+ </div>
+ </div>
+ </div>
+ <ContinueButtonComponent
+ @click="onButtonClick"
+ class="px-10 py-3 text-2xl self-end mt-12 mb-0"
+ ></ContinueButtonComponent>
+ </div>
+</template>
diff --git a/src/views/ConfigSpendingItemsView.vue b/src/views/ConfigSpendingItemsView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b8b0c60381abbf0f1dca5d7c3d1a49d3ed6d7e6
--- /dev/null
+++ b/src/views/ConfigSpendingItemsView.vue
@@ -0,0 +1,54 @@
+<template>
+ <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
+ <h1 class="mb-16 text-4xl font-bold lg:mb-20">Hva bruker du mye penger på?</h1>
+ <div class="flex flex-col gap-8 mb-6">
+ <div
+ v-for="(option, index) in options"
+ :key="index"
+ class="flex flex-col items-center justify-center w-72 h-18 p-2.5 cursor-pointer transition-colors bg-white rounded-lg"
+ :class="{
+ 'border-[var(--green)] border-4': option.selected,
+ 'border-gray-300 border-2': !option.selected
+ }"
+ @click="toggleOption(index)"
+ >
+ <p class="text-lg font-bold mt-2">{{ option.name }}</p>
+ </div>
+ </div>
+ <ContinueButtonComponent
+ @click="onButtonClick"
+ class="px-10 py-3 text-2xl self-end mt-16 mb-0"
+ ></ContinueButtonComponent>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+import router from '@/router'
+
+interface Option {
+ name: string
+ selected: boolean
+}
+
+const options = ref<Option[]>([
+ { name: 'Snus', selected: false },
+ { name: 'Kaffe', selected: false },
+ { name: 'Kantina', selected: false }
+])
+
+const toggleOption = (index: number) => {
+ options.value[index].selected = !options.value[index].selected
+}
+
+const onButtonClick = () => {
+ const selectedOptions = options.value.filter((option) => option.selected)
+ if (selectedOptions.length <= 3) {
+ const selectedOptionNames = selectedOptions.map((option) => option.name)
+ router.push('/konfigurasjonSteg4')
+ } else {
+ console.error('Please select between 1 and 3 options.')
+ }
+}
+</script>