Update UI

frontend/package.json

@@ -13,8 +13,11 @@
     "axios": "^1.5.1",
     "pinia": "^2.0.10",
     "postcss": "^8.4.5",
+    "swiper": "^10.3.1",
     "tailwindcss": "^3.0.18",
     "vue": "^3.2.25",
+    "vue-awesome-swiper": "^5.0.1",
+    "vue-concise-slider": "^4.2.5",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {

frontend/src/components/BalanceCard.vue

@@ -1,30 +1,65 @@
 <style scoped>
 
 h1 {
-	@apply text-xl font-semibold block my-1;
+	@apply text-xl font-semibold block my-2;
+	margin-top: 5px;
+}
+
+#header1{
+	margin-top:-40px;
+}
+
+#div1{
+	position: relative;
+  width: 400px;
+  height: 200px;
+  background-color: #f2f2f2;
+  display: flex;
+	justify-content: center;
+    align-items: center;
+	box-shadow: 5px 5px 5px 0px rgba(255, 255, 255, 0.75);
+}
+
+.left-bottom-circle,
+.right-bottom-circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: #FFCA28;
+  position: absolute;
+  bottom: -15px;
+}
+
+.left-bottom-circle {
+  left: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-bottom-circle {
+  right: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>
 
 <template>
-  <main class="w-full mx-auto bg-gradient-to-r from-amber-500 to-amber-400 ring-2 ring-amber-600 px-1 py-1 rounded-xl flex gap-4 items-start justify-evenly">
+  <div id="div1" class="w-full mx-auto bg-amber-400 ring-0 ring-amber-600 px-1 py-5 rounded-t-xl flex gap-4 items-start justify-evenly">
+	<div class="left-bottom-circle">
+
+			<i class="fa fa-arrow-left" style="font-size:50px;"></i><br>
+
+	</div>
+    <div class="right-bottom-circle">
+		<i class="fa fa-arrow-right" style="font-size:50px;"></i>	
+	</div>
 		<section>
-			<p class="text-lg">Balance</p>
-			<h1>{{ balances.current.toLocaleString() }} EUR</h1>
-			<!-- <span class="w-full flex justify-between items-center">
-				<small>{{ balances.trend.value.toLocaleString() }} EUR</small>
-				<span class="flex items-end">
-					<i class="block fas fa-caret-up text-amber-400 text-xl mr-1"></i>
-					<small class="mb-1 block">{{ balances.trend.percent }}{{ balances.trend.prefix }}</small>
-				</span>
-			</span> -->
+			<h1 id="header1" style="font-size:18px;">Current balance</h1>
+			<h1 id="header2" style="font-size:30px;">{{ balances.current.toLocaleString() }} €</h1>
 		</section>
-		<!-- <section class="grid place-items-center rounded-lg bg-gradient-to-r from-amber-500 to-amber-500 shadow shadow-gray-800 shadow-inner text-gray-300 px-2 py-3">
-			<section class="flex flex-col text-center">
-				<span class="text-sm">Your points</span>
-				<span>{{ balances.points }}</span>
-			</section>
-		</section> -->
-	</main>
+	</div>
 </template>
 
 <script setup>

frontend/src/components/HeaderHome.vue

@@ -1,22 +1,22 @@
-<!-- <template>
+<template>
 	<HeaderBar class="z-20">
 		<template v-slot:start>
 			<div class="flex w-7/12 gap-3">
 				<span>
 					<img src="/avatar.jpg" class="rounded-full" width="50" />
 				</span>
-				<div class="text-gray-300">
+				<div class="text-white">
 					<p class="font-semibold text-xl">{{ fullname }}</p>
 					<small class="font-medium text-sm">Hey, good morning</small>
 				</div>
 			</div>
 		</template>
 		<template v-slot:end>
-			<div class="text-lg text-gray-300">
+			<div class="text-lg text-white">
 				<span class="mr-5 relative active:scale-95 duration-300" @click="navigate('Notifications')">
 					<span
 						style="width:20px; height:20px" 
-						class="bg-red-500 text-gray-300 grid place-items-center absolute left-1 -top-3 text-xs rounded-full">{{ amountNotif.length}}</span>
+						class="bg-red-500 text-white grid place-items-center absolute left-1 -top-3 text-xs rounded-full">{{ amountNotif.length}}</span>
 					<i class="fa fa-bell"></i>
 				</span>
 				<i @click="showFloatingBtn = !showFloatingBtn" class="relative fa fa-ellipsis-h">
@@ -28,7 +28,7 @@
 			</div>
 		</template>
 	</HeaderBar>
-</template> -->
+</template> 
 
 <script setup>
 

frontend/src/components/IconMenu.vue

@@ -1,11 +1,50 @@
-<template>
+<!-- <template>
   <main class="w-full flex flex-col items-center gap-3 text-center">
-    <div @click="navigate" class="w-full h-20 active:scale-75 duration-300 grid place-items-center bg-secondary shadow text-success border-2 border-gray-800 rounded-lg px-3 py-1">
-      <img src="/story1.png" alt="Sample 2">
+    <div @click="navigate" class="w-full rounded-circle h-20 active:scale-75 duration-300 grid place-items-center bg-yellow shadow text-success border-2 border-gray-800 rounded-circle px-3 py-1">
+      <img src="/story1.png" class="rounded-circle" alt="story 1">
     </div>
     <small class="text-gray-300">{{ source.name }}</small>
   </main>
-</template>
+  <img src="/story1.png" class="rounded-circle" alt="..." />
+</template> -->
+<template>
+	<div :class="['round-div', customClass]" @click="navigate" >
+	  <img src="/story1.png" class="round-image" alt="story 1">
+	</div>
+  </template>
+
+<script>
+export default {
+  name: 'RoundDiv',
+  props: {
+    customClass: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
+
+<style>
+.round-div {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: #3498db;
+}
+
+.round-image {
+  /* width: 50%;
+  height: 50%;
+  object-fit: cover; */
+
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+</style>
 
 <script setup>
 

frontend/src/router/index.js

@@ -14,6 +14,11 @@ const routes = [
 		path: '/',
 		component: () => import('@/views/Login.vue')
 	},
+	{
+		name: 'TransactionMenu',
+		path: '/transaction',
+		component: () => import('@/views/TransactionMenu.vue')
+	},
 	{
 		name: 'Deposit',
 		path: '/story1',

frontend/src/views/Deposit.vue

@@ -7,14 +7,16 @@
     @apply bg-secondary border border-gray-700 text-gray-300 rounded-lg h-full mt-2 text-sm px-2 py-3;
   } */
   img {
-    @apply w-full rounded-lg;
+    @apply w-full h-full rounded-lg;
   }
 </style>
 <template>
-  <img src="/long_story.png" alt="long story 1">
-  <Splide class="mt-3 z-10" :options="options">
+	<!-- <div class="fill">
+		<img src="/long_story.png" alt="long story 1">
+	</div> -->
+  <Splide class="mt-3 z-10" options="options">
     <SplideSlide>
-      <img src="/banner-1.jpg" alt="Sample 1">
+      <img src="/long_story.png" alt="Sample 1">
     </SplideSlide>
     <SplideSlide>
       <img src="/banner-2.jpg" alt="Sample 2">
@@ -26,4 +28,18 @@
       <img src="/banner-2.jpg" alt="Sample 2">
     </SplideSlide>
   </Splide>
-</template>
+ </template>
+
+<script setup>
+
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
+import '@splidejs/splide/dist/css/splide.min.css';
+
+const options = {
+  arrows: false,
+  autoplay: true,
+  perpage: 1,
+  type: 'loop'
+}
+
+</script>

frontend/src/views/Home.vue

@@ -24,18 +24,21 @@
 }
 
 .chatbox {
-  margin-top: 5vh;
-  border: 0.5px solid #e0e0e0;
+  margin-top: 3vh;
+  border: 2px solid #e0e0e0;
   padding: 10px;
   height: 55vh;
   overflow-y: auto;
-  border-radius: 0.5vw;
+  /* border-radius: 0.5vw 0.6vw 0.8vw 1vw; */
+  border-radius: 0px 0px 15px 15px;
+  box-shadow: 5px 5px 5px 0px rgba(255, 255, 255, 0.75)
 }
 .chat-interface {
   display: flex;
   align-items: stretch;
-  margin-top: 10px;
+  margin-top: 15px;
 }
+
 .chat-input {
   flex-grow: 1;
   padding: 10px;
@@ -97,8 +100,10 @@
 <template>
 	<main class="pt-1">
     <HeaderHome/>
-    <section class="mt-0">
+	<br>
+    <section class="mt-16">
       <Services />
+	  <br>
     </section>
 		<BalanceCard />
     <section>
@@ -126,6 +131,7 @@ import HeaderHome from '@/components/HeaderHome.vue'
 import BalanceCard from '@/components/BalanceCard.vue'
 import axios from 'axios';
 import Services from "@/components/Services.vue";
+import TransactionMenu from '../views/TransactionMenu.vue';
 
 const userInput = ref("");
 const messages = ref([]);

frontend/src/views/TransactionMenu.vue

@@ -0,0 +1,82 @@
+<style scoped>
+
+.input-wrapper {
+    @apply w-full h-16 flex items-center mb-3 rounded-lg overflow-hidden gap-2;
+}
+
+input {
+    @apply text-gray-300 active:ring-1 focus:ring-1 ring-green-500 duration-300 rounded-lg w-full bg-secondary h-full px-3 focus:ring-2 active:ring-2 ring-secondary;
+}
+
+</style>
+
+<template>
+    <main>
+
+        <section class="mt-16 text-gray-300 text-center w-10/12 mx-auto">
+            <p style="text-align:right;"><a href="home"> <i class="fa fa-times"></i></a></p>
+
+            <h1 class="font-semibold text-lg">Outgoing</h1>
+            <p class="text-sm">Transact funds to people</p>
+
+        </section>
+
+        <section class="mt-5">
+            <form @submit.prevent="transact" action="">
+                <div class="input-wrapper">
+                    <input v-model="form.recipient" type="text" placeholder="recipient">
+                </div>
+                <div class="input-wrapper">
+                    <input v-model="form.amount" type="number" placeholder="amount in €">
+                </div>
+
+                <section>
+                    <button class="w-full bg-amber-500 font-semibold text-gray-800 py-3 rounded-lg mt-6">
+                        <LoadAction :isLoad="isLoad" :isSuccess="isSuccess" :isFail="isFail" action="TRANSACT" />
+
+                    </button>
+                    <small class="mt-3 block text-red-600 font-medium">{{ msgErr }}</small>
+                </section>
+            </form>
+        </section>
+
+        <section class="mt-24 text-gray-300">
+
+        </section>
+    </main>
+</template>
+
+<script setup>
+
+import { ref, reactive } from 'vue'
+
+import { useRouter } from 'vue-router'
+import LoadAction from '@/components/LoadAction.vue'
+
+
+const router = useRouter()
+
+const form = reactive({
+    recipient: '',
+    amount: ''
+})
+
+
+
+
+
+
+
+const transact = () => {
+
+}
+
+
+
+
+</script>
+
+
+
+
+