diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 4450c01a894a1f0f4f582edb67019753499d9332..c6a49b66d582222647faf3ed7a66cae71769b893 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,20 +1,28 @@
+image: node:alpine # Much smaller than other variants, faster and more resource effective
+
stages:
- - install
- - build
+ - install_dependencies
+ - lint
+ - build_project
cache:
+ key: "${CI_COMMIT_REF_SLUG}" # Branch-specific cache keys to have separate caches across branches.
paths:
- node_modules/
- key: "$CI_BUILD_REF_NAME" # Separate cache for each branch
install_dependencies:
- stage: install
- image: node:latest
+ stage: install_dependencies
script:
- npm install
+lint:
+ stage: lint
+ script:
+ - npm run lint
+ allow_failure: true
+
build_project:
- stage: build
- image: node:latest
+ stage: build_project
script:
- - npm run build
\ No newline at end of file
+ - npm run build
+
diff --git a/src/assets/items/david.jpg b/src/assets/items/david.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8c1ac13073b50a49950aedf26a40b234fe7187a0
Binary files /dev/null and b/src/assets/items/david.jpg differ
diff --git a/src/assets/items/galaxy.jpg b/src/assets/items/galaxy.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..4b27cc7551cd7dc918098bd6b323b6734604da85
Binary files /dev/null and b/src/assets/items/galaxy.jpg differ
diff --git a/src/assets/items/goofy.jpg b/src/assets/items/goofy.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..270d8c456cbdde85cb3f721adeb43f7118e2fd95
Binary files /dev/null and b/src/assets/items/goofy.jpg differ
diff --git a/src/assets/items/panda.webp b/src/assets/items/panda.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d4e6d6e132d7a139b8f3babdee6ad6adef80b06d
Binary files /dev/null and b/src/assets/items/panda.webp differ
diff --git a/src/assets/items/sus.jpg b/src/assets/items/sus.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ae3f79f0045917f508d5e708b647f7a414dac561
Binary files /dev/null and b/src/assets/items/sus.jpg differ
diff --git a/src/assets/items/v-buck.png b/src/assets/items/v-buck.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb2c4ae630ea455e059a6e420df50eb9927f3f30
Binary files /dev/null and b/src/assets/items/v-buck.png differ
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index 038fc7c0f2871f0b2bdaa3de736c9a54a1d2009e..1edc325513c43ee7c2373874f229f42bfd07033c 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -59,11 +59,11 @@ function toHome() {
}
function toSavingGoals() {
- router.push('/news')
+ router.push('/roadmap')
}
function toLeaderboard() {
- router.push('/news')
+ router.push('/leaderboard')
}
function toNews() {
@@ -71,7 +71,7 @@ function toNews() {
}
function toStore() {
- router.push('/news')
+ router.push('/shop')
}
function toSetting() {
@@ -79,7 +79,7 @@ function toSetting() {
}
function toFeedback() {
- router.push('/news')
+ router.push('/feedback')
}
diff --git a/src/components/Buttons/ShopButton.vue b/src/components/Buttons/ShopButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e28fcdb6e68eb87602d970bd0d612a46270668d
--- /dev/null
+++ b/src/components/Buttons/ShopButton.vue
@@ -0,0 +1,15 @@
+<template>
+ <button type="button" class="btn btn-primary" id="buttonStyle"><img src="@/assets/items/v-buck.png" style="width: 2rem"> +{{ buttonText }}</button>
+</template>
+
+<script>
+export default {
+ props: ['buttonText']
+}
+</script>
+
+<style scoped>
+ #buttonStyle {
+ border-radius: 3rem;
+ }
+</style>
\ No newline at end of file
diff --git a/src/components/LeaderboardComponents/Leaderboard.vue b/src/components/LeaderboardComponents/Leaderboard.vue
index 48317805da23489922b3e7bd0cffbbca7fe30da7..73cc5da9cf9df92b12522a9577cf0e9a2c0faff9 100644
--- a/src/components/LeaderboardComponents/Leaderboard.vue
+++ b/src/components/LeaderboardComponents/Leaderboard.vue
@@ -131,7 +131,7 @@
top: -0.5rem;
background-color: #0A58CA;
position: absolute;
- left: -1rem;
+ /**left: -1rem;*/
box-shadow: 0px 15px 11px -6px #7a7a7d;
}
diff --git a/src/components/NewsComponents/NewsComponent.vue b/src/components/NewsComponents/NewsComponent.vue
index 4fe743f4a3af6146dfb226d11e5ac842e27d0677..351bcebaf8e755dea418f44b069910264f75bc8d 100644
--- a/src/components/NewsComponents/NewsComponent.vue
+++ b/src/components/NewsComponents/NewsComponent.vue
@@ -1,8 +1,14 @@
<script lang="ts">
+interface news {
+ urlToImage: string;
+ title: string;
+ description: string;
+ url: string;
+}
export default {
data() {
return {
- articles: []
+ articles: [] as news[]
};
},
mounted() {
diff --git a/src/components/SavingGoalComponents/SavingGoal.vue b/src/components/SavingGoalComponents/SavingGoal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..87055bfd4ddaa57c1cc0559488a5c6922221da08
--- /dev/null
+++ b/src/components/SavingGoalComponents/SavingGoal.vue
@@ -0,0 +1,71 @@
+<script lang="ts">
+import SavingGoalList from "@/components/SavingGoalComponents/SavingGoalList.vue";
+import SavingGoalRoadmap from "@/components/SavingGoalComponents/SavingGoalRoadmap.vue";
+import SavingGoalCreate from "@/components/SavingGoalComponents/SavingGoalCreate.vue";
+export default {
+ components: {SavingGoalCreate, SavingGoalRoadmap, SavingGoalList},
+ data() {
+ return {
+ bluePanelMaxHeight: 'auto' as string,
+ createClicked: false as boolean,
+ };
+ },
+ mounted() {
+ this.calculateBluePanelMaxHeight();
+ },
+ methods: {
+ calculateBluePanelMaxHeight() {
+ // Query the timeline element
+ const timelineElement = document.querySelector('.timeline');
+ if (timelineElement instanceof HTMLElement) {
+ // Calculate the max-height based on the height of the timeline
+ const timelineHeight = timelineElement.offsetHeight;
+ this.bluePanelMaxHeight = `${timelineHeight*1.25}px`;
+ } else {
+ this.bluePanelMaxHeight = '700px';
+ }
+ },
+ createGoal() {
+ this.createClicked = true;
+ },
+ goToSavingGoal() {
+ this.createClicked = false;
+ },
+ },
+};
+</script>
+
+<template>
+ <div class="container">
+ <div class="row">
+ <div class="col-lg-4 blue-background overflow-auto" :style="{ 'max-height': bluePanelMaxHeight }">
+ <h3 style="color: white; margin-bottom: 16px">Your saving goals</h3>
+ <div>
+ <button class="btn btn-light" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
+ </div>
+ <saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list>
+ </div>
+ <div class="spacer"/>
+ <saving-goal-create v-if="createClicked"></saving-goal-create>
+ <saving-goal-roadmap v-else></saving-goal-roadmap>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.container {
+ margin: 0;
+ width: 100%;
+ box-sizing: unset;
+}
+
+.blue-background {
+ background-color: #0A58CA;
+ width: 27%;
+}
+
+.spacer {
+ width: 10%;
+ background-color: transparent;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SavingGoalComponents/SavingGoalCreate.vue b/src/components/SavingGoalComponents/SavingGoalCreate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b23db87fafb28b31bf230da08b90f3bb56da23e6
--- /dev/null
+++ b/src/components/SavingGoalComponents/SavingGoalCreate.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+ <div class="col-lg-8">
+ <h1>Create a new saving goal!</h1>
+ <br>
+ <p>Create a name for this saving goal: </p>
+ <div class="input-group mb-3">
+ <span class="input-group-text" id="basic-addon1">Name:</span>
+ <input type="text" class="form-control" placeholder="Name of Saving Goal" aria-label="Username" aria-describedby="basic-addon1">
+ </div>
+
+ <p>Add a description to this saving goal: </p>
+ <div class="input-group mb-3">
+ <span class="input-group-text" id="basic-addon2">Description:</span>
+ <textarea class="form-control" aria-label="With textarea"></textarea>
+ </div>
+
+ <!--Change this to date picker?-->
+ <p>How long should this saving goal last: </p>
+ <div class="input-group mb-3">
+ <input type="text" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
+ <span class="input-group-text">Days</span>
+ </div>
+
+ <p>How much do you want to save during this saving goal: </p>
+ <div class="input-group">
+ <input type="text" class="form-control" aria-label="" placeholder="NOK (as number)">
+ <span class="input-group-text">NOK</span>
+ </div>
+
+ <br>
+ <button class="btn btn-primary btn-lg">Create goal!</button>
+ </div>
+</template>
+
+<style scoped>
+.col-lg-8 {
+ width: 63%;
+ margin-top: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SavingGoalComponents/SavingGoalList.vue b/src/components/SavingGoalComponents/SavingGoalList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ecf2ae93c323b7b8aa5bf3ec4bccc4e7ec02dc1
--- /dev/null
+++ b/src/components/SavingGoalComponents/SavingGoalList.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import {ref} from "vue";
+
+const savingGoalList = ref([
+ { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr on a spain trip' },
+ { title: 'Italy Escapade', MoneyTarget: '200kr', description: 'Experience the magic of Italy with us! Our goal is to save 200kr for an amazing trip to Italy.' },
+ { title: 'French Getaway', MoneyTarget: '200kr', description: 'Join us as we plan to save 200kr for a delightful trip to France!' },
+ { title: 'Exploring Greece', MoneyTarget: '200kr', description: 'Dreaming of Greece? Lets work together to save 200kr for that unforgettable trip!' },
+ { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
+ { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
+ { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
+ { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' }
+])
+
+const emits = defineEmits(['goToSavingGoal']);
+
+const goToSavingGoal = () => {
+ emits('goToSavingGoal');
+};
+</script>
+
+<template>
+ <div v-for="(savingGoal, index) in savingGoalList" :key="index" class="card bg-primary">
+ <div class="card-header">
+ Saving goal {{ index + 1 }}
+ </div>
+ <div class="card-body">
+ <h5 class="card-title">{{ savingGoal.title }}</h5>
+ <p class="card-text">{{ savingGoal.description }}</p>
+ <a href="#" class="btn btn-light" @click="goToSavingGoal">Go to saving goal</a>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.card-header, .card-text, .card-title {
+ color: white;
+}
+
+* {
+ font-weight: 600;
+}
+
+.card {
+ margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SavingGoalComponents/SavingGoalRoadmap.vue b/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
index 89f6587d79ed679fcd92d02af1d2d3c5dc31aef9..4532527ffd38a4d8f50542bb90e6e2f4c3c05a6d 100644
--- a/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
+++ b/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
@@ -1,6 +1,5 @@
<script lang="ts">
interface Step {
- image: string;
title: string;
showPanel: boolean;
description: string;
@@ -9,69 +8,91 @@ interface Step {
export default {
data() {
return {
+ image: 'https://th.bing.com/th/id/OIG3.NMbdxmKYKVnxYGLOa0Z0?w=1024&h=1024&rs=1&pid=ImgDetMain' as string,
+ altImage: 'https://th.bing.com/th/id/OIG4.gVWUC.rwCb8faTNx31yU?w=1024&h=1024&rs=1&pid=ImgDetMain' as string,
+ title: 'Spain trip' as string,
//This will be changed to info gathered from backend
steps: [
- { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22 },
- { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73 },
- { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50 },
- { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10 },
- { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90 }
+ { title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22 },
+ { title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73 },
+ { title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50 },
+ { title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10 },
+ { title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90 }
]
+ ,
+ bluePanelMaxHeight: 'auto' as string
};
},
methods: {
togglePanel(step: Step) {
- step.showPanel = !step.showPanel;
- }
- }
+ if (step.showPanel) {
+ // If the clicked panel is already open, close it
+ step.showPanel = false;
+ } else {
+ //Close all panels before opening new one
+ //Ensure only one panel open at a time
+ this.steps.forEach((s) => (s.showPanel = false));
+ //Open clicked on panel
+ step.showPanel = true;
+ }
+ },
+ },
};
</script>
<template>
- <div class="container">
- <div class="row">
- <div class="col-lg-12">
- <ul class="timeline">
- <li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
- <div class="timeline-image" @click="togglePanel(step)">
- <img class="circular-image" :src="step.showPanel ? step.altImage : step.image" alt="">
+ <div class="col-lg-8">
+ <div class="SavingGoalTitle text-center">{{title}}</div>
+ <ul class="timeline">
+ <li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
+ <div class="timeline-image z-1" @click="togglePanel(step)">
+ <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
+ </div>
+ <div class="timeline-panel z-3" v-show="step.showPanel">
+ <div class="timeline-heading">
+ <h4>{{ step.title }}</h4>
+ <h4 class="subheading">{{step.description}}</h4>
+ </div>
+ <div class="timeline-body">
+ <br>
+ <p class="">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ </p>
+ <br>
+ <div class="progress">
+ <div class="progress-bar" role="progressbar" :style="{ width: step.percentFinished + '%' }" :aria-valuenow="step.percentFinished" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ <br>
+ <div class="form-check form-check-inline">
+ <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
+ <label class="form-check-label" style="color:white;" for="inlineCheckbox1">Day 1</label>
</div>
- <div class="timeline-panel" v-show="step.showPanel">
- <div class="timeline-heading">
- <h4>{{ step.title }}</h4>
- <h4 class="subheading">{{step.description}}</h4>
- </div>
- <div class="timeline-body">
- <br>
- <p class="">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
- <br>
- <div class="progress">
- <div class="progress-bar bg-success" role="progressbar" :style="{ width: step.percentFinished + '%' }" :aria-valuenow="step.percentFinished" aria-valuemin="0" aria-valuemax="100"></div>
- </div>
- <br>
- <div class="form-check form-check-inline">
- <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
- <label class="form-check-label" style="color:white;" for="inlineCheckbox1">Day 1</label>
- </div>
- <div class="form-check form-check-inline">
- <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
- <label class="form-check-label" style="color:white;" for="inlineCheckbox1">Day 2</label>
- </div>
- </div>
+ <div class="form-check form-check-inline">
+ <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
+ <label class="form-check-label" style="color:white;" for="inlineCheckbox1">Day 2</label>
</div>
- <div class="line" v-if="index < steps.length - 1"></div>
- </li>
- </ul>
- </div>
- </div>
+ </div>
+ </div>
+ <div class="line" v-if="index < steps.length - 1"></div>
+ </li>
+ </ul>
</div>
</template>
<style scoped>
-.container {
- margin-bottom:20px;
+.col-lg-8 {
+ width: 63%;
+ margin-bottom: 20px;
+}
+
+.SavingGoalTitle {
+ font-weight: 600;
+ font-size: 45px;
+ margin-bottom:40px;
+ padding-bottom: 10px;
+ color: white;
+ border-radius: 0 0 1em 1em;
+ background-color: #0A58CA;
}
.timeline {
@@ -84,14 +105,14 @@ export default {
.timeline>li:nth-child(even) {
position: relative;
margin-bottom: 50px;
- height: 180px;
+ height: 100px;
right:-100px;
}
.timeline>li:nth-child(odd) {
position: relative;
margin-bottom: 50px;
- height: 180px;
+ height: 100px;
left:-100px;
}
@@ -112,7 +133,7 @@ export default {
width: 41%;
padding: 0 20px 20px 30px;
text-align: right;
- background-color: #32CD32;
+ background-color: #0A58CA;
border-radius: 1em;
}
@@ -134,13 +155,13 @@ export default {
z-index: 100;
position: absolute;
left: 50%;
- border: 7px solid #006400;
+ border: 7px solid #001664;
border-radius: 100%;
- background-color: #00FF7F;
- box-shadow: 0 0 5px #00FF00;
- width: 200px;
- height: 200px;
- margin-left: -100px;
+ background-color: #00ffff;
+ box-shadow: 0 0 5px #00e1ff;
+ width: 100px;
+ height: 100px;
+ margin-left: -50px;
cursor:pointer;
}
@@ -199,36 +220,42 @@ export default {
.timeline>li:nth-child(odd) .line:before {
content: "";
position: absolute;
- top: 60px;
+ top: 30px;
bottom: 0;
- left: 730px;
- width: 45px;
- height:340px;
+ left: 700px;
+ width: 30px;
+ height:320px;
background-color: grey;
-ms-transform: rotate(-44deg); /* IE 9 */
-webkit-transform: rotate(-44deg); /* Safari */
transform: rotate(-44deg);
border: dotted white 3px;
/**box-shadow: 0 0 5px #00FF00;**/
+ display:none;
}
/*Style for odd div.line*/
.timeline>li:nth-child(even) .line:before {
content: "";
position: absolute;
- top: 60px;
+ top: 30px;
bottom: 0;
- left: 520px;
- width: 45px;
- height:340px;
+ left: 480px;
+ width: 30px;
+ height:320px;
background-color: grey;
-ms-transform: rotate(44deg); /* IE 9 */
-webkit-transform: rotate(44deg); /* Safari */
transform: rotate(44deg);
border: dotted white 3px;
/*box-shadow: 0 0 5px #00FF00;*/
+ display:none;
}
/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {
+ .col-lg-8 {
+ width: 100%;
+ }
+
.timeline > li:nth-child(even) {
margin-bottom: 0;
min-height: 0;
diff --git a/src/views/FeedbackView.vue b/src/views/FeedbackView.vue
index 37264535422ff7742a1e6e410d4e6338c0752598..6eef349d66eda4e3145a12372e9061ccf2cecedb 100644
--- a/src/views/FeedbackView.vue
+++ b/src/views/FeedbackView.vue
@@ -77,7 +77,6 @@ textarea {
transition: background-color 0.2s ease 0s;
}
-
textarea:focus {
background: none repeat scroll 0 0 #FFFFFF;
outline-width: 0;
diff --git a/src/views/LeaderboardView.vue b/src/views/LeaderboardView.vue
index 7f58d1768c051c4c1b780a40ba89e02f88e6964d..681a963a43723485f5eac19e1a7b8b3d32753140 100644
--- a/src/views/LeaderboardView.vue
+++ b/src/views/LeaderboardView.vue
@@ -1,10 +1,26 @@
<template>
+ <div id="dropdownContainer">
+ <Button class="btn btn-primary text-white leaderBoardButton">Global</Button>
+ <Button class="btn btn-primary text-white leaderBoardButton">Friends</Button>
+ </div>
<main>
<div id="leaderboard">
- <h1>Ranking</h1>
+ <h1><img src="@/assets/items/v-buck.png" style="width: 2rem"> Total points</h1>
+ <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
+ </div>
+ <div id="leaderboard">
+ <h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Current streak</h1>
+ <Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
+ </div>
+ <div id="leaderboard">
+ <h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Highest streak</h1>
<Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div>
</main>
+ <div id = "communityContainer">
+ <h1>Total points earned as a community</h1>
+ <h2>1000000 <img src="@/assets/items/v-buck.png" style="width: 2rem"></h2>
+ </div>
</template>
<script setup lang="ts">
@@ -31,18 +47,49 @@ const navigateToUserProfile = (userId: number) => {
<style scoped>
main {
+ margin-top: 2rem;
+ margin-bottom: 4rem;
width: 100%;
display: flex;
- justify-content: center;
+ justify-content: space-around;
align-items: center;
+ flex-wrap: wrap;
+ flex-direction: row;
}
#leaderboard {
- width: 60%;
+ width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
+
+h1 {
+ font-weight: 500;
+ margin-bottom: 1rem;
+}
+
+#dropdownContainer {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 2rem;
+ margin-top: 3rem;
+}
+
+#communityContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ margin-bottom: 5rem;
+}
+
+.leaderBoardButton {
+ padding: 1rem 4rem;
+ font-weight: 700;
+ border-radius: 2rem;
+ margin: 1rem;
+}
</style>
\ No newline at end of file
diff --git a/src/views/SavingGoalView/RoadmapView.vue b/src/views/SavingGoalView/RoadmapView.vue
index 17c812a5d70eebc4abe899b255f9522f4dc663f8..cdf655318efd24b40aab9b9e8fa1b82c3d30d3df 100644
--- a/src/views/SavingGoalView/RoadmapView.vue
+++ b/src/views/SavingGoalView/RoadmapView.vue
@@ -1,7 +1,7 @@
<script setup lang="ts">
-import SavingGoalRoadmap2 from "@/components/SavingGoalComponents/SavingGoalRoadmap.vue";
+import SavingGoal from "@/components/SavingGoalComponents/SavingGoal.vue";
</script>
<template>
-<saving-goal-roadmap2></saving-goal-roadmap2>
+<saving-goal></saving-goal>
</template>
\ No newline at end of file
diff --git a/src/views/ShopView.vue b/src/views/ShopView.vue
index 9095328987e0c5479f039dd59d667f0533d4cb71..55ef335f11efa0b03a899182231f1208d0f17888 100644
--- a/src/views/ShopView.vue
+++ b/src/views/ShopView.vue
@@ -1,3 +1,108 @@
<template>
- Hallo
-</template>
\ No newline at end of file
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <h1>League</h1>
+ <div class="category row justify-content-between mb-5 m-2">
+ <!--<div class="col-md-4" v-for="product in products" :key="product.id">-->
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+
+
+ <!--</div>-->
+ </div>
+ </div>
+ <div class="col-md-12">
+ <h1>Fantacy</h1>
+ <div class="category row justify-content-between mb-5 m-2">
+ <!--<div class="col-md-4" v-for="product in products" :key="product.id">-->
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+ <div class="card text-center" style="width: 16rem; border: none">
+ <img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
+ <div class="card-body">
+ <h5 class="card-title">The panda</h5>
+ <ShopButton button-text="100"></ShopButton>
+ </div>
+ </div>
+
+
+ <!--</div>-->
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import ShopButton from '@/components/Buttons/ShopButton.vue';
+</script>
+
+<style scoped>
+.card {
+ box-shadow: none;
+ margin: 10px;
+ border-radius: 8px;
+ padding-left: 5px;
+ padding-right: 5px;
+ /* Rounded corners */
+}
+
+.card:hover {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-body{
+ height: 100px;
+ padding: 5px;
+}
+
+.col-md-12 {
+ border-bottom: 2px solid #000000;
+}
+</style>
\ No newline at end of file