diff --git a/src/assets/icons/dollar.png b/src/assets/icons/dollar.png new file mode 100644 index 0000000000000000000000000000000000000000..ed7c58b29cd15ec18e850a5b7c463e883d5f3972 Binary files /dev/null and b/src/assets/icons/dollar.png differ diff --git a/src/assets/icons/fire.png b/src/assets/icons/fire.png new file mode 100644 index 0000000000000000000000000000000000000000..248d2434e1b7712b097ed38ef585596704e455e6 Binary files /dev/null and b/src/assets/icons/fire.png differ diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue index a46ebcc60c793084f563604563e53e3dad8cd7cb..038fc7c0f2871f0b2bdaa3de736c9a54a1d2009e 100644 --- a/src/components/BaseComponents/Menu.vue +++ b/src/components/BaseComponents/Menu.vue @@ -45,7 +45,6 @@ </ul> </li> </ul> - </div> </div> </nav> @@ -83,8 +82,9 @@ function toFeedback() { router.push('/news') } -function toUserProfile() { - router.push('/news') + +function toUserProfile(){ + router.push('/profile') } diff --git a/src/components/UserProfile/UserProfileLayout.vue b/src/components/UserProfile/UserProfileLayout.vue new file mode 100644 index 0000000000000000000000000000000000000000..494e5aea08ee567575c8e4a430612dfbc64e4246 --- /dev/null +++ b/src/components/UserProfile/UserProfileLayout.vue @@ -0,0 +1,57 @@ +<script setup lang="ts"> + +import Menu from "@/components/BaseComponents/Menu.vue"; +import Footer from "@/components/BaseComponents/Footer.vue"; + +let points = 0; +let streak = 0; +</script> + +<template> + <Menu></Menu> + <div class="container text-center"> + <div class="row"> + <div class="col"> + <img src="/src/assets/userprofile.png" class="img-fluid"> + <p class="h2">Username</p> + <p><a class="link-dark" href="#">Edit profile</a></p> + </div> + </div> + <div class="row"> + <div class="col"> + <img src="/src/assets/icons/fire.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar"> + <p>Streak: 10</p> + </div> + </div> + <div class="row"> + <div class="col-12"> + <img src="/src/assets/icons/dollar.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar"> + <p class="">Points: 2000 </p> + </div> + </div> + + <div class="row"> + <div class="col"> + total points earned + </div> + <div class="col"> + total badges earned + </div> + </div> + <div class="row"> + <div class="col"> + History + </div> + </div> + <div class="row"> + <div class="col"> + Your Badges + </div> + </div> + </div> + <Footer></Footer> +</template> + +<style scoped> + +</style> \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index bb108c321747b1b696a2d530d0fb618fd3d020d8..9cefc38dae5ff578c87d750d62a137fa88122e5f 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,8 +2,10 @@ import { createRouter, createWebHistory } from 'vue-router'; import LoginView from '../views/Authentication/LoginView.vue'; import { useUserInfoStore } from '@/stores/UserStore'; +import UserProfileView from "@/views/User/UserProfileView.vue"; import SignUp from '@/components/SignUp/SignUp.vue' + const routes = [ { path: '/', @@ -69,6 +71,11 @@ const routes = [ name: 'login', component: LoginView, }, + { + path: '/profile', + name: 'profile', + component: UserProfileView + }, { path: '/sign-up', name: 'sign up', diff --git a/src/views/User/UserProfileView.vue b/src/views/User/UserProfileView.vue new file mode 100644 index 0000000000000000000000000000000000000000..85e9882866797433edfa76cc3fbf4368796432cf --- /dev/null +++ b/src/views/User/UserProfileView.vue @@ -0,0 +1,12 @@ +<script setup lang="ts"> + +import UserProfileLayout from "@/components/UserProfile/UserProfileLayout.vue"; +</script> + +<template> +<UserProfileLayout></UserProfileLayout> +</template> + +<style scoped> + +</style> \ No newline at end of file