fix: UI

Author: zackha

app/app.vue

@@ -13,13 +13,15 @@ const emptyHabits = computed(() => habits.value?.length === 0);
 <template>
   <Container>
     <Transition name="fade" mode="out-in">
-      <Card v-if="user" class="">
-        <ProfileHeader />
-        <HabitCard v-for="habit in habits" :key="habit.id" :habit="habit" />
-        <EmptyHabits v-if="emptyHabits" />
+      <Card v-if="user">
+        <div class="relative z-10">
+          <ProfileHeader />
+          <HabitCard v-for="habit in habits" :key="habit.id" :habit="habit" />
+          <EmptyHabits v-if="emptyHabits" />
+        </div>
       </Card>
       <Card v-else class="items-start justify-center gap-7 p-6">
-        <div class="flex w-5/6 flex-col gap-5">
+        <div class="relative z-10 flex w-5/6 flex-col gap-5">
           <div class="h-12 w-12 rounded-2xl border-4 border-green-600 bg-green-400 shadow-lg"></div>
           <div class="text-lg font-medium">Habit Tracker</div>
           <div class="text-3xl font-medium">

app/components/Card.vue

@@ -6,10 +6,21 @@
 
 <style lang="postcss" scoped>
 .card {
-  box-shadow:
-    inset 0px 0px 2.5px 0px rgba(255, 255, 255, 0.1),
-    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.2),
-    rgba(0, 0, 0, 0.4) 0px 15px 40px -10px;
-  @apply flex flex-col rounded-[2.375rem] bg-black/50;
+  @apply relative flex h-full w-full flex-col rounded-[2.375rem];
+  &::before {
+    @apply absolute inset-0 rounded-[2.375rem];
+    background: rgba(0, 0, 0, 0.5);
+    box-shadow: inset 2px 4px 16px 0 hsla(0, 0%, 97%, 0.06);
+    -webkit-backdrop-filter: blur(50px);
+    backdrop-filter: blur(50px);
+    content: '';
+  }
+  &::after {
+    @apply pointer-events-none absolute inset-0 rounded-[2.375rem];
+    border: 1.5px solid hsla(0, 0%, 100%, 0.05);
+    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
+    mask-image: linear-gradient(180deg, #000, transparent);
+    content: '';
+  }
 }
 </style>

app/components/Container.vue

@@ -1,9 +1,30 @@
+<script setup lang="ts">
+const backgroundImage = ref('/bg/bg1.jpg');
+const isTransitioning = ref(false);
+
+const setBackground = (image: string) => {
+  if (backgroundImage.value !== image) {
+    isTransitioning.value = true;
+    setTimeout(() => {
+      backgroundImage.value = image;
+    }, 300);
+  }
+};
+</script>
+
 <template>
   <div class="rmterp">
     <div class="fzypcq">
       <slot />
     </div>
-    <div class="absolute h-screen w-screen bg-cover bg-center blur" style="background-image: url('/bg/bg1.jpg')"></div>
+    <div
+      class="absolute h-screen w-screen bg-cover bg-center blur transition-opacity duration-300"
+      :style="{ backgroundImage: `url('${backgroundImage}')`, opacity: isTransitioning ? 0 : 1 }"
+      @transitionend="isTransitioning = false"></div>
+    <div class="absolute bottom-8 left-8 flex gap-4">
+      <button @click="setBackground('/bg/bg1.jpg')" class="bg-image-button" :style="{ backgroundImage: `url('/bg/bg1.jpg')` }"></button>
+      <button @click="setBackground('/bg/bg2.jpg')" class="bg-image-button" :style="{ backgroundImage: `url('/bg/bg2.jpg')` }"></button>
+    </div>
   </div>
 </template>
 
@@ -15,4 +36,8 @@
 .fzypcq {
   @apply z-10 mx-auto flex w-full max-w-sm flex-col gap-4 px-5;
 }
+
+.bg-image-button {
+  @apply h-12 w-12 rounded-full border-2 border-black/50 bg-cover bg-center transition-opacity hover:opacity-50;
+}
 </style>