background

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "clean": "rimraf dist node_modules/.cache node_modules/.vite"
   },
   "dependencies": {
     "core-js": "^3.8.3",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col bg-gradient-to-b from-green-100 to-green-300 pb-24">
+  <div class="min-h-screen flex flex-col bg-gradient-to-b from-green-100 to-green-300 pb-24 pt-0">
     <!-- Page Content -->
     <router-view v-slot="{ Component }">
       <div class="flex-1">

src/pages/Character.vue

@@ -38,7 +38,7 @@
           <img
             :src="selectedCharacter.img"
             :alt="selectedCharacter.name"
-            class="w-40 h-60 object-contain relative z-30 pb-12"
+            class="w-40 h-60 object-contain relative z-30 pb-16"
           />
         </div>
 

src/pages/Home.vue

@@ -1,5 +1,11 @@
 <template>
-  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-2 pl-2">
+  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-green-100 to-green-300 pb-28 pr-2 pl-2 mb-[-10px]"
+  style="background-image:url('/images/footer.png'); 
+         background-repeat:no-repeat; 
+         background-position:bottom; 
+         background-size: 100% 200px;"
+         margin-bottom=-10px;
+  >
     <!-- Character Preview -->
      <div class="w-full max-w-md flex flex-col items-center z-60 " >
         <div class="relative flex items-end justify-center z-30 px-[10px] mt-[40px]">
@@ -36,7 +42,7 @@
           <img
             :src="selectedCharacter.img"
             :alt="selectedCharacter.name"
-            class="w-40 h-60 object-contain relative z-30 pb-12"
+            class="w-40 h-60 object-contain relative z-30 pb-16"
           />
         </div>
         <div class="flex flex-row items-start justify-between gap-12 w-full pt-5 absolute bottom-2 left-2 pr-5">
@@ -72,7 +78,8 @@
      <div class="w-full max-w-md flex flex-col items-center bg-green-grey py-[0px] mx-[10px] md:mx-0
      transform transition-transform duration-300 hover:scale-105
      ">
-        <div class="bg-lime-500 rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]">
+        <div class="rounded-3xl p-6 shadow-2xl-soft flex items-start gap-4 w-full py-[10px] my-[20px]"
+          :class="isDone ? ' bg-lime-500' : 'bg-white'" >
           <div class="flex-shrink-0 mt-1">
             <img src="/images/qicon1.png" alt="Quest Icon" class="w-12 h-12" />
           </div>
@@ -237,6 +244,7 @@ export default {
       showModal:false,
       selectedProfile : {name : "profile", img: "/images/propic-001.svg"},
       modalType : "profile",
+      isDone : true,
     };
   },
   methods: {